台灣最大程式設計社群網站
線上人數
1211
 
會員總數:246274
討論主題:189809
歡迎您免費加入會員
討論區列表 >> CSS/HTML5/Bootstarp >> CSS 選單 在Google Chrome及IE8顯示不一樣
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
CSS 選單 在Google Chrome及IE8顯示不一樣
價值 : 10 QP  點閱數:1403 回應數:1
樓主

joyend
初學者
10 48
1674 46
發送站內信

在網路上找到一個CSS選單範例,
但發現它在 Google Chrome及IE8顯示不一樣
在網路上找到說要這樣改設 display:inline-block; *display:inline; *zoom:1;
但我怎麼調校在ie8還是垂直的不是水平的...



menu.css
* {
margin: 0;
padding: 0;
}

body {
font: 300 14px "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
background: #f5f5f5;
}

ul {
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
white-space: nowrap; /* 避免文字換行 */
}
ul li {
position: relative; /* 使子選單依照母選單的座標顯示 */
}
/* 設定母選單的連結樣式 */
ul li a {
text-decoration: none;
color: #777;
padding: 10px 20px;
display: block;
background: url(detail.png) bottom right no-repeat;
}
/* 當母選單下沒有子選單時,也就是說只有一個連結時,隱藏detail.png */
ul li a:only-child {
background: none;
}
ul li:hover {
background: #777;
}
ul li:hover > a {
color: #fff;
}
ul li:hover > ul {
display: block; /* 滑鼠滑入母選單後,顯示子選單 */
}
nav > ul > li {
display: inline-block; /* 使一級選單排成一橫列 */
}

/* 二級選單顯示於一級選單的正下方 */
ul ul {
position: absolute;
top: 100%;
list-style: none;
background: #fff;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
display: none;
}
/* 三級選單則顯示於二級選單的右方 */
ul ul ul {
position: absolute;
left: 100%;
top: 0;
}

footer {
color: #999;
font-size: 12px;
margin: 10px;
text-align: right;
}
footer a {
color: #666;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}

本篇文章發表於2014-03-18 19:48
1樓
最有價值解答

holmes
檢舉此回應
在 StackOverflow 可以解決你這問題 ,

How can I get an ordered list to display as a horizontal nav bar in IE8 and below

其原因在於 <nav> 標籤屬於 html5 標籤 , IE8並無法辨識 ,
本篇文章回覆於2014-03-30 22:50
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.