web-dev-qa-db-ja.com

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

IE8 Developer toolsを調べてみると、いくつかの要素に位置決めの問題があります。

Where does offset come from?

私の問題は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です

htmlcssinternet-exploreruser-interface
88
m.edmondson

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

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

または

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

したがって、位置の問題がどんなものであっても、必ずしもオフセットの問題ではありませんが、top、left、right、bottomの各属性で再生することでいつでも修正できます。

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

43
Neo

私にとっては、vertical-align: baseline vs vertical-align: topがトップオフセットの原因でした。

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

30
Richard

クイックフィックス：

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

これにより、これらのオフセットが相殺されますが、レイアウト全体を見て、そのボックスが他のボックスとどのように相互作用するかを確認する必要があります。

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

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

9
Alin Purcaru

問題が単にQuirksモードにあることだけである場合、上と左のプロパティを負の値に設定するのは良い回避策ではないかもしれません。これは、ページに<!DOCTYPE>宣言がない場合に発生し、IE8で互換モードでレンダリングされます。 IE8開発者ツールで、[ドキュメントモード]の下の[クォークモード]が選択されていないことを確認します。選択されている場合、適切な<!DOCTYPE>宣言を追加する必要がある場合があります。

3
regularmike

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

2
Tom McGee

エレメントの上部を移動：-12pxまたはそれを配置しても問題は絶対に解決せず、マスクするだけです

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

2
Picard

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

1
BrainCoder

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

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

form {
  margin: 0;
}
1
Vlastique

問題に直面している要素の余白とパディングを定義します。

#element_id {margin: 0; padding: 0}

問題が存在するかどうかを確認します。 IEは、ページをより望ましくない継承にレンダリングします。停止しないでください。

1
Pmpr

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

0
sawe

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

enter image description here

非常に簡単な解決策は、liをブロック要素として定義するように設定することでした

li {
 display: block;
}

そして、オフセットはなくなった

0
Michaël Vanderheyden

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

[識別子] {outline：none; }

0
Daniel Barde

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

<div></div>

...

0
mitkob