0

次のようなCSSのコードがあります

CSS

#menu_option { width:100px; margin-left:-50px; }

Mozilla、Google Chrome、および IE9 では、メニューはこのコードでは正しい位置にありますが、IE9 では左に移動して画像を削減しています。だから応募した

#menu_option { width:100px; margin: 0; }

また、このコードは IE8 では正しく実行されていますが、Mozila、Chorome、IE9 ではメニューが右に移動しています。

#menu_option { width:100px; margin: 0; }両方のコードを適用する方法や、CSS で両方をマージして IE8 やその他のコードを指定する方法を提案してください #menu_option { width:100px; margin-left:-50px; }。

これは、申請時にIE8で取得している画像です #menu_option { width:100px; margin-left:-50px; }

![ここに画像の説明を入力][1]

しかし、他のもの（IE9、Chrome、およびMozilla）では取得していますが、これは正しいものです。

![ここに画像の説明を入力][2]

そして、マージン 0 を適用すると、IE8 で 2 番目の写真が取得され、他の写真セットでは画像セットが次のように正しく移動します

![ここに画像の説明を入力][3]

4

3 に答える 3

0

IE固有のコメントコードを求めていると思います。

<!--[if IE 8]>
<style type="text/css">
etc.
</style>
<![endif]-->

最後の手段を除いて、このようなブラウザ依存のコードを使用しないことを強くお勧めします。divの分離に関するRodolfoの提案は、これを行うための最良の方法です。

于 2012-07-20T19:01:57.557 に答える
0

経験則として、良好なブラウザ互換性が必要な場合は、同じ要素に幅とマージン/パディング (左または右) を入れないでください (高さとマージン/パディングの上/下と同じです)。IE は幅の内側にマージンとパディング (および境界線) を含める傾向がありますが、他のブラウザーはそうではありません。#menu_optionのような<div>コンテナーを配置して、そこに幅を配置し、内部要素にマージンを残して、それが改善されるかどうかを確認してください。

これだけのために余分な要素を追加するのは面倒だと思いますが、それが機能するかどうかを確認してから、いろいろと試してみてください。

于 2012-07-20T18:55:22.920 に答える
0

静的な幅が必要な特定の理由はありますか? それを削除する以外に、#menu_option {position: relative; left: 50px;}このメニューオプションを何に配置するかに応じて、要素を相対的に配置することも役立つ場合があります。

于 2012-07-20T19:13:24.730 に答える