CSSを使用して要素のオフセットを取り除くにはどうすればよいですか？

いくつかの要素で位置の問題があります。IE8Developerツールを調べると、次のように表示されます。

今、私は問題が12のオフセットであることをかなり確信していますが、どうすればそれを削除できますか？CSSオフセットプロパティの記述が見つかりません。マージンに加えてオフセットが必要ですか？

これがこれを生成するコードです：

 <div id="wahoo" style="border: solid 1px black; height:100px;">

    <asp:TextBox ID="inputBox" runat="server" />

    <input id="btnDropDown" type="button" style="width:26px; height:26px; background-position: center center; border-left-color: buttonface; background-image: url(Images/WebResource.gif); border-bottom-color: buttonface; border-top-color: buttonface; background-repeat: no-repeat; border-right-color: buttonface;"  tabindex="99" />

    <div id="ListboxWrapper" style="display:none; position:absolute; onfocusout="this.style.display = 'none'"">
       <asp:ListBox ID="lstBoxCompany" runat="server" AutoPostBack="True" OnSelectedIndexChanged="lstBoxCompany_SelectedIndexChanged" style="z-index: 100;" Width="300px" />               
    </div>

</div>

オフセットのある要素は inputBox

そのオフセットは基本的に、要素の位置css属性に基づいてブラウザーが要素に対して計算したx、y位置です。したがって、その<br>前またはその他の要素を配置すると、オフセットが変更されます。たとえば、次のようにして0に設定できます。

#inputBox{position:absolute;top:0px;left:0px;}

または

#inputBox{position:relative;top:-12px;left:-2px;}

したがって、上、左、右、および下の属性を使用していつでも修正できますが、位置の問題があっても、必ずしもオフセットの問題であるとは限りません。

問題のあるブラウザは非互換ですか？

私にとっては、トップオフセットを引き起こしていたのはvertical-align: baselinevs vertical-align: topでした。

設定してみてください vertical-align: top

クイックフィックス：

position: relative;
top: -12px;
left: -2px;

これでこれらのオフセットのバランスが取れますが、レイアウト全体を見て、そのボックスが他のボックスとどのように相互作用するかを確認する必要があるかもしれません。

専門用語については、left、right、topおよびbottomCSSをされているオフセットプロパティを。これらは、要素を特定の場所に配置する（absoluteまたはで使用する場合fixed）、またはデフォルトの場所を基準にして要素を移動する（relative配置で使用する）ために使用されます。一方、マージンはボックス間のギャップを指定し、ボックスが折りたたまれる場合があるため、オフセットとして確実に使用できません。

ただし、この場合、オフセットはCSSオフセットから（単独で）計算されない場合があることに注意してください。

topプロパティとleftプロパティを負の値に設定することは、問題が単純に互換モードになっている場合には適切な回避策ではない可能性があります。これは、ページに<!DOCTYPE>宣言がないために発生し、IE8で互換モードでレンダリングされる場合があります。IE8開発者ツールで、[ドキュメントモード]の[Quirksモード]が選択されていないことを確認します。選択されている場合は、適切な<!DOCTYPE>宣言を追加する必要があります。

IE開発者ツールを使用している場合は、誤って古い設定のままにしていないことを確認してください。Internet Explorer 7 Standardsに設定されていることがわかるまで、私はこの同じ問題に夢中になりました。それをInternet Explorer 9 Standardsに変更し、すべてが所定の位置にぴったりとはまりました。

要素を上に移動：-12pxまたはそれを配置しても問題は解決せず、マスクするだけです

私は同じ問題を抱えていました-1つのラッピング要素が混在しているかどうかを確認してください：フローティング要素と非フローティング要素-私の非フローティング要素がこの奇妙なオフセットをフローティング要素に引き起こしました

要素のマージンとパディングを定義すると、問題が発生します。

#element_id {margin: 0; padding: 0}  

問題が存在するかどうかを確認します。IEは、不要な継承を使用してページをレンダリングします。あなたはそうするのをやめるべきです。

これは奇妙に思えますが、入力vertical-align: topので設定を試すことができますCSS。少なくともIE8では修正されています。

DotNetNuke（DNN）で実行されている.NETベースのWebサイトでも同じ問題が発生しました。それを解決したのは、基本的にはフォームタグのマージンをリセットするだけでした。.NETベースのWebサイトは多くの場合、フォームにラップされており、マージンをリセットしないと、奇妙なオフセットが表示されることがあります。

サイトでこの問題を修正しようとしている場合は、CSSファイルに次のように入力してください。

form {
  margin: 0;
}

これらの「デフォルト」を取り除くために、リセットCSSを適用できます。以下は、リセットcss http://meyerweb.com/eric/tools/css/reset/の例です。独自のスタイルの前にリセットスタイルを適用するだけです。

私も同じ問題を抱えていました。UpdatePanelの更新後にオフセットが表示されました。解決策は、次のようにUpdatePanelの前に空のタグを追加することでした。

<div></div>

...

このようにアウトラインをなしに設定するだけです

[識別子] {アウトライン：なし; }

私の場合、ulが垂直フレックスボックスである間に、オフセットがli内のグリッドレイアウトを持つカスタム要素に追加されました。

かなり簡単な解決策は、liをブロック要素として定義し、

li {
 display: block;
}

そしてオフセットはなくなりました