Html 浮动左在 Internet Explorer 8 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8249315/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Float left not working in Internet Explorer 8
提问by Leahcim
At my site Family Law ActI am trying to get two horizontal rows of pictures/profiles stacked on top of each other. the top row is for one city, the bottom row of profiles is for another city. The top row is floated properly, but the bottom row, as you can see, is not floated. Rather the pics are vertically stacked on top of each other.
在我的网站家庭法法案中，我试图将两排水平的图片/个人资料堆叠在一起。最上面一行是针对一个城市的，最下面一行是针对另一个城市的。顶行正确浮动，但如您所见，底行未浮动。而是将照片垂直堆叠在一起。
It works fine in Chrome and Firefox but in Internet Explorer 8 there's this problem.
它在 Chrome 和 Firefox 中运行良好，但在 Internet Explorer 8 中存在此问题。
Any ideas?
有任何想法吗？
CSS
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
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>
回答by thejudge
Floats generally work best when the containing div has a width
当包含的 div 具有宽度时，浮动通常效果最佳
in your New york div try giving it a width ( the width of your content area - whatever it may be)
在你的纽约 div 中尝试给它一个宽度（你的内容区域的宽度 - 不管它是什么）
#New_York {
clear: both;
float: left;
display: block;
margin-top: 20 px;
width: XXXXX px;
}
I would add this to your Vancouver div too.
我也会将此添加到您的温哥华 div 中。
回答by alonisser
Try replacing this:
尝试替换这个：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
with:
和：
<meta http-equiv="X-UA-Compatible" content="IT=edge,chrome=IE8">
<meta charset='utf-8'>
This solved me a similiar problem in a wordpress site.
Maybe add a <div style="clear:both"></div>between the columns.
Next step: try debugging with ie developer toolbar addin - would give you more information about where the problem comes from.
这解决了我在 wordpress 站点中的一个类似问题。也许<div style="clear:both"></div>在列之间添加一个。下一步：尝试使用 ie 开发人员工具栏插件进行调试 - 将为您提供有关问题出处的更多信息。
回答by ScottS
It appears based on your layout that you do not need the floatcalls on the wrappers (#Vancouverand #New_York), just on the contents. If that is so, deleting those floats solves your issue.
根据您的布局，您不需要float对包装器（#Vancouver和#New_York）的调用，只需要对内容进行调用。如果是这样，删除这些浮动可以解决您的问题。
You can also eliminate the clearon the #New_York.
您也可以消除clear上#New_York。
