web-dev-qa-db-ja.com

Internet Explorerボックスモデル-オフセットとは何ですか？

IE 7.をサポートするようにサイトを適合させようとしています。ただし、69pxだけ右にオフセットされている要素がいくつかあります。IE9でテストし、ページをレンダリングするように設定していますIE7のように、開発者モードをオンにして要素を調べると、「マージン」の周囲に「オフセット」というパラメーターがあることに気付きました。

私はこれについてこれまで聞いたことがなく、グーグルは私を助けてくれませんでした-私は浮動小数点オフセットについて何かを見つけることができましたが、同じではありませんでしたが、それは奇妙なモードのいくつかの問題を排除するためにあったと思いますか？このオフセットパラメータを削除するにはどうすればよいですか？

明らかに、IE-7固有のスタイルシートが設定されており、このリンクで私のテスト環境にアクセスすることで、自分で問題をテストできます。

http://suitable.amok-adhoc.com/2012/

解決済み：

解決策を見つけました-とても簡単でした。次のように明示的に位置を宣言する必要がありました（ただし、他のすべてのブラウザの親要素から継承されましたIEマージンが追加され、「オフセット」と呼ばれました。これにより、オーバーライドされます）：

p {
    left:0px;
}
cssinternet-explorerinternet-explorer-7offset
35
funkylaundry

offsetは、要素が元の場所から移動した距離です。これは、left、top、bottom、および/またはrightの値を使用して、相対または絶対のいずれかの要素をpositionしたときに発生します。例として次のコードを見てください：

#header {
    top: 3em;
    left: 3em;
    position: relative;
}

Internet Explorer 10でこの要素を調べると、あなたが言及していたoffsetが表示されます。 emの値はピクセルに変換されましたが、効果はまだ表示されています。 Chrome開発者ツール（Operaでも））でも同様のものが表示されていることに注意してください。代わりに「位置」というラベルが付いています。

enter image description hereenter image description here

奇妙なことに、Firefoxはイラストを介してオフセット/位置を伝えているようにも見えません。

enter image description here

結局、これは単なる意味論の問題です。それを「オフセット」と呼ぶか「位置」と呼ぶかは、同じです。画面上の元の場所からの距離です。

お役に立てれば。

32
Sampson

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

3
BrainCoder

同様の問題があり、ヘッダーメニューの幅が正しく表示されていませんでした（縮小された幅で表示されていました）。デバッグを行った後、remポリフィルを追加すると問題が発生することがわかりました。私もmeta(http-equiv="x-ua-compatible" content="IE=Edge,chrome=1")を使用していました。

rem-polyfil JSファイルを削除した後、正常に動作し始めました。

0
Muhammad Hannan

あなたが使用しようとすることができます：position: -ms-device-fixed;このトリックは私を助けます。

0
mac.slusarek