0

我在 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 中将两者合并在一起并 #menu_option { width:100px; margin: 0; }为 IE8 和#menu_option { width:100px; margin-left:-50px; }其他人指定。

这是我在申请时在 IE8 中获得的图片 #menu_option { width:100px; margin-left:-50px; }

![在此处输入图像描述][1]

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

![在此处输入图像描述][2]

如果我应用边距 0，那么我将在 IE8 上获得第二张照片，而在其他人上，图片集正在向右移动

![在此处输入图像描述][3]

4

3 回答 3

0

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

于 2012-07-20T19:13:24.730 回答
0

我认为您要求的是特定于 IE 的评论代码。

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

尽管我强烈建议不要使用这样的依赖于浏览器的代码，除非作为最后的手段。Rodolfo 关于分隔 div 的建议确实是最好的方法。

于 2012-07-20T19:01:57.557 回答
0

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

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

于 2012-07-20T18:55:22.920 回答