Question

我是html / css的新手，不知道如何破解IE。问题是，菜单栏在Chrome和FF中工作正常，但在IE中查看时，它是一团糟。以及下拉子项没有正确对齐。它应放在About Us菜单下方。

请在IE中查看此link

HTML：

<div class="centered" style="top:3px; overflow:normal;"><br /> 

<table style="width:100%; border-spacing:0; margin:0 auto;">
    <tr>
        <td align="left" valign="top">
            <a href="aboutus1.php" target="content"><img src="images/cti-logo.png" alt="logo" align="left" /></a>
        </td>
        <td id="cssmenu" style="position:relative; margin-top:21px; float:right; margin-bottom:-3px; margin-right:-1px;">
            <ul id="navbar">
                <li><a href="welcome.php"><img  src="images/home.jpg" onmouseover="this.src='images/hover-home.jpg'" onmouseout="this.src='images/home.jpg'"/></a></li>
                <li><a href="aboutus1.php" class="menu" target="content"><img id="id_About" onclick="over('about')" src="images/aboutus.jpg" onmouseover="this.src='images/hover-aboutus.jpg'" onmouseout="if(me2=='about'){}else{this.src='images/aboutus.jpg'}" /></a> 
                    <ul>
                        <li class="x" style="left:-20px;"><a href="aboutus1.php" onclick="over('about')" id="id_About" target="content">ABOUT CTI</a></li>
                        <li class="x" style="left:-20px;"><a href="aboutus2.php" onclick="over('about')" id="id_About" target="content">OUR CLIENTS</a></li>
                        <li style="left:-20px;"><a href="aboutus3.php" onclick="over('about')" id="id_About" target="content">MISSION / VISION </a></li>
                    </ul>
                </li>
                <li><a target="content" href="partners.php"><img onclick="over('partners')" id="id_Partners" src="images/partners.jpg" onmouseover="this.src='images/hover-partners.jpg'" onmouseout="if(me2=='partners'){}else{this.src='images/partners.jpg'}" /></a></li>
                <li><a href="products1_1.php" target="content"><img onclick="over('products')" id="id_Products" src="images/products.jpg"  onmouseover="this.src='images/hover-products.jpg'" onmouseout=" if(me2=='products'){}else{this.src='images/products.jpg'}" /></a></li>
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-iecss.css" />
<![endif]-->

<script type="text/javascript" rel="javascript" src="jquery-1.10.2.min.js"></script>

<script>
function over(me){
me2=me;
if(me=='about'){
$('#id_About').attr('src','images/hover-aboutus.jpg');}else{$('#id_About').attr('src','images/aboutus.jpg');}

if(me=='partners') {
$('#id_Partners').attr('src','images/hover-partners.jpg');}else{$('#id_Partners').attr('src','images/partners.jpg');}

if(me=='products'){
$('#id_Products').attr('src','images/hover-products.jpg');}else{$('#id_Products').attr('src','images/products.jpg');}

if(me=='contactus'){
$('#id_Contactus').attr('src','images/hover-contactus.jpg');}else{$('#id_Contactus').attr('src','images/contactus.jpg');}
}
$( document ).ready(function() {
 me2='about'; 
$('#id_About').attr('src','images/hover-aboutus.jpg');
});

</script> 

</head>
<body>
<div class="centered" style="top:3px; overflow:normal;"><br /> 

<table style="width:100%; border-spacing:0; margin:0 auto;">
    <tr>
        <td align="left" valign="top">
            <a href="aboutus1.php" target="content"><img src="images/cti-logo.png" alt="logo" align="left" /></a>
        </td>
        <td id="cssmenu" style="position:relative; margin-top:21px; float:right; margin-bottom:-3px; margin-right:-1px;">
            <ul id="navbar">
                <li><a href="welcome.php"><img  src="images/home.jpg" onmouseover="this.src='images/hover-home.jpg'" onmouseout="this.src='images/home.jpg'"/></a></li>
                <li><a href="aboutus1.php" class="menu" target="content"><img id="id_About" onclick="over('about')" src="images/aboutus.jpg" onmouseover="this.src='images/hover-aboutus.jpg'" onmouseout="if(me2=='about'){}else{this.src='images/aboutus.jpg'}" /></a> 
                    <ul>
                        <li class="x" style="left:-20px;"><a href="aboutus1.php" onclick="over('about')" id="id_About" target="content">ABOUT CTI</a></li>
                        <li class="x" style="left:-20px;"><a href="aboutus2.php" onclick="over('about')" id="id_About" target="content">OUR CLIENTS</a></li>
                        <li style="left:-20px;"><a href="aboutus3.php" onclick="over('about')" id="id_About" target="content">MISSION / VISION </a></li>
                    </ul>
                </li>
                <li><a target="content" href="partners.php"><img onclick="over('partners')" id="id_Partners" src="images/partners.jpg" onmouseover="this.src='images/hover-partners.jpg'" onmouseout="if(me2=='partners'){}else{this.src='images/partners.jpg'}" /></a></li>
                <li><a href="products1_1.php" target="content"><img onclick="over('products')" id="id_Products" src="images/products.jpg"  onmouseover="this.src='images/hover-products.jpg'" onmouseout=" if(me2=='products'){}else{this.src='images/products.jpg'}" /></a></li>
                <li><a href="contactus.php" target="content"><img id="id_Contactus" onclick="over('contactus')" src="images/contactus.jpg"  onmouseover="this.src='images/hover-contactus.jpg'" onmouseout=" if(me2=='contactus'){}else{this.src='images/contactus.jpg'}" class="contactus" /></a></li>
            </ul>
        </td>
    </tr>
    <tr>
        <td colspan="2" class="bar"></td>
    </tr>
