浮动左侧在 Internet Explorer 8 中不起作用答案

【问题标题】：Float left not working in Internet Explorer 8浮动左侧在 Internet Explorer 8 中不起作用
【发布时间】：2014-07-31 23:02:05
【问题描述】：

在我的网站Family Law Act 我试图让两排水平的图片/个人资料堆叠在一起。顶行是一个城市，底行是另一个城市。顶行正确浮动，但如您所见，底行没有浮动。相反，这些照片是垂直堆叠在一起的。

它在 Chrome 和 Firefox 中运行良好，但在 Internet Explorer 8 中存在这个问题。

有什么想法吗？

CSS

#Vancouver {float:left; display:block; }
.vancouver {float: left; padding-right: 10px;}
#New_York {clear:both; float:left; display:block;  margin-top:20px; }
.newyork {float: left; padding-right: 10px; }

HTML

<div id="Vancouver">
<div class="headVan">Vancouver</div>
<div class="vancouver a">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/1.png" alt ="test" /></li>
<li>Tom JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>

<div class="vancouver b">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li>
<li>Sam JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>

<div class="vancouver c">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li>
<li>Sam JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>

<div class="vancouver d">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li>
<li>Sam JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>

<div class="vancouver e">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/2.png" alt ="test" /></li>
<li>Sam JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>

</div>

<div id="New_York">
<div class"headvic">New York</div>
<div class="newyork a">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/3.png" alt ="test" /></li>
<li>Nat JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>
<div class="newyork b">
<ul>
<li><img src="http://familylawact.ca/wp-content/uploads/2011/11/4.png" alt ="test" /></li>
<li>Jed JErk</li>
<li>firm: </li>
<li>tel: </li>
<li>profile </li>
</ul>
</div>
</div>

【问题讨论】：

这个jsfiddle.net/m2XzL怎么样？

标签： html css internet-explorer cross-browser

【解决方案1】：

当包含的 div 有宽度时，浮动通常效果最好

在你的纽约 div 中尝试给它一个宽度（你的内容区域的宽度——不管它是什么）

#New_York {
    clear: both;
    float: left;
    display: block;
    margin-top: 20 px;
    width: XXXXX px;
}

我也会将此添加到您的温哥华 div 中。

【讨论】：

谢谢，这解决了我在浏览器模式下的问题：IE8 兼容视图和文档模式：IE7 标准

【解决方案2】：

尝试替换这个：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

与：

<meta http-equiv="X-UA-Compatible"  content="IT=edge,chrome=IE8">

<meta charset='utf-8'>

这解决了我在 wordpress 网站中的一个类似问题。也许在列之间添加一个<div style="clear:both"></div>。下一步：尝试使用 ie 开发人员工具栏插件进行调试 - 将为您提供有关问题出处的更多信息。

【讨论】：

我认为您的部分答案丢失了。
SO 的一些错误，已修复显示

【解决方案3】：

根据您的布局，您不需要在包装器（#Vancouver 和 #New_York）上调用 float，只需在内容上。如果是这样，删除这些浮动可以解决您的问题。

你也可以去掉#New_York上的clear。

【讨论】：