css适用于Firefox/Chrome浏览器，但不适用于IE浏览器

我有这个HTML和CSS，并在Chrome/Firefox中正常工作，但IE浏览器页眉布局结束，子菜单不显示悬停，请帮忙：css适用于Firefox/Chrome浏览器，但不适用于IE浏览器

<html> 
    <head> 
    <title>title</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="viewport" content="width=1024" /> 
    <meta name="description" content="" /> 
    <meta name="robots" content="all" /> 
    <link href="images/favicon.ico" type="image/x-icon" rel="icon" /><link href="images/favicon.ico" type="image/x-icon" rel="shortcut icon" />  
    <link rel="stylesheet" type="text/css" href="css/style.css" /> 

    </head> 

    <body> 
    <div id="page"> 
     <div id="header"> 
      <div class="content"> 
       <div id="logo"> 
        <a href="/"><img src="images/logo.gif" title="" alt="" /></a> 
       </div> 

       <div class='cssmenu'> 
        <ul> 
         <li class='active'><a href='index.html'><span>Home</span></a></li> 
         <li><a href='#'><span>Products</span></a> 
          <ul> 
          <li><a href='#'><span>Product 1</span></a></li> 
          <li><a href='#'><span>Product 2</span></a></li> 
          </ul> 
         </li> 
         <li><a href='#'><span>About</span></a></li> 
         <li><a href='#'><span>Contact</span></a></li> 
          <li><a href='#'><span>About</span></a></li> 
         <li><a href='#'><span>Contact</span></a></li> 
         <li><a href='#'><span>Contact</span></a></li> 
        </ul> 
       </div> 

      </div> 
     </div> 

     <div id="sub_header"> 
      <div class="content"> 
       <div class="content_l"> 
        <span id="sub_head_title">Welcome</span> 
       </div> 
       <div class="content_r"> 
        <span> 
        Call 
        <strong>000000000000</strong> 
        </span> 
       </div> 
      </div> 
     </div> 
     </div> 
    </body> 

</html>

和CSS是：

* html .clearfix, 
* html #main_panel { 
    height: 1%; 
    overflow: hidden; 
} 

/* float clearing for IE7 */ 
*+html .clearfix { 
    min-height: 1%; 
} 

/* float clearing for everyone else */ 
.clearfix:after { 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden; 
    font-size: 0; 
} 

html, body { 
background: #e5e5e5; 
font-size: 13px; 
} 

#header { 
    background: transparent url(../images/header-bg.jpg) repeat-x; height: 60px; 
} 

#header .content, #sub_header .content { 
overflow: visible; position: relative; 
} 

#header .content, #sub_header .content { 
    overflow: visible; 
    position: relative; 
} 

div.content { 
    margin: 0 auto; 
    overflow: hidden; 
    width: 980px; 
} 

#logo { 
position: absolute; 
} 

#logo { margin: 8px 0 8px 0; } 
#logo a { border: none; } 

#page #sub_header { 
    margin-bottom: 0; 
} 

#sub_header { 
    line-height: 49px; 
} 

#sub_header { 
    background: none repeat scroll 0 0 #EEEEEE; 
    border-bottom: 1px solid #DDDDDD; 
    margin-bottom: 30px; 
    overflow: hidden; 
} 

.content_l { 
    float: left; 
    overflow: hidden; 
    width: 50%; 
} 

.content_r { 
    float: right; 
    text-align: right; 
    width: 50%; 
} 

#sub_header span { 
    color: #2D2D2D; 
    line-height: 49px; 
} 

#sub_head_title { 
    font: bold 21px Arial; 
    text-shadow: 2px 2px 2px #FFFFFF; 
} 

a.header_button_children span { 
    background: url("../images/header-children-off.gif") no-repeat scroll right -51px transparent; 
    padding-right: 25px; 
} 
a.header_button span { 
    height: 19px; 
    padding: 8px 10px 3px; 
} 

/*css Menu ................*/ 

.cssmenu{ 
    border:none; 
    border:0px; 
    margin:0; 
    padding:0px; 
    font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif; 
    font-size:14px; 
    font-weight:bold; 
    position: absolute; 
    right: 0; 
    } 
.cssmenu ul{ 
    background:#333333; 
    height:35px; 
    list-style:none; 
    /*margin:0 0 0 287px;*/ 
    margin:0; 
    padding:0; 
    } 
.cssmenu li{ 
    float:left; 
    padding:0px; 
    } 
.cssmenu li a{ 
    background:#333333 url('../images/seperator.gif') bottom right no-repeat; 
    color:#cccccc; 
    display:block; 
    font-weight:normal; 
    line-height:35px; 
    margin:0px; 
    padding:0px 25px; 
    text-align:center; 
    text-decoration:none; 
    } 
.cssmenu li a:hover, .cssmenu ul li:hover a{ 
    background: #2580a2 url('../images/hover.gif') bottom center no-repeat; 
    color:#FFFFFF; 
    text-decoration:none; 
    } 
.cssmenu li ul{ 
    background:#333333; 
    display:none; 
    height:auto; 
    padding:0px; 
    margin:0px; 
    border:0px; 
    position:absolute; 
    width:225px; 
    z-index:200; 
    /*top:1em; 
    /*left:0;*/ 
    } 
.cssmenu li:hover ul{ 
    display:block; 

    } 
.cssmenu li li { 
    background:url('../images/sub_sep.gif') bottom left no-repeat; 
    display:block; 
    float:none; 
    margin:0px; 
    padding:0px; 
    width:225px; 
    } 
.cssmenu li:hover li a{ 
    background:none; 

    } 
.cssmenu li ul a{ 
    display:block; 
    height:35px; 
    font-size:12px; 
    font-style:normal; 
    margin:0px; 
    padding:0px 10px 0px 15px; 
    text-align:left; 
    } 
.cssmenu li ul a:hover, .cssmenu li ul li:hover a{ 
    background:#2580a2 url('../images/hover_sub.gif') center left no-repeat; 
    border:0px; 
    color:#ffffff; 
    text-decoration:none; 
    } 
.cssmenu p{ 
    clear:left; 
    } 

/*End of css Menu ................ */

来源

2012-07-12 Zaki

及其与我一起工作，但目前看来，DOCTYPE是缺少让你的浏览器的午餐怪癖模式，所以加

<!DOCTYPE html>

之前<html>标记，以防止您的IE浏览器切换到怪癖模式。

来源

2012-07-12 12:54:30

你是天才。非常感谢:) – Zaki 2012-07-12 13:00:06

这不是一个HTML5页面，那么XHTML Transitional docType会不会更多？ <！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Transitional // EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> – Greg 2012-08-28 18:24:47

@Greg I不要认为它是一个大问题，对我而言，我喜欢在大多数情况下使用它。 – 2012-08-29 06:56:39

css适用于Firefox/Chrome浏览器，但不适用于IE浏览器

回答

相关问题