與IE瀏覽器懸停的奇怪的CSS問題

所以我有一個非常惱人的問題，我似乎無法弄清楚。前提是非常簡單的我有一個圖像，並懸停它顯示一些半透明背景的文字。它在Firefox，Safari和Chrome中運行良好。但是，在IE中，它並不是將div彼此堆疊在一起，並且不遵從float屬性。這裏的CSS：與IE瀏覽器懸停的奇怪的CSS問題

.new-product-link { 
    background:#E0E0E0; 
    height:342px; 
} 
.new-product-link .new-container { 
    float:left; 
    width:94px; 
    height:94px; 
    padding:3px; 
    margin:6px 5px; 
    position:relative; 
    left:2px; 
    border:1px solid #BBB; 
} 
.new-product-link .new-container:hover { 
    border:1px solid #777; 
    cursor:pointer; 
} 
.newProduct { 
    float:left; 
    height:100px; 
    width:100px; 
    position:relative; 
    bottom:97px; 
    right:3px; 
    background:#777; 
    opacity:0.75; 
    display:none; 
} 
.newProduct span { 
    position:relative; 
    top:20px; 
    color:#F0F0F0; 
    font:bold 14px Arial; 
} 
.newProduct span span { 
    font:11px Arial; 
}

JS：

<script> 
$(".new-container").hover(
    function() {$(this).children("div").fadeIn(350);}, 
    function() {$(this).children("div").fadeOut(100);} 
); 
</script>

HTML：

<div align="center" class="new-container"> 
    <img src="http://www.example.com/image.png"> 
    <div class="newProduct"> 
     <span class="newProduct-item">Item Number<br /> 
      <span>Click for Additional<br />Information</span> 
     </span> 
    </div> 
</div>

對於工作示例，請參閱HERE。一切似乎都很簡單，並且在其他主流瀏覽器中運行良好，希望有人能看到我的方式錯誤。感謝您的幫助和建議。

來源

2011-12-02 wiliam.orazi

只是一個註釋，那麼：懸停將無法正常的IE瀏覽器，如果你使用它比上一個錨別的東西（標籤工作） – jValdron

@jValdron：IE6的確如此。你在測試哪個版本的IE？ – Kyle

我認爲這只是

你永遠不會讓IE試圖像沒有文檔類型的其他更現代的瀏覽器一樣執行。我建議使用這一個，如果你不使用任何舊的，過時的標記：
<!DOCTYPE html>

來源

2011-12-02 14:02:08 Rob

是的，我忙着試圖完成這件事我從來沒有注意到我沒有聲明文檔類型 - 感謝幫助，其餘的應該很容易。 –

與IE瀏覽器懸停的奇怪的CSS問題

回答

相關問題