2012-03-28 24 views
0

请参阅此弹出式菜单:http://www.caseen.com/store.html。它在Firefox和Chrome浏览器中看起来都很棒,但在IE9中却没有!试图看看发生了什么=(。ie9/CSS:弹出式菜单在ie9中不起作用,但在Firefox/Chrome中看起来很棒

它看起来像ie9正在完成忽略样式表,但在错误检查和点击ie9直接模式,它显示然而非常丑陋的巨大讨厌的白色边界周围的链接!

请看看我的代码:

<div class="flyout"> 
          <ul> 
          <!--START: CATEGORIES--> 
          <!--START: CATEGORY_FORMAT--> 
          <li><a href="view_category.asp?cat=CATID">&nbsp;CATEGORY</a> 
          <!--END: CATEGORY_FORMAT--> 
           <ul><!--START: SUB_CATEGORY_FORMAT--> 
            <li><a href="view_category.asp?cat=CATID">&nbsp;CATEGORY</a></li> 
          <!--END: SUB_CATEGORY_FORMAT--></ul> 
          <!--END: CATEGORIES--> 
          </li> 
          </ul> 
          </div> 

和CSS

.flyout { 
width: 130px; 
height: auto; 
position:relative; 
margin: -10 0; 
padding: 0; 
z-index:10000; 
} 

.flyout ul li a { 
display:block; 
text-decoration:none; 
color: #fff; 
width: 130px; 
border: solid; 
border-color: #000; 
border-width: 0 0 0 5px; 
text-align:left; 
font-size:12px; 
line-height: 25px; 
} 

.flyout ul { 
padding:0px; 
list-style-type: none; 
} 
.flyout ul li { 
float:left; 
margin-right:1px; 
position:relative; 
} 
.flyout ul li ul { 
display: none; 
} 

.flyout ul li:hover a { 
border: solid; 
border-color: #fff; 
border-width: 0 2 0 5px; 
color: #60dfe5; 
} 

.flyout ul li:hover ul { 
display:block; position:absolute; top:0; 
left:130px; 
width:10px; 
} 
.flyout ul li:hover ul li a.hide { 
background:#000; 
color:#fff; 
} 

.flyout ul li:hover ul li:hover a.hide {width:180px;} 
.flyout ul li:hover ul li ul {display: none;} 
.flyout ul li:hover ul li a { 
display:block; 
background:#000; 
color:#60dfe5; 
width:200px; 
} 
.flyout ul li:hover ul li a:hover { 
background:#000; 
color:#fff; 
} 

回答

2

IE9被默认为怪癖模式在您的网站,这样有可能事端g与您的标记错误,无论是文档类型还是一般结构。

看看这一审定报告:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.caseen.com%2Fstore.html&charset=%28detect+automatically%29&doctype=Inline&group=0

你有一些未关闭的标签和其他重大问题。 IE可能会窒息这些并导致怪癖模式。首先,我建议您清理标记以消除这种可能性。它应该真的发生。

+0

的CMS与老式模板提供的...我会看到我能做些什么感谢。仍然看起来像IE9恨恶盘旋和类似的东西=( – Brandon 2012-03-28 22:05:57

+0

谢谢!看起来像帮助! – Brandon 2012-03-30 18:20:12

+0

伟大的。很高兴它的帮助。 – 2012-03-30 18:29:05

1

你的DOCTYPE声明是错误的,它应该是:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

虽然我建议HTML5s DOCTYPE:

<!DOCTYPE html> 
相关问题