在IE中額外的空白（垂直列表 - CSS）

我在一個頁面上工作，它工作得很好，但我無法弄清楚Internet Explorer的問題是什麼，因爲它增加了額外的空白列表中的第一項。在IE中額外的空白（垂直列表 - CSS）

下面的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
<!-- 
@charset "utf-8"; 

body { 
    font: 100% Tahoma, Geneva, sans-serif; 
    background: #333; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    color: #000000; 
} 
.twoColHybRtHdr #tops { 
    width: 80%; 
    margin: 0 auto; 
    color: #666; 
    text-align:left; 
    padding: 10px 0 10px 0; 
    font-size:12px; 
    direction:rtl; 
} 
.twoColHybRtHdr #tops a { 
     color: #CCC; 
     text-decoration:none; 
} 
.twoColHybRtHdr #container { 
    width: 80%; 
    margin: 0 auto; 
    border: 0; 
    text-align: right; 
    background-color: #FFFFFF; 
} 
.twoColHybRtHdr #header { 
    background: #999999; 
    height:150px; 
    padding: 0; 
    background-image:url(../images/banner.jpg); 
    background-position:right; 
    background-repeat:no-repeat; 
    border-bottom: 1px solid #000; 
} 
.twoColHybRtHdr #header h1 { 
    margin: 0; 
    padding: 15px 0 0 20px; 
    text-align:left; 
    direction:ltr; 
    font-size:8pt; 
    font-weight:normal; 
    color:#DBDBDB; 
} 



.twoColHybRtHdr #sidebar1 { 
    display: block; 
    float: right; 
    width: 190px; 
    background: #EBEBEB; 
    padding: 0px; 
    direction:rtl; 
    text-align:right; 

    background-image:url(../images/fixer.jpg); 
    background-position:top; 
    background-repeat:no-repeat; 
} 
.twoColHybRtHdr #sidebar1 h3, .twoColHybRtHdr #sidebar1 p { 
    margin-left: 10px; 
    margin-right: 10px; 
} 

.twoColHybRtHdr #mainContent { 
    margin: 0 13em 0 10px; 
    direction:rtl; 
    text-align:right; 
} 

.twoColHybRtHdr #mainContent h1 { 
    font: 100% "Times New Roman", Times, serif; 
    font-size:22pt; 
    font-weight:normal; 
    color:#900; 
} 

.twoColHybRtHdr #mainContent h2 { 
    font: 100% "Times New Roman", Times, serif; 
    font-size:14pt; 
    font-weight:normal; 
} 

.twoColHybRtHdr #footer { 
    padding: 0 10px; 
    background:#DDDDDD; 
    direction: ltr; 
    text-align: left; 
    font-size:12px; 
    color:#999; 
} 
.twoColHybRtHdr #footer p { 
    margin: 0; 
    padding: 10px 0; 
} 


.fltrt { 
    float: right; 
    margin-left: 8px; 
} 
.fltlft { 
    float: left; 
    margin-right: 8px; 
} 
.clearfloat { 
    clear:both; 
     height: 1px; 
     overflow: hidden; 
} 

/* Sidebar Menu */ 
#blueblock{ 
width: 190px; 
padding: 0; 
margin: 0; 
font-family: Tahoma, Geneva, sans-serif; 
font-size: 90%; 
background-color: #dddddd; 
color: #333; 
direction:rtl; 
text-align:right; 
} 

* html #blueblock{ /*IE 6 only */ 
width: 190px; /*Box model bug: 180px minus all left and right paddings for #blueblock */ 

} 

#blueblock ul{ 
list-style: none; 
margin: 0; 
padding: 0; 
border: none; 
} 

#blueblock li { 
border-bottom: 1px solid #333; 
margin: 0; 
padding: 0; 
} 

#blueblock li a{ 
display: block; 
padding: 10px 5px 10px 8px; 
border-left: 5px solid #333; 
border-right: 10px solid #900; 
background-color: #999; 
color: #fff; 
text-decoration: none; 
width: 100%; 
} 

html>body #blueblock li a{ /*Non IE6 width*/ 
width: auto; 
} 

#blueblock li a:hover{ 
border-left: 10px solid #900; 
border-right: 10px solid #333; 
background-color: #666; 
color: #fff; 
} 
/* Sidebar Menu -- END */ 
--> 
</style> 

<!--[if IE]> 
<style type="text/css"> 
.twoColHybRtHdr #sidebar1 { padding-top: 30px; } 
.twoColHybRtHdr #mainContent { zoom: 1; padding-top: 15px; } 
</style> 
<![endif]--> 
</head> 

<body class="twoColHybRtHdr"> 
<div id=tops>Sample Text</div> 
<div id="container"> 
    <div id="header"> 
    <h1>Sample Text #2</h1> 
    <!-- end #header --> 
    </div> 
    <div id="sidebar1"> 
    <div id="blueblock"> 
     <ul> 
     <li><a style="background-color: #666;" href="#">rtl #1</a></li> 
     <li><a style="background-color: #666;" href="#">rtl #2</a></li> 
     <li><a style="background-color: #666;" href="#">rtl #3</a></li> 
     </ul> 
    </div> <!-- end #sidebar1 --></div> 
    <div id="mainContent"> 
    <?php require_once($goto)?> 
    </div> 
    <br class="clearfloat" /> 
    <div id="footer"> 
    <p>Sample Text #3</p> 
    <!-- end #footer --></div> 
<!-- end #container --></div> 
</body> 
</html>

來源

2011-12-24 BehnUm

你在你的頁面條件註釋，加入paddin頂了所有的IE版本：

<!--[if IE]> 
<style type="text/css"> 
.twoColHybRtHdr #sidebar1 { padding-top: 30px; } 
.twoColHybRtHdr #mainContent { zoom: 1; padding-top: 15px; } 
</style> 
<![endif]-->

來源

2011-12-24 14:34:35 ptriek

Thx ever so bunch – BehnUm 2011-12-24 14:44:07

的問題是在這CSS規則 ：

<!--[if IE]> 

    <style type="text/css"> 
    .twoColHybRtHdr #sidebar1 { padding-top: 30px; } 
    .twoColHybRtHdr #mainContent { zoom: 1; padding-top: 15px; } 
    </style> 

<![endif]-->

所以，你有30px頂部填充只在IE和0px頂部填充在其他瀏覽器。

來源

2011-12-24 14:36:19 makiaveli88

是的，就是這樣。謝謝 ;） – BehnUm 2011-12-24 14:44:21

在IE中額外的空白（垂直列表 - CSS）

回答

相關問題