块级锚不占用文本周围的空间 [IE7]答案

【问题标题】：block-level anchor not taking up space around text [IE7]块级锚不占用文本周围的空间 [IE7]
【发布时间】：2010-12-07 09:41:20
【问题描述】：

我有一个带有一些简单 CSS 的锚标记：

div {
  background-color: gray; /* for debugging */
}

div a {
  display: block;
  padding: 6px 4px 6px 7px;
  background-color: red; /* for debugging */
}

在 Firefox 中，锚点（红色）即使在文本之外也是可点击的，因为它是带有一些填充的 display: block。在 IE7 中，当我将鼠标悬停在非文本的红色区域上时，锚点不再是那里的链接。

【问题讨论】：

标签： css internet-explorer-7

【解决方案1】：

尝试将zoom: 1 添加到元素。这给出了元素hasLayout，它不仅是所有 IE 错误的 60% 的来源（根据我为说明这一点而进行的一项调查），而且往往会困扰块级锚点。

【讨论】：

谢谢，我将zoom: 1; 添加到div a 但是现在它看起来不再是块，而是内联。有什么想法吗？

【解决方案2】：

zoom: 1; position: relative; 的组合似乎对我有用。太坑了！

【讨论】：

【解决方案3】：

zoom: 1 在没有 position: relative 的情况下为我工作，但是在我的 a 元素上设置了 display: block。

【讨论】：

【解决方案4】：

我的页面上有 2 个导航栏 http://gvtdev.davebezaire.com。设置zoom:1; display:block; 导致一个菜单（沿左侧）正常运行。即使我添加position:relative; width:100%，另一个（在顶部）也无法正常工作。目前，我已经设置了a:hover {text-decoration:underline;}，除非有人对我有建议，否则它必须足够好。

作为一个相当新的网页开发人员，得知我在 IE 修复上花费了多少精力，真是令人沮丧！

【讨论】：

【解决方案5】：

使用 zoom: 1 !important; 为我工作。

【讨论】：