0
私はページ上で作業していますが、Firefoxでもうまく動作しますが、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>
Thxこれまで束ねた – BehnUm