1
我正在编写一个脚本，它将在这里和那里散布各种各样的人物肖像和口号。除了在Internet Explorer中，我已经设法将元素并排排列。我在理论上使用IE9，它应该工作，但不是。在IE浏览器中推送兄弟元素的文本
我试过了所有我能想到的，但似乎没有任何工作。我希望这里有人比我更好地了解如何击败IE。
的jsfiddle演示在这里：http://jsfiddle.net/TnUxt/
HTML代码：
<div class='wrapper'>
<ul>
<div class='row'>
<li class='dataLi'>
<a href='' class='fancybox'>
<div class='overlay'>
<div class='circle' style="background:url(http://bit.ly/Z9CY5A) no-repeat;background-size: cover"></div>
</div>
</a>
</li>
<li class='dataLi'>
<a href=''>
<div class='circle slogan'>test</div>
</a>
</li>
<li class='dataLi'>
<a href='' class='fancybox'>
<div class='overlay'>
<div class='circle' style="background:url(http://bit.ly/ULb3ux) no-repeat;background-size: cover"></div>
</div>
</a>
</li>
</div>
<div class='row'>
<li class='dataLi'>
<a href='' class='fancybox'>
<div class='overlay'>
<div class='circle' style="background:url(http://bit.ly/XVpxN5) no-repeat;background-size: cover"></div>
</div>
</a>
</li>
<li class='dataLi'>
<a href=''>
<div class='circle slogan'>test</div>
</a>
</li>
<li class='dataLi'>
<a href='' class='fancybox'>
<div class='overlay'>
<div class='circle' style="background:url(http://bit.ly/15Wl5gM) no-repeat;background-size: cover"></div>
</div>
</a>
</li>
</div>
</ul>
CSS代码：
.wrapper {
width: 700px;
height: 1000px;
margin: 0 auto;
border: 1px solid black;
}
.row {
width: 100%;
height: 200px;
}
.circle {
background: #d9d6d1;
width: 200px;
height: 200px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
opacity:1;
filter:alpha(opacity=100);
vertical-align: top;
display: inline-block;
*zoom: 1;
*display: inline;
}
.circle:hover {
opacity: 0.5;
filter:alpha(opacity=50);
background: #fd761f;
}
.slogan {
background:#fd761f;
color: #fff;
text-align: center;
width: 200px;
height: 200px;
font-size: 16px;
line-height: 200px;
vertical-align: top;
display: inline-block;
*zoom: 1;
*display: inline;
}
.overlay:hover {
background:#fd761f;
width: 200px;
height: 200px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
display: inline-block;
*zoom: 1;
*display: inline;
}