0

サファリに問題があります。修正を求めて 6 時間ぶっ通しで検索したので、説明が間違っていたらすみません。つまり、サムネイルにホバー効果を追加しました。すべてのブラウザーで機能しますが、サファリと IE では親指が正しく配置されません。私は使用しようとしました：

    @media screen and (-webkit-min-device-pixel-ratio:0){
    img.a {
position: absolute;
top: -500;
z-index: 10;
}

   img.b {
position: absolute;
top: -500;
}
    }

ただし、これは webkit ブラウザー、つまりクロムでも機能します。

私が現在使用しているcssは、chromeとfirefoxで動作します:

    img.a {
position: absolute;
top: -500;
margin-left: -115px;
    z-index: 10;
width: 230px;
height: 120px;
border: none;
}

   img.b {
position: absolute;
top: -500;
margin-left: -115px;
width: 230px;
height: 120px;
border: none;
}

誰かが解決策を持っていれば、それは本当に私の一日を救うでしょう:)

検査が必要な場合は、次のサイトをご覧ください: www.janthorb.com

4

2 に答える 2

0

ページコードは混乱していて、配置されていません。HTMLの構造は合理的ではなく、CSSも科学ではありません。私はあなたの構造を書き直しました、あなたは参照することができます。

.demo{ width:820px;margin:0 auto;}
.list{ margin-right:-20px; zoom:1;}
.list li{ float:left; width:230px; height:135px; margin:0 36px 25px 0; overflow:hidden; zoom:1;}
.link{ position:relative;width:228px; height:120px; display:block;border:thin dashed #1b1b1b; overflow:hidden;}
.link img{ position:absolute;top:0;left:0; }
.link .gray{ z-index:11;}
.link .hover{ z-index:10;}

<ul class="list">
    <li>
        <a class="link" href="#">
            <img class="gray" src="http://www.janthorb.com/thumb1_bw.jpg" alt="">
            <img class="hover" src="http://www.janthorb.com/thumb1.jpg" alt="">
        </a>
    </li>
    <li>
        <a class="link" href="#">
            <img class="gray" src="http://www.janthorb.com/thumb1_bw.jpg" alt="">
            <img class="hover" src="http://www.janthorb.com/thumb1.jpg" alt="">
        </a>
    </li>
</ul>

デモはこちら

于 2013-01-14T06:11:48.847 に答える
0

CSSを取り除く

div#thumbnails { text-align:center; }

また、画像の margin-left: -115px を削除すると、両方のブラウザで機能するものになります。

于 2013-01-14T05:45:39.397 に答える