2

私はこの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 ................  */
4

1 に答える 1

3

それは私と一緒に働いていますが、DOCTYPEが欠落しているようですので、ブラウザはクァークズモードを昼食しますので、追加してください

<!DOCTYPE html>

タグの前<html>に、IEブラウザがQuirksモードに切り替わらないようにします。

于 2012-07-12T12:54:30.603 に答える