0

見出しとテキストを含むDiv。divにカーソルを合わせると、背景が変化し、divの下部から「トースト」が上がります。div全体は、見出しリンクに基づいてクリック可能であり、cssで実行されます。

問題：IEのすべてのバージョンで、カーソルがdiv内のテキスト上にない場合にのみリンクをクリックできます（フィドルの例でも同じ問題）。FF、Opera、Safariで正しく動作します。

JSFiddle-例

<div class="one-third">
    <div class="inside">
        <h3><a href="/#">Testing</a></h3>
        <p>This some text inside the testing blox blah blah blah blah blah.</p>
        <p>and some more and some more.and some more and some morep>and some more and some moreand some more and some moreand some more and some moreand some more and some moreand some more and some moreand some more and some more.</p>
        <span class="toast">View more stuff</span>
    </div>
</div>

css：

.one-third{
    border:1px solid #d8d8d8;
    margin:35px 9px 0;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background:#ffffff;
    text-align:center;
    position:relative;
    overflow:hidden;
    cursor: pointer;
    padding:25px 0 0 0;
}

.one-third:hover{ 
    background: #eeeeee;
}

.inside{
    height:185px;
}

.inside h3 a, .inside h3 a:hover{ /*entire div is link*/
    font-size: 20px;
    color:#30629a;
    text-decoration:none;
    position:absolute; 
    width:100%;
    height:100%;
    top:13px;
    left: 0;
    z-index: 1;
}

.inside p{
    padding:15px 15px 0 15px;
}


.toast{
    background: rgb(71, 71, 71); /* Fall-back for browsers that don't support rgba */
    background: rgba(0, 0, 0, .7);
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: -30px;
    line-height:30px;
    color: #fff;
    text-shadow:0 1px 1px #111111;
    font-size:14px;
    text-align: center;
    transition: all 0.1s linear 0s; /*no moz, webkit, or o because radius is needed and won't scroll right*/    
    -moz-border-radius: 0 0 6px 6px;
    -webkit-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}

.one-third:hover .toast {
    bottom: 0;
}
4

2 に答える 2

1

別の解決策は追加することです

background:url("datdata:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");

.inside h3 a、.inside h3 a：hover。これは、IEの問題を解決するbase64の透明なgifです。

Gここで見つかった場合： http：//css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/

于 2012-11-28T02:09:19.107 に答える
0

1つの解決策は、h3の場合、「a」を外側に移動することです。IEには、その要素が「p」タグの後ろにあるという問題があります。

<a href="/#"><h3>Testing</h3>
<p>...</p></a>

http://jsfiddle.net/Zp2Rp/14/

于 2012-11-27T06:17:14.467 に答える