html - 菜单在 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 中将两者合并在一起并指定 #menu_option { width:100px; margin :0； } 用于 IE8 和 #menu_option { width:100px;左边距:-50px； 为其他人。

这是我在 IE8 中应用 #menu_option { width:100px;左边距:-50px； }

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

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

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

如果我应用 margin 0 那么我在 IE8 上得到第二张照片，在其他图片集上向右移动，就像

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

Answer 1

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

我同意为此添加一个额外的元素很糟糕，但只要看看它是否有效，然后你就可以尝试一下了。