使用display時無法使用IE CSS邊框：無

在Internet Explorer中（我已經在所有v6 - v9中測試過），當您將鼠標懸停在文本上時，子菜單上的邊框首先不會顯示。第二次你懸停它會顯示。它在Firefox和Chrome中運行良好 - 即它始終顯示邊框。我已將示例頁面放在my site上。使用display時無法使用IE CSS邊框：無

IE（懸停）：

FF /鉻（懸停）：

沒有什麼花哨這裏，一些CSS，的onmouseover /的onmouseout JavaScript設置style.display = block/none。我已經按照answer到a similar question的一些想法。

我已經將其剝離到最低限度，試圖找到問題，但仍然沒有運氣。

子菜單ul元素的display：none設置在它上面。看起來，IE瀏覽器在繪製邊框之前不會畫出邊框，直到它具有display：block set，並且在使用Javascript顯示元素時不會繪製邊框。

<html> 
<head> 

    <title></title> 
    <style type="text/css"> 
    ul, li      {padding:0; margin:0; border:0;} 
    ul#hover_menu_list, 
    ul#hover_menu_list ul  {list-style-type:none;} 
    ul#hover_menu_list li  {float:left;position:relative;display:inline;} 
    ul#hover_menu_list li ul {border:1px solid #000;display:none;position:absolute;left:0px;top:20px;width:170px;} 
    ul#hover_menu_list li ul li {display:block; clear:left; float:left;width:140px;} 
    </style> 
</head> 
<body> 
    <ul id="hover_menu_list" onmouseout="document.getElementById('menu1').style.display='none';" onmouseover="document.getElementById('menu1').style.display='block';"> 
     <li> 
      Menu 
      <ul id="menu1"> 
       <li>Submenu1</li> 
       <li>Submenu2</li> 
      </ul> 
     </li> 
    </ul> 
</body> 
</html>

更新：問題確實是文檔類型問題。添加一個過渡或嚴格的doctype解決了這個問題。鏈接頁面已經修復。

來源

2011-12-28 icc97

這似乎很好地工作在IE6-IE9在我的測試看到這裏的小提琴：http://jsfiddle.net/fordlover49/FpCEW/ 我會建議您檢查您的文檔類型，以確保它是W3C標準的文檔類型。 – PriorityMark 2011-12-28 16:11:38

它確實在jsfiddle中工作 - 但我懷疑他們正在做一些事情來解決它。如果你看一下IE中的示例頁面http://ianchanning.com/ie-border-bug/，你應該會看到這個bug。沒有設置DOCTYPE。 – icc97 2011-12-28 16:16:51

我不認爲jsfiddle會「修復」你的代碼。這是點... – 2011-12-28 16:18:34

正如在評論中提到的，它看起來像你缺少一個文檔類型。

老但糖果：

http://www.alistapart.com/articles/doctype/

來源

2011-12-28 16:13:56 Mathletics

謝謝你，但它似乎不像添加文檔幫助 – icc97 2011-12-28 16:30:26

@ icc97 - 在我提到的評論中，它在本地工作，但我的本地副本有一個文檔類型。刪除文檔類型會使其失敗，就像在線文件一樣...沒有文檔類型。 Mathletics是正確的，也許它由於緩存而不適合你，你需要重新刷新。 – Rob 2011-12-28 16:45:27

@ icc97 Rob是對的;您的網頁尚未顯示文檔類型。檢查來源！ – Mathletics 2011-12-28 16:51:39

正如我張貼在評論原來的問題，那你肯定你的鏈接頁面上的例子並沒有在所有上市的doctype在代碼中。我建議添加一個文檔類型，它應該改正你的問題。

我創建你的例子在這裏的jsfiddle和測試了IE6-IE9，它似乎很好地工作：http://jsfiddle.net/fordlover49/FpCEW

，包括他們所有的頁面的一個有效的doctype，它似乎做工精細。

也就是說，你可以在CSS中使用僞:hover項目，但是:hover不會在舊版本的IE一致地工作，所以這可能不是一個選項，無需添加一些額外的代碼，以支持添加它（也許modernizer支持這一點）。

來源

2011-12-28 17:18:27 PriorityMark

使用display時無法使用IE CSS邊框：無

回答

相關問題