非常奇怪的 IE7 浮动影响儿童错误答案

【问题标题】：Very weird IE7 float affecting children bug非常奇怪的 IE7 浮动影响儿童错误
【发布时间】：2013-08-16 14:39:08
【问题描述】：

<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;
}

【问题讨论】：

出于好奇，你为什么还关心IE7？
您还应该包含更多内容，而不仅仅是-moz-gradient。考虑到 firefox 的市场份额较低，-webkit-gradient、-ms-gradient 和 gradient 至少也应该包括在内，如果您真的特别倾向于支持较旧的 opera 浏览器，还应包括 -o-gradient。
或者使用 Compass/Sass mixin 在 1 条语句中提供最佳的跨浏览器渐变支持：compass-style.org/reference/compass/css3/images

标签： html css internet-explorer css-float

【解决方案1】：

通过添加缩放来尝试旧的“hasLayout”修复：1；

.button2 {
    zoom: 1;
}

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

我不喜欢那样做 hack，但它似乎可以达到你想要的效果。

【讨论】：

这有效，与 text-align:center 一起解决了另一个问题。

【解决方案2】：

这是因为您试图将样式分配给通常不适用的内联元素。例如垂直填充、宽度和边框。尝试给它display:inline-block 或display:block; float:left;，如果您使用display:inline-block，则在IE7 的情况下，查找针对IE 7 的display:inline-block 修复程序，您应该已准备就绪。 jsFiddle：http://fiddle.jshell.net/wUD9q/5/show/light/

仅供参考 - 浮点数与它完全无关。删除外部 div 上的浮动也不能修复它。 jsFiddle 仍然坏了：http://fiddle.jshell.net/wUD9q/1/show/light/

【讨论】：

奇怪的是，移除外部 div 上的浮动并为我修复了它。一定是一些外部因素，在我发布的代码之外。我确信这会奏效，但我使用下面的解决方案来制作按钮 display:block;可能导致其他页面出现问题。

【解决方案3】：

全球只有不到 1% 的人使用 IE7 浏览互联网。继续前进！

来源：http://theie7countdown.com/

【讨论】：

如果他是那 1% 怎么办？统计数据有时对个人来说毫无意义。
如果他对 ie7 感到满意，那么他也应该对使用这种旧且不受支持的浏览器的缺点感到满意。
虽然我完全同意这个说法，但很遗憾这不是一个答案。
2.21% 的用户使用的是普通大众的 IE7。我们即将向我们的企业用户开放我们网站的新版本，其中 IE7 用户的比例要高得多——实际上有足够的 IE6 用户让我们担心这一点。如果 1% 意味着失去或保留一个大客户，那它就变得非常重要。