IE對齊黑客
[英]IE alignment hacks
問題描述
我是html / css的新手，也不知道如何破解IE。 問題是，菜單欄在Chrome和FF中工作正常，但是在IE中查看時，情況一團糟。 以及下拉子項目未正確對齊。 它應放在“ About Us菜單下。
請在IE中查看此鏈接
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; }
4 個解決方案
解決方案1
0 2013-08-13 05:01:31
您可以使用以下方式創建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/
解決方案2
0 2013-08-13 05:07:15
另一種方法是使用Modernizr庫為不兼容的屬性設置其他CSS類。
解決方案3
0 2013-08-13 05:30:29
在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一起正常運行。 還要刪除所有內聯樣式，並將其保留在樣式表中。
看看此URL，了解有關CSS黑客的信息： http : //www.webdevout.net/css-hacks
解決方案4
0 2013-08-13 05:30:45
您使用position：absolute進行下拉。 嘗試對父級<li>使用position：relative
#navbar{float:left/right}
用於導航haslayout
IE6和7有兼容W3C的黑客嗎？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.