Question

<div style="float:right;">
    <a href="#" class="button2" title="Upgrade now">Upgrade now</a> 
    <a href="#" class="button2" title="Buy more credits">Buy more credits</a>
</div>

float:right|left（无论是内联还是我的样式表）似乎会使链接失去垂直填充和底部边框。如果我删除它，我没有问题。

以下是链接的 CSS ：

.button2 {
    color: #fff;
    font-size: 18px;
    text-shadow: 0 -1px 0 #064687;
    border: 0;
    border-bottom: 2px #0B5BAC solid;
    border-radius: 8px;
    background: #1E88F2;
    background: -moz-linear-gradient(top, #6BB0F7, #2089F2);
    padding: 9px;
    cursor: pointer;
    box-shadow: 0 2px 2px #999;
    text-decoration: none;
    width: 270px;
}

Answer 1

这是因为您尝试将样式分配给它们通常不适用的内联元素。例如垂直填充，宽度和边框。尝试给它display:inline-block或display:block; float:left;，如果使用display:inline-block，则在IE7的情况下，查找IE 7的display：inline-block fix，你应该全部设置好。 jsFiddle：http://fiddle.jshell.net/wUD9q/5/show/light/

仅供参考 - Float完全与它无关。删除外部div上的浮动也不会修复它。 jsFiddle因为它仍然破碎：http://fiddle.jshell.net/wUD9q/1/show/light/

Answer 2

通过添加缩放来尝试旧的'hasLayout'修复：1;

.button2 {
    zoom: 1;
}

http://www.satzansatz.de/cssd/onhavinglayout.html

我不喜欢做那样的黑客攻击，但似乎达到了你想要的效果。

Answer 3

IE7在全球浏览互联网的比例不到1％。继续前进！

消息来源：http://theie7countdown.com/

非常奇怪的IE7浮动影响儿童bug

3 个答案: