2010-11-17 51 views
3

我寫在IE8,FF3.6,GC7做工精細的菜單風格。現在的問題是,我的老闆甚至希望它能夠在IE7上運行。我真的很努力地使它在IE7上工作,但無法獲得相同的外觀。問題與IE7顯示:表菜單

menu.css

a{outline:none;} 

.menu { 
margin:0; 
display:table; 
padding:0; 
white-space:nowrap; 
width:958px; 
text-align:center; 
font-size:12px; 
font-weight:bold; 
font-family: Arial, Helvetica, sans-serif; 
height: 30px; 
background: transparent url("../images/menubg.jpg") repeat-x top left; 
border-bottom:4px solid #92C4E9; 
border-right:2px solid #005D91; 
border-left:2px solid #005D91; 
} 
.menu ul { 
list-style:none; 
margin:0; 
padding:0; 
display:table-row; 
white-space:nowrap; 
} 
.menu ul li{ 
display:table-cell; 
border-right:1px solid #005D91; 
border-left:1px solid #005D91; 
} 
.menu ul a{ 
display:block; 
padding:12px 5px 0 5px; 
text-decoration:none; 
height:26px; 
margin: 0 3px 0 3px;  
color:#ffffff; 
} 
.menu ul a:hover{ 
margin: 0 3px 0 3px;  
background:transparent url("../images/menubgover.jpg") repeat-x top left; 

} 
.menu li ul 
{ 
margin:0px; 
padding:0px; 
display:none; 
position:absolute; 
background-color:#15375f; 
filter: alpha(opacity=85); 
-moz-opacity:0.85; 
-khtml-opacity: 0.85; 
opacity: 0.85; 

} 
.menu li:hover ul 
{ 
margin:0px; 
padding: 15px 15px 0px 20px; 
text-align:left; 
line-height:0px; 
display:block; 
color:#fff; 
} 
.menu li li 
{ 
list-style:none; 
display:list-item; 
border-right:0px; 
border-left:0px; 
padding:0px; 
} 
.menu li li a 
{color:#92C4E9; text-decoration:none; padding:0; margin:0px; font-weight:normal; 
} 
.menu li li a:hover 
{color:#92C4E9; text-decoration:underline; background:none; padding:0; margin:0px; font-weight:normal;} 

.present{margin: 0 3px 0 3px;background:transparent url("../images/menubgover.jpg") repeat-x top left;} 
+1

*旁註:*填充或利潤率爲0值,沒有單位 – Raptor 2013-06-25 11:32:08

回答

7

IE7不支持display:table,所以你必須重建菜單以不同的方式。

+1

爲什麼downvote如果你不說明什麼?你認爲是錯誤的,它不能改善的答案。 – Guffa 2011-09-12 12:12:21

+5

也許是因爲你沒有提供任何解決方案。 – TMS 2012-04-01 21:36:06

0

IE8居然不支持任何表格中顯示的特性只有Firefox和其他一些瀏覽器做

http://www.w3schools.com/css/pr_class_display.asp

我只是想嘗試使用顯示:塊

+0

是的,你是對的,有的時候,它甚至沒有在IE8中工作。我剛剛在網上學習了CSS,只是爲了建立這個菜單。我真的沒有足夠的抓住CSS來獲得所需的外觀。幸運的是我設法通過上面的CSS來解決這個問題。請以我的方式獲取它。非常感謝你。 – Gokul 2010-11-17 14:12:14

+0

最新的HTML的樣子,什麼樣的菜單效果,你想實現 – 2010-11-18 00:02:12

+0

錯誤:'顯示:block'不會表現得像'顯示:table' – Raptor 2013-06-25 11:31:24

1

不幸的是,拒絕IE支持顯示:table等是大多數CSS佈局破解的主要原因。真的很難過,一家公司一直在阻止網站開發進度=(

編輯:替代方案可能是使用display:table來瀏覽所有瀏覽器,使用clearfix作爲IE瀏覽器,你當然可以使用clearfix瀏覽器,但顯示:表等渲染速度更快

-1

我會建議使用display:inline-block

+0

不正確的。 'display:inline-block'在IE7中不受支持。參考:https://developer.mozilla.org/en-US/docs/Web/CSS/display – Raptor 2013-06-25 11:30:42