即7不適用於CSS內聯塊或修復

Question

我知道這已被問過一百萬次了，但我所嘗試過的一切都沒有解決問題。 我正在做一個漂亮的<select>類型的東西。 我基於常見的CSS下拉導航菜單（使用嵌套的<ul>和<li> s，只需進行一些調整。其中一個調整是我需要它來顯示內聯（沒有浮動它，因為它經過同一行中的任何其他元素，並且我不想漂浮其周圍的所有其他元素。）我已經在瀏覽器中運行良好，除了7（可能更低，但我不需要低於ie7的任何東西。這是代碼： http ： //jsfiddle.net/ralokz/hjDVS/2/

如果你在任何非ie7瀏覽器中查看它，它看起來像我想要它：

但如果你在ie7中看它，它看起來像這樣：

我看到的內聯塊修復的一個站點是： http ： //blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/ 。 這適用於ie8，但不幸的是ie7仍然看起來不正確。

有沒有其他方法來修復ie7的內聯塊？ 或者，是否有CSS替代方法以確保第二級<li>始終與第一級<li>垂直對齊？ 謝謝！

Answer 1

IE6和IE7確實支持inline-block ，但它們有一個主要的錯誤：它們只支持具有inline默認顯示樣式的元素。

因此span {display:inline-block;}將起作用，但div {display:inline-block;}不起作用。

如果這對你來說是一個問題，那就有好消息：它們有另一個錯誤，它使inline工作的方式在某些情況下應該是inline-block ，所以你可以簡單地使用display:inline; 。

如果你打算這樣做，你需要小心確保只有IE6和IE7這樣做，因為其他瀏覽器需要一個正確的inline-block; 樣式。 為實現此目的，可能需要一些特定於瀏覽器的黑客攻擊或條件注釋。

Answer 2

添加： position:relative; 到div.dropdown ul li ，擺脫div.dropdown ul li ul的邊緣並設置它的top:25px ， left:-1px; ， width:100% ; 最后，將div.dropdown ul li ul li為margin:0; 刪除左右邊距，並設置width:100% ...

我可能錯過了一些東西，但這是一個有效的例子： http ： //jsfiddle.net/hjDVS/7/

我認為你真正的問題是絕對定位的ul

Answer 3

對於每個帶display:inline-block規則display:inline-block ，在IE 7樣式表中放置zoom:1; display:inline; zoom:1; display:inline; 這適用於所有元素，並以相同的方式工作。