Question

请参阅此弹出式菜单：http://www.caseen.com/store.html。它在Firefox和Chrome中看起来都很棒，但在IE9中却看不到！试着看看发生了什么=（。

看起来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>

AND 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;
}

Answer 1

IE9默认为您网站上的怪癖模式，因此您的标记可能有问题，无论是doctype还是一般结构。

看一下这个验证报告：

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

您有许多未公开的标签和其他主要问题。 IE可能会窒息这些并导致怪癖模式。首先，我建议清理你的标记以消除这种可能性。无论如何都应该发生。

Answer 2

您的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>

ie9 / CSS：Flyout菜单在ie9中不起作用，但在Firefox / Chrome中看起来很棒

2 个答案: