css - 用 包装 block 元素

Question

当我在网上阅读时，将 block 元素包装在 <a> 中是一种有效的 html5 做法元素。不过我有一个问题。

我的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怎么来的元素不“跟随”它的 child ？谢谢!

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

Answer 1

这取决于您要查找的内容，如果您希望它表现得像 block 元素，您可以将 a 设置为 display:block:

a {
   display: block;
   background:blue
}

EXAMPLE 1

或者您可以将其设置为 display: inline-block 以使其表现得像它自然的那样:

a {
   display: inline-block;
   background:blue
}

EXAMPLE 2

没有理由说这些都不能在您的网站上运行。也许你有 CSS 或 javascript 覆盖它？这两种方法都可以解决折叠的高度/宽度问题。如果这是一个冲突的 CSS 问题，您可以通过添加 id 或 class 来更具体:

a#wrapper{
   display: inline-block;
}

或

a.wrapper{
   display: inline-block;
}

有关折叠元素的更多信息，您可以查看this SO answer