如何正确地使Chrome和IE显示块超链接

Question

我一直使用以下代码来制作＆lt; a＆gt;链接填充其容器的内容。 Chrome和IE现在都显示＆lt; a＆gt;链接内容的大小。

我已尝试过明确的像素高度和重要标签，但Chrome仍然坚持要使链接达到内容的大小。该链接没有内容，因此显示为0px高度和宽度。

这是我如何制作块超链接？

HTML

<div class="mydiv">
    <a href="#"></a>
</div>

CSS

.mydiv {
    height: 50px;
    width: 50px;
    display: block;
}
.mydiv a {
    height: 100%;
    width: 100%;
    display: block;
}

Answer 1

你的意思是：this

HTML：

<div class="abc">
  <a href="#"></a>
</div>

的CSS：

.abc {
height: 50px;
width: 50px;
display: block;
border-style:solid;
border-width:3px;
}
.div a {
height: 100%;
width: 100%;
display: block;
}

只需为div和链接定义一个类，并根据需要设置样式。

Answer 2

您可以在Chrome和IE中进行测试，同时适用于：

这是HTML：

<div class="abc">
    <a href="http://www.google.com"></a>
</div>

和CSS：

div.abc { display:block ;
    width:200px ;
    height:50px ;
    background:blue ;
}

.abc a { display:block ;
    width:100% ;
    height:100% ;
}

您可以在div.abc中编辑高度和宽度，超文本链接也会相应调整。

在这里演示：http://jsfiddle.net/PRZaX/

Answer 3

您应该从div中删除.。是类名的选择器，在这里你是直接div

的样式

div {
height: 50px;
width: 50px;
display: block; background:red
}
div a {
height: 100%;
width: 100%;
display: block;
}

<强> DEMO

Answer 4

我认为你应该从Chrome和IE版本以及操作系统开始，而你提供的代码片段就像魅力一样。

我知道，IE的旧版本在将锚点显示为块时遇到了一些问题，修复它的正确方法是设置假背景，例如：background: url(/);，但我很确定情况并非如此。

如果您有任何其他样式表应用于您的页面，请提供相关信息。