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

我一直使用以下代码来使< a>链接填充其容器的内容。 Chrome和IE现在均显示< a>链接内容的大小。如何使Chrome和IE正确显示区块超链接

我已经尝试过明确的像素高度和重要的标签，但铬仍然坚持使链接的大小的内容。该链接没有内容，因此显示为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; 
}

来源

2013-03-18 Obsidian

这应该工作正常，虽然你有.div（类div）而不是div（元素div） – 2013-03-18 11:15:58

它看起来另一种风格是应用display：inline;到我的锚标记。 Firefox接受我的block chrome忽略了我的更改。 – Obsidian 2013-03-18 11:26:59

修复了抱歉的家伙是一个缓存问题。 – Obsidian 2013-03-18 11:34:51

在这里你去 - 在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/

来源

2013-03-18 11:30:55 Cynthia

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

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

文风

DEMO

来源

2013-03-18 11:14:22 Sowmya

.div仅仅是一个例子，对象的类是不同的。 – Obsidian 2013-03-18 11:18:36

@DreamTeK它也应该在这种情况下工作。检查这个http://jsfiddle.net/V6CPG/2/ – Sowmya 2013-03-18 11:19:48

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

来源

2013-03-18 11:21:23

我想你应该与Chrome和IE的版本，你也操作系统启动，而这块的你给的代码，可以作为一个魅力。

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

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

来源

2013-03-18 11:38:57

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

回答

相关问题