Question

我正在编写一个脚本，这个脚本将填充一个区域，周围散布着肖像和标语。除了在Internet Explorer中，我已经设法将这些元素并排放置。我在理论上使用IE9，它应该可以工作但不会。

我已经尝试了我能想到的一切，但似乎没有任何效果。我希望这里有人比我更了解如何在这方面击败IE。

这里的JSFiddle演示：http://jsfiddle.net/TnUxt/

HTML code：

<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;
}

Answer 1

一种可能的解决方案是将float:left;应用于.circle或.slogan类。这会将文本内容从其上下文中拉出并适当地定位圆圈。

http://jsfiddle.net/TnUxt/1/

Answer 2

如果我增加线高，橙色圆圈会向上移动。然而，找到一个可以提供良好和良好的补救措施。由于您已将＆lt; div＆gt; s放在＆lt; a＆gt; s内，因此跨浏览器结果受到严重阻碍。内联元素中的块元素或内联块元素，太棘手了。

如果你能纠正这个问题，我会很高兴再看看。

文本在IE中推送兄弟元素

2 个答案: