浮动左不起作用的Internet Explorer 8

在我的网站Family Law Act我想获得两个水平行的图片/配置文件堆叠在对方的顶部。第一行是一个城市，最后一行是另一个城市。最上面的一行是正确的，但是你可以看到，最下面一行没有浮动。相反，图片是垂直堆叠在一起的。浮动左不起作用的Internet Explorer 8

它在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>

来源

2011-11-23 Leahcim

这个http://jsfiddle.net/m2XzL/呢？ –

花车一般工作时最好包含div在纽约有一个宽度

DIV尝试给它的宽度（宽度您内容区域 - 不管它是什么）

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

我会把这个加到你的Vancouver div上。

来源

2011-11-23 21:43:22 thejudge

谢谢，它的工作 – Leahcim

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

如果这不起作用，请检查您是否使用nth-child。 –

尝试更换此：

<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开发工具栏插件进行调试 - 会给你更多关于问题来自何处的信息。

来源

2011-11-23 21:44:12 alonisser

我认为你的答案的一部分缺失。 – Leahcim

与SO的一些错误，修复显示 – alonisser

它基于您的布局显示，您不需要在包装上调用float调用（#Vancouver和#New_York），就在内容上。如果是这样，删除这些浮动解决您的问题。

您还可以删除#New_York上的clear。

来源

2011-11-23 21:53:09 ScottS

浮动左不起作用的Internet Explorer 8

回答

相关问题