我有这个 HTML 和 css，在 chrome/firefox 中工作正常，但在 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 ................ */
它与我一起工作，但似乎缺少 DOCTYPE，因此您的浏览器午餐 Quirks 模式，因此添加
<!DOCTYPE html>
Before <html>标签以防止您的 IE 浏览器切换到 Quirks 模式。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
