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