css hover 会破坏 IE 中的页面布局为什么？答案

【问题标题】：css hover breaks page layout in IE WHY?css hover 会破坏 IE 中的页面布局为什么？
【发布时间】：2010-12-26 19:32:49
【问题描述】：

我在页面上的某些图像链接上使用 CSS 样式悬停。

当用户将鼠标悬停在图像上时，它的背景位置会发生变化，从而提供高亮效果。

当我将鼠标悬停在 i.e.6 中的图像上时，我的页面被下推 40 像素。

这是为什么？

【问题讨论】：

【解决方案1】：

IE6 是狗。试试：

a{zoom:1}

【讨论】：

【解决方案2】：

您使用的是哪个版本的 IE？您应该在此处提供示例代码。但是，您可以尝试在悬停的图像上添加以下脏 css 技巧。

<style type="text/css">
  img:hover
  {
      _margin-top:-40px;
  }
</style>

以上样式只会针对IE，其他浏览器会忽略。

【讨论】：

【解决方案3】：

在 Internet Explorer 中使用悬停可能会导致奇怪的样式问题。

您可以通过使用条件注释来避免浏览器问题。

编辑：

Internet Explorer 6 仅在 "a" 元素上支持 CSS ":hover" 属性

重新编辑：

仅用于文档...如果您真的想要或必须使用“悬停”。

但这是一个非常粗略的解决方案。

【讨论】：

【解决方案4】：

旧盒子模型搞砸了！ IE6 呈现了与 W3C 呈现的不同的盒子模型。 IE6 Box 的宽度（希望我做对了）是一个总宽度，包括内边距和边框。 W3C 盒子模型是宽度声明的，句号。边距、内边距和边框是对象宽度的补充。

【讨论】：