IE中的CSS問題

我的網站在屏幕右上角包含下拉菜單。該下拉列表顯示正常，但是當我將鼠標懸停在下拉列表中的元素上時，IE會將其渲染爲不正確。不過，Firefox會以我想要的方式顯示它們。該網站是http://www.textsensor.com/test。任何人都可以告訴我是什麼導致在IE中的問題？IE中的CSS問題

這是細節。頂部的每個父母都有一個子女<div>，其中包含<ul>中的子元素。我將它們以固定的<div>容器的寬度內聯顯示，以便將它們中的兩個顯示在一行中。每個子女<li>包含兩個圖像和一個介於兩者之間的錨點。這兩個圖像提供了圓角，而錨點包含一個<span>，其中又包含子菜單項的文本。當鼠標在<span>上移動時，我通過javascript顯示其父節點兄弟圖像，並將其bg圖像設置爲白色。圖像沒有正確對齊，並且<span>標籤在IE上僅從頂部降低了約10px。 jQuery的使用的如下：

$("#jsddm li ul li a span").hover(function(){ 
     $(this).parent().siblings("img").css("visibility", 'visible'); 
     $(this).parent().css("border-bottom", "#a00 5px double"); 
    }, function(){ 
     $(this).parent().siblings("img").css("visibility", 'hidden'); 
     $(this).parent().css("border-bottom", "none"); 
    });

一個菜單項的HTML是：

<li><img src='images/submenuImg1.png' class='leftsubImg'> 
<a href="pricerates.php"><span>Price Rates</span></a> 
<img src='images/submenuImg3.png' class='rightsubImg'> 
</li>

當我將鼠標放置跨度leftsubImg，rightsubImg將visile並且還跨度的BG被設定爲圖像重複在x。引起麻煩的問題是跨度距離頂部約12px，左右兩側圖像下方約5px。

IE輸出是http://i46.tinypic.com/2858bl.gif http://i46.tinypic.com/2858bl.gif

乾杯

阿亞茲阿拉維

來源

2010-05-27 Ayaz Alavi

IE中的CSS問題？不，它不可能！ – Skilldrick 2010-05-27 09:44:30

每當我在IE8中遇到問題時，我只是使用IE7兼容性標籤 - 您會驚訝於擺脫了多少問題。（事實上，我可以解決錯誤，但我很懶） – Flukey 2010-05-27 09:46:24

@Jamie：您的網站很可能會停止在IE10中正確渲染。讓我們希望你已經解決了你的懶惰，然後;-) – 2010-05-27 09:48:44

IE 8和IE 7的問題是使用以下條件註釋

<!--[if IE 8]> 
<style> 
.leftsubImg , .rightsubImg 
{ 
    margin-bottom:-13px; 
} 
</style> 
<![endif]--> 
<!--[if IE 7]> 
<style> 
.leftsubImg , .rightsubImg 
{ 
    vertical-align:middle; 
    margin-bottom:3px; 
} 

</style> 
<![endif]-->

固定它將圖像移動到正確的位置。現在在IE6中我遇到了z-index問題，那就是菜單在胖子圖片前面沒有移動。

來源

2010-05-27 13:02:11

你試圖消除在源li元素之間的空白？

只是一個快速的猜測，這可能是IE空白錯誤...

而且我目前得到的JavaScript錯誤在IE ..

來源

2010-05-27 10:04:35

我試圖刪除空格，但它沒有幫助。現在的問題是，跨度下降約5px，並有約10px的topmargin。看到我附在我的問題中的圖片。 – 2010-05-27 11:47:25

圓角：你這樣做是錯誤的。

從不對純粹的文體內容（例如圓角）使用<img>。它肯定不會向屏幕閱讀器或禁用樣式表的用戶提供有用的信息。改用背景圖片。

另外，.hide()不是您想對圖像執行的操作：這樣做會將它們從文檔流中移除，這意味着跨度元素會移位。改爲使用.css('visibility','hidden')。

事實上，你根本不需要javascript。看看http://www.jsfiddle.net/TeTLw/。該按鈕看起來不太正確，但它應該跨瀏覽器工作。

爲了使按鈕看起來正確的，你需要做your image長：有這樣的：

____________________________________ 
|          \ 
|          | 
|____________________________________/

來源

2010-05-27 10:06:19 Eric

我不認爲使用IMG的圓角等有什麼問題，這將向後兼容舊版瀏覽器。我同意你*不應該這樣做，但是沒有任何錯誤**。 – 2010-05-27 10:30:25

感謝您的建議，但我仍然從包含文本的跨度上15px頂部獲得邊距。儘管圖像的位置是固定的，菜單也很穩定。 – 2010-05-27 10:37:16

我可以爲此加薪嗎？ – Eric 2010-05-27 11:20:41

回答

相關問題