瀏覽器，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負邊距不起作用

回答

相關問題