</table>
</div>

CSS：

* {
    font-family: verdana; 
    color:#514f4d;
}

html { overflow-y:scroll; }

img { border:0; }

body {
    margin:0;
    padding:0;
    text-align:center;
}
.centered {
    width:830px;
    border:0px;
    margin:0 auto;

}

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.blue { border:1px solid #00b1ef; }
.container {
    border-collapse: collapse;
    position: relative;
    min-height: 90%;
    height: auto !important;
    height: 90%;
    margin: 0;
    width: 100%;
}

#left-panel, #right-panel {
        border-collapse: collapse;
        display:inline-block;
        width:30em;
        height:100%;
        margin:0px;
        min-width:100px;
        background:white;
        overflow:hidden;
}
.header {
    margin: 0 auto;
    width:100%;
    height: auto;
    border-collapse: collapse;
}
.b, .back-more:hover {
    color:#00b1ef;
    font-face:verdana;
}
.footer, .push  {
    width:100%;
    height: 40px;
    clear: both;
    margin: 0 auto 0;
}

p.copyright {
    font-weight: bold;
    text-align: center;
    line-height:11px;
}
p { color:#514f4d;}

.a {
    text-align: left;
    font-family: verdana;
    font-size: 11pt;
    text-decoration: none; 
    color : #000000;
} 

#cssmenu {
    list-style:none;
    border:none;

}
#cssmenu ul {
    list-style: none;
    margin:inherit:
}

.box {
border:1px solid #cccccc;
width:272px;
height:290px;
padding-bottom:0.5em;
overflow:hidden; 

    -moz-box-shadow 3px 5px 4px rgba(235, 235, 235, 1);
    -webkit-box-shadow: 3px 5px 4px rgba(235, 235, 235, 1);
    box-shadow: 3px 5px 4px rgba(235, 235, 235, 1);


    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=10, Color='#060606')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=10, Color='#060606');

}
.x { line-height:1.5em; }

.bar {
background: url('images/heading-top.jpg') repeat-x; 
height:20px;
position:relative; 
z-index:1;
margin-top:95px;
}

<!--Navigation-->

#navbar {
    margin: 0;
    padding: 0;
}
#navbar li {
    list-style: none;
float:left;
}
#navbar li a {
    display: block;
    background-color:#03beff;
    text-decoration: none; 
font-size:0.62em;
text-align:center;
}
#navbar li ul {
    display: none; 
    width:5.3em; /**Width to help Opera out **/
}
/**hover state**/
#navbar li:hover ul {
    display: block;
    position: absolute;
    margin-top:-2px;
padding:0;
z-index:99999;}

#navbar li:hover li {
    float: none; 
}
#navbar li:hover li a {
    /**background-color: #2177c0;**/
    /**border-bottom: 1px solid #fff;**/
    color: #fff; }
#navbar li li a:hover {
    background-color: #2177c0; }

Answer 1

您可以使用以下方式创建特定于IE浏览器的css：

仅限IE：

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->

仅限IE 7：

<!--[if IE 7]>
    <link href="IE-7-SPECIFIC.css" rel="stylesheet" type="text/css">
<![endif]-->

了解更多信息http://viralpatel.net/blogs/how-to-create-ie-specific-css-stylesheet/

Answer 2

替代方法是使用Modernizr库为非兼容属性设置其他css类。

Modernizr Web Site

Answer 3

在HTML中进行以下更改：

<table cellspacing="0" cellpadding="0" style="width:100%; border-spacing:0; margin:0 auto;">
    <tbody><tr>
        **<td width="22%" valign="top" align="left">**
            <a href="aboutus1.php" target="content"><img align="left" src="images/cti-logo.png" alt="logo"></a>
        </td>
        **<td width="88%" id="cssmenu" style="vertical-align: bottom; position: relative;">**
            **<ul style="margin:0px; float: right" id="navbar">**
                <li>  ....

上述更改将在所有浏览器中与ie7一起正常工作。同时删除所有内联样式并将其保留在样式表中。

有关css hacks的信息，请查看此网址：http://www.webdevout.net/css-hacks

Answer 4

您使用position：absolute作为下拉列表。尝试使用position：relative for parent＆lt; li>和

#navbar{float:left/right}

用于导航haslayout

IE对齐黑客

4 个答案: