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

line-height を上げると、オレンジ色の円が上に移動します。ただし、<div> を <a> 内に配置したという事実によって、クロスブラウザーで良好な結果が得られる解決策を見つけることは非常に困難です。インライン要素内のブロック要素またはインラインブロック要素、これはトリッキーすぎます。

修正していただければ、さらに詳しくお調べいたします。

于 2013-03-18T20:28:17.707 に答える
0

float:left;考えられる解決策の 1 つは、.circleまたは.sloganクラスに a を適用することです。これにより、テキスト コンテンツがコンテキストから取り出され、円が適切に配置されます。

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

于 2013-03-18T19:19:00.813 に答える