Question

我有html和css如下 -

    .title {
        display: block; background-color: red;
    }

<a href="#">
    <span class="title">Text</span>
</a>

我可以看到SPAN跨越100％的可用宽度（因为display: block）。如下所示

|----------------------------------------------------|
| Text                                               |
|----------------------------------------------------|

在Firefox中，我可以点击上面框中的任意位置，它会将我带到链接页面。但是，在IE（IE 7）中，只有当我将鼠标悬停在“文本”文本上时才会将光标作为手。

在IE中我需要做些什么来使其工作（与在FF中一样）？

我尝试将span标记本身（不仅仅是文本）放在span中，但它不起作用。

感谢。

Answer 1

设置锚点样式并移除范围。

（问题是由于某些浏览器如何处理display: block元素内的display: inline元素。您可以通过设置锚点和跨度样式来解决它，但是跨度看起来多余在这个例子中）

Answer 2

为您的<a>代码制作样式“display：block; width：100％;”

Answer 3

当然，您需要删除范围并将该类应用于锚标记。我不认为你需要明确地将宽度设置为100％，但我可能是错的。

Answer 4

删除额外的span并将该标题类放在链接本身上。然后加宽度：100％;到了css。

较少的标记通常更好，这就是为什么你应该删除额外的跨度。

Answer 5

你也可以使用保证金或填充

Answer 6

为display:block的锚点添加样式，max-width:30px !important;最大宽度可以是任意

li a {
    display: block;
    height: 30px;
    max-width: 30px !important;
}

如何使用css设置锚标签文本宽度？

6 个答案: