个人中心
gpt4 book ai didi

html - css 适用于 Firefox/Chrome 但不适用于 IE

转载 作者：行者123 更新时间：2023-12-04 05:39:28 25 4
gpt4 key购买 nike

我有这个 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>

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

关于html - css 适用于 Firefox/Chrome 但不适用于 IE，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11452189/

25 4 0
文章推荐： list - 我们可以使用 sharepoint 2010 中的功能设置列表的自定义权限吗？
文章推荐： php - Nginx/PHP : Nginx is not returning a 304 response when sending Etag header
文章推荐： opengl - OpenTK 矩阵变换
文章推荐： visual-studio - 每当测试断言时 VSTest 磁盘驱动器错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com