菜单在IE8上留下，但在IE9和其他浏览器上保持正确的位置

Question

我在CSS中有一个代码，如

CSS

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

在Mozila，Google Chrome和IE9中此菜单位于此代码的正确位置，但在IE9中，它向左移动并缩小图像。所以我申请了

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

此代码在IE8上正常运行，但菜单在Mozila，Chorome和IE9上向右移动。

请有人建议我如何应用这两个代码或在CSS中将两者合并在一起，并为IE8指定#menu_option { width:100px; margin: 0; }，为其他人指定#menu_option { width:100px; margin-left:-50px; }。

以下是我在应用#menu_option { width:100px; margin-left:-50px; }

时在IE8中获得的图片

！[在此处输入图片说明] [1]

但在其他人（IE9，Chrome和Mozila）中我得到了这是正确的。

！[在此输入图片说明] [2]

如果我申请保证金0那么它我在IE8上获得第二张照片，而在其他人上，图片集正在向右移动

！[在此输入图片说明] [3]

Answer 1

根据经验，如果您想要良好的浏览器兼容性，请不要在同一元素中放置宽度和边距/填充（左或右）（与高度和边距/填充顶部/底部相同）。 IE往往在宽度内包含边距和填充（和边框），而其他浏览器则不包括。尝试在#menu_option周围放置一个像<div>这样的容器并将宽度放在那里，并将边距保留在内部元素中，只是为了看它是否更好。

我同意为此添加一个额外的元素很糟糕，但只要看看它是否有效，然后你可以玩弄东西。

Answer 2

我认为您要求提供特定于IE的注释码。

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

虽然我强烈建议不要使用像这样的浏览器相关代码，除非作为最后的手段。 Rodolfo关于分离div的建议确实是最好的方法。

Answer 3

您需要静态宽度有什么特别的原因吗？除了删除它之外，使用#menu_option {position: relative; left: 50px;}相对地定位元素也可能有所帮助，具体取决于您将此菜单选项放入的位置。