使用<a></a>包装块元素

Question

当我在网上阅读时，它是一个有效的html5练习，用于将块元素包装在<a>个元素中。我有一个问题。

我的HTML

<a href="http://google.com" target="_blank">
<div> </div>
</a>

我的css

div {
    background:#f00;
    height:100px;
    margin-left:10px;
    width:300px;
}

a {background:blue;}

该链接确实有效，但我看不到蓝色background，而且Chrome表示我的a没有高度和宽度

将a的css更改为display:inline-block可以解决问题，但不在我的网站上。

你有什么建议或解决方案吗？ a元素怎么没有＆＃34;跟随＆＃34;它的孩子？ 谢谢！

http://jsfiddle.net/72cYy/82/

Answer 1

这取决于您要查找的内容，如果您希望a的行为类似于块元素，则可以将display:block设置为a { display: block; background:blue } ：

display: inline-block

EXAMPLE 1

或者您可以将其设置为a { display: inline-block; background:blue } ，使其表现得像天真一样：

id

EXAMPLE 2

没有理由认为其中任何一个都不适用于您的网站。也许你有CSS或javascript覆盖它？这两种方法都将修复折叠的高度/宽度问题。如果这是一个有冲突的CSS问题，您可以通过添加class或a#wrapper{ display: inline-block; } 来更加具体：

a.wrapper{
   display: inline-block;
}

或

{{1}}

有关折叠元素的详细信息，请查看this SO answer