IE 浮动解决方法

【问题标题】：IE float workaroundIE 浮动解决方法
【发布时间】：2013-06-01 14:03:28
【问题描述】：

http://www.ugiinc.com/products/

我是新手，所以请多多包涵。

我在 subpages-text 和 subpages-excerpt 上使用了 float right 并在摘录上使用 clear 以使其位于链接的正下方，在其他浏览器中工作正常，但在 IE 中，摘录位于图像下方，仍然在右侧。这是这样做的理想方式吗？我可以做些什么来为 IE 修复它吗？

.subpages-row {
    border-bottom: 4px solid black; 
    border-top: 4px solid black;
    }
.subpages-cell { 
    width: 800px;
    }   
.subpages-text { 
    float:right; 
    }
.subpages-excerpt {
    clear: both;
    float: right;
    width: 370px;
    }

【问题讨论】：

标签： css internet-explorer css-float

【解决方案1】：

尝试像这样修改您的 CSS（/**/ 添加在任何新的/不同的行上）：

.subpages-text { 
    float:right;
    width: 500px; /**/
    text-align: right; /**/
    }
.subpages-images-image {
    float: left; /**/
    }
.subpages-excerpt {
    clear: none; /**/
    float: right;
    width: 370px;
    }

您遇到的问题是clear: both; 上的.subpages-excerpt。如果你摆脱它，文本会跳回顶部。我们还将图像向左浮动，这样它就不会干扰文本。然后，如果您增加标题的宽度以使摘录永远不会放在顶行，它将弹出标题的正下方。最后，由于我们增加了标题的宽度，所以它需要text-align: right 以便它仍然出现在右侧。

【讨论】：