Question

我遇到了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

Answer 1

摆脱CSS

div #tignails { 文本对齐：中心; }

还可以摆脱你的保证金左边：-115px为你的图像，你将有一些在两个浏览器中都有效。

Answer 2

你的页面代码很乱，没有对齐。 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>

and demo is here

浏览器，safari / IE负边距不起作用

2 个答案: