1

我正在编写一个脚本，该脚本将用散布在各处的肖像和标语圈来填充一个区域。除了在 Internet Explorer 中，我已经设法将元素整齐地并排放置。我使用的是 IE9，所以理论上它应该可以工作，但不能。

我已经尝试了我能想到的一切，但似乎没有任何效果。我希望这里的某个人在如何击败 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;
}
4

2 回答 2

0

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

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

于 2013-03-18T19:19:00.813 回答
0

如果我增加行高，橙色圆圈会向上移动。但是，由于您将 <div>s 放在 <a>s 中，这一事实严重阻碍了寻找能够提供良好和跨浏览器结果的补救措施。块元素或者inline-block元素在inline元素里面，太棘手了。

如果您能纠正这一点，我会很高兴再看一看。

于 2013-03-18T20:28:17.707 回答