CSS下拉菜單在IE9及更低版本中不起作用
[英]CSS dropdown menu doesn't work in IE9 and lower
問題描述
有人可以幫忙嗎？ 我一直在閱讀有關IE中下拉菜單的不同問題的清單，它們完全不同。 所以我沒有我的依據。
我試圖刪除所有子選擇器和rgba值，並且基本上剝離了盡可能多的CSS3。
我在嘗試獲取CSS下拉菜單以在IE9及以下版本中工作時遇到了麻煩。
Chrome，Firefox和IE 10+均可正確顯示此菜單。 這是一個簡單的，懸停並顯示的子菜單。 在IE9及更低版本上，下拉列表只是不出現。
我已經讀過關於刪除-filter和-ms-filter以及z-index和所有其他內容的信息，我的CSS都沒有任何功能。
更新的CSS：
nav {width:100%;margin:0 auto;text-transform:uppercase;position:relative;}
#toggleMenu {display:none;font-size:40px;line-height:40px;}
ul.mainmenu { margin: 0; padding: 0; position:relative;}
ul.mainmenu .small {font-size:9pt;}
ul.mainmenu ul { left: -9999em; position: absolute; width:200px; background: #222; margin: 0; padding: 0; top: 40px;}
ul.mainmenu li.item-173 ul {width:310px;}
ul.mainmenu li.item-118 {text-transform:none;}
ul.mainmenu ul ul { background: #333; }
ul.mainmenu li { display: inline-block; vertical-align: middle; position: relative; }
ul.mainmenu li a, ul.mainmenu li span.nav-header { display: inline-block; vertical-align: middle; padding: 8px 6px; width:100px; color: #ddd;font-size:10pt; font-weight:normal; line-height:18pt;}
ul.mainmenu ul.nav-child li a {width:200px;}
ul.mainmenu ul.nav-child li a.vehicles {width:300px;}
ul.mainmenu li span.nav-header {cursor:default;}
ul.mainmenu li a:hover,
ul.mainmenu li:hover a,
ul.mainmenu li:hover span { background: #222; }
ul.mainmenu li:hover ul, ul.mainmenu li.focus ul { top: 40px; left: 0;}
ul.mainmenu li ul li:hover ul { top: 40px; left: 300px; }
ul.mainmenu ul li { display: block; padding: 0; }
ul.mainmenu ul li a { display: block; padding: 10px 15px; color:#999; }
ul.mainmenu ul li a.vehicles {text-align:left; padding:20px 15px;}
ul.mainmenu ul li a.vehicles img {float:left;margin-right:10px;}
ul.mainmenu ul li a.vehicles .image-title-description {text- transform:none;display:block;color:#666;}
ul.mainmenu ul li a:hover,
ul.mainmenu ul li:hover a .image-title-description { background: #333; color:#fff; text- decoration: none; }
ul.mainmenu ul ul li a:hover { background: #ccc; }
更新：
我已經將HTML5Shiv行添加到頭部以嘗試使其適用於IE，但盡管IE8中的布局稍有更改，但它並未使下拉菜單起作用。
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"></script>
<![endif]-->
更新：
我真的不明白這一點，因為“似乎什么也沒有”。 不管我做什么，IE9都沒有區別。 我已經完成了http://alistapart.com/article/hybrid此處提到的所有內容，而IE9顯示的內容沒有什么不同。 菜單的頂層看起來不錯，但是下拉菜單只是不顯示。
我想我已經明白IE8及以下版本不會在任何不是標簽的內容上呈現任何:hover a 。 這是絕對的100％確定性嗎？
1 個解決方案
解決方案1
0 2014-09-24 14:43:08
IE9默認使用文檔模式ie8。
嘗試在<head>添加： <meta http-equiv="X-UA-Compatible" content="IE=9"/> ，並確保使用<!DOCTYPE HTML>
這主要與在非元素上使用：hover有關。
由於這主要是古怪的瀏覽器資料，所以這個答案主要只是推測。 由於古怪的瀏覽器資料通常沒有明顯的答案。
為什么下拉菜單在IE9中不起作用？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.