0

我对 safari 有疑问。我已经连续搜索了 6 个小时来解决问题，如果我的解释不好，请原谅我。所以问题是：我在缩略图上添加了悬停效果，它适用于所有浏览器，但在 safari 和 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 浏览器，也意味着 chrome。

我目前使用的 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

摆脱 CSS

div#thumbnails { 文本对齐：中心；}

并且还摆脱了你的 margin-left: -115px 的图像，你将拥有在两个浏览器中都可以使用的东西。

于 2013-01-14T05:45:39.397 回答
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 回答