[英]In IE 7-9 containers starts to overlap/shrink after 2nd block
首先,图像消失了,我通过在标题中放置<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
进行<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
,这很好!
现在,图像显示出来但在第二个块[IMG]之后重叠。 我发现很难解决这个问题,因为无法安装IE 7-9,我依靠netrenderer :(
标头是<!DOCTYPE html>
尝试了其他但没有任何更改。
容器是这样的:
<div class="post-container-odd" >
<h2><a href="http://site.com/destinos/africa-ilhas/">África & Ilhas</a></h2>
<div class="thumbnail"><a href="http://site.com/destinos/africa-ilhas" title="Ilhas Maldivas"><img src="http://site.com/wp-content/uploads/2012/07/maldivas-22-380x200.jpg" title="" alt=""/></a></div>
</div>
<div class="post-container-even" >
<h2><a href="http://site.com/destinos/america-do-norte-caribe/">América do Norte & Caribe</a></h2>
<div class="thumbnail"><a href="http://site.com/destinos/america-do-norte-caribe" title="Chicago"><img src="http://site.com/wp-content/uploads/2012/07/chicago-29-380x200.jpg" title="" alt=""/></a></div>
</div>
CSS就是这样:
.post-container-even{float:left;margin:0 0 20px 0;display:table}
.post-container-odd {float:left; margin: 0 5px 20px 0}
为此添加了一个ie.css
(解决了一些问题,但仍然重叠):
.post-container-odd { float:left; margin: 0 5px 30px 0; display:inline;}
.post-container-even{ float:left; margin:0 0 30px 0; display:inline; clear: left}
.post-container-even img, .post-container-odd img { height: 200px ; width: 380px ; display:block; clear: both}
.post-container-even .thumbnail, .post-container-odd .thumbnail { height: 200px ; width: 380px ; }
也许每两个iten都可以放置一个<div style="clear:both"></div>
但这很la脚?
谢谢你的帮助
注意:
如果没有ie.css
说明: 图片
现在,通过ie.css
: 图片
谢谢,我通过放置以下内容解决了:
zoom: 1; *display:inline; in image containers.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.