一个css布局问题

Question

html结构如下：

<div class="wrapper" style="width: 1250px;">
    <a href="#"><img src="http://localhost/public/images/ibo123-logo.png" class="indexlogo"></a>
    <div class="topad f_r"><a href="#"><img src="http://localhost/public/photo/726x88-AD.gif"></a></div>
</div>

css如下：

.wrapper{
    margin:0 auto;
    min-width:800px;
    position:relative;
}
.f_r{
    float:right;
}
.topad{
    padding:14px 0;
}

现在的问题是在chrome中刷新，会经常看到<div class="topad f_r">被隐藏掉。
因为他超出了warpper的范围。被定位到了下面。对于这个问题。我试了多种方案。
怀疑是wrapper没有width或是js给width的大小等，但是加了也不能解决。
然后，开始怀疑是浏览器对于float的解释，因为在ie不会这样，在chrome会。然后看一下元素布局，是wrapper里面有一个a和一个float的
div,是不是在加载的时候，a影响到了后面float的div的布局。然后，试着将a放进div中，然后让这个div float起来
发现可以解决这个问题，具体为什么直接在a后面放一个浮动的div，还是没有搞清楚。

<div class="wrapper" >
    <div class="f_l" > <a href="#"><img src="{{$smarty.const.WEBSITE_URL}}public/images/ibo123-logo.png" class="indexlogo"/></a></div>
    <div class="topad f_r" ><a href="#"><img src="{{$smarty.const.WEBSITE_URL}}public/photo/726x88-AD.gif"/></a></div>
</div>

不知道有没有人深入的研究过，到底a标签怎么影响到了float的div的布局？

Answer 1

大致原因并不在a标签上，而是在a标签内部的img标签上面。img标签很奇葩的是个行内块级元素，而且默认会和外边的块级元素产生一个1像素左右（一般不到一像素）的细小边距，而且只有消除行内块级属性才可以消除这个边距。