Question

HTML结构

<div id="header_div">
    <a href="#">
        <img width="250" height="75" src="./images/header_logo.png">
    </a>
</div>

CSS：

:hover{
outline:1px dotted red;/*this line help us to actually see*/
}

#header_div{
-moz-border-radius-topright:8px;
-moz-border-radius-topleft:8px;
-webkit-border-top-right-radius:8px;
-webkit-border-top-left-radius:8px;
border-top-right-radius:8px;
border-top-left-radius:8px;
border:1px solid #477BA3;
border-bottom:0;
background:#5BA2D9 url('./images/header_bg.png') repeat-x left bottom;
}

#header_div img{
border:0;
padding:5px 10px;
}

我使用了Google Chrome元素检查员并注意到height是40px（<a>）

实时视觉示例here

Answer 1

因为<a>是内联元素。尝试一些CSS：

#header_div {
    overflow: hidden;
}

#header_div a {
    display: block;
    float: left;
}

<a>是一个内联元素，因此（除了“with”）它不遵守诸如“height”之类的结构属性。这由display: block;解决。

默认情况下，Block元素占据其父级的整个宽度，但您希望<a>元素紧紧包裹在图像周围。这由float: left;解决。

由于<a>元素是#header内唯一的对象，#header在<a>浮动时会崩溃。这是由overflow: hidden;解决的，这是一个便宜的“clearfix”。

当浮动包含在具有可见边框或背景的容器框内时，浮动不会自动强制容器的底边向下，因为浮动更高。相反，容器会忽略浮动，并像标志一样从容器底部垂下。


来源： http://www.positioniseverything.net/easyclearing.html

Answer 2

尝试将display:block;添加到#header_div img。它对我有用。

为什么我的<a> not expand with the dimensions of my <img/>?</a>

2 个答案: