Question

我正在使用一个页面，它可以正常使用Firefox，但我无法弄清楚Internet Explorer的问题是什么，因为它在列表中的第一项上方添加了额外的空格。

以下是代码：

<!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>

Answer 1

问题在于 CSS规则：

<!--[if IE]>

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

<![endif]-->

因此，您只有IE 30px top-padding，其他浏览器 0px top-padding 。

Answer 2

您的页面中有条件注释，为所有IE版本添加了填充顶部：

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

IE中的额外空格（垂直列表 - CSS）

2 个答案: