如何让 Chrome 和 IE 正确显示阻止超链接答案

【问题标题】：How to make Chrome and IE display block hyperlinks correctly如何让 Chrome 和 IE 正确显示阻止超链接
【发布时间】：2013-03-06 16:56:44
【问题描述】：

我已经尝试过明确的像素高度和重要标签，但 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;
}

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你的意思是：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 定义一个类并根据需要链接和设置样式。

【讨论】：

【解决方案3】：

你去 - 在 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 中编辑高度和宽度，超文本链接会相应调整。

【讨论】：

【解决方案4】：

我认为您应该从 Chrome 和 IE 的版本以及您的操作系统开始，而您提供的这段代码可以作为一种魅力。

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

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

【讨论】：