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

Safari浏览器出现问题。我已经连续6小时寻找修复，所以如果我的解释不好，我会感到困惑。所以问题是：我在缩略图上添加了悬停效果，它可以在所有浏览器中使用，但拇指未正确放置在Safari和IE中。我曾尝试使用：浏览器，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和Firefox作品的CSS：

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

来源

2013-01-14 Jan Thorbjørnsen

摆脱CSS的

DIV＃缩图{ 文本对齐：中心; }

并且还会删除您的图片的margin-left：-115px，并且您将在两个browswers中都可以使用某些内容。

来源

2013-01-14 05:45:39 RyanFishman

谢谢你这么多:)我在CSS的时间太长了瞪大了眼睛。和平终于。 –

你的页面代码是一团糟，没有对齐。 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

来源

2013-01-14 06:11:48 jikey

感谢您的清理:)我知道代码是一团糟。 –

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

回答

相关问题