我的网页 ( www.icls.ro ) 有一个大问题。它在 Firefox4 中看起来很好，但元素在 Internet Explorer 9 中没有放置在其位置。我认为这是 CSS 兼容性问题。我使用以下 style.css 文件:
*{
margin:0px;
padding:0px;
}
img{border:0px;}
html{
width:100%;
height:100%;
background-image:url(images/bg.gif);
background-position:top left;
background-repeat:repeat-x;
}
body{
width:980px;
margin:0 auto;
padding:25px 0 0 0;
}
.logo{
float:left;
margin:0 21px 0 0
}
#menu{
float:left;
margin:0 0 3px 0;
}
#menu li{
list-style-type:none;
float:left;
}
#menu img{
float:left;
}
.links{
display:block;
line-height:23px;
height:23px;
text-align:right;
padding:0 50px 18px 0
}
.links a{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#000000;
margin:0 13px;
text-decoration:none
}
.block{
background-image:url(images/block_bg.jpg);
background-position:top left;
background-repeat:no-repeat;
width:238px;
height:251px;
float:left;
padding:46px 0 0 24px;
margin:0 21px 0 0;
/ margin:0 18px 0 0
}
.block p{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#0B3556;
display:block;
width:200px;
padding:0 0 20px 0;
}
#content{
padding:25px 0 35px 0;
overflow:hidden;
}
.line{
width:937px;
overflow:hidden;
border-bottom:1px solid #CEC7B9;
margin:0 0 27px 0
}
.sidebar{
width:238px;
float:left;
padding:0 21px 30px 24px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#545353
}
.sidebar h4{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
color:#040404;
line-height:48px;
}
.sidebar p{
padding:0 0 25px 0
}
.list{
background-color:#FAF3E5;
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
.list ul{
padding:23px 0 0 25px;
}
.list li{
list-style-type:none;
}
.list span{
color:#105183;
display:block;
float:left;
width:32px;
}
.list p{
display:block;
float:left;
color:#545353;
width:550px;
padding:0 45px 15px 0
}
.news{
padding:23px 0 0 0;
}
.news p{
padding:0px;
}
.news span{
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#105183;
font-weight:bold;
padding:0 0 12px 0
}
.news a{
color:#105183;
text-decoration:underline;
}
.news a:visited{text-decoration:underline}
.news a:hover{text-decoration:none}
.pad25{
margin:0 0 25px 0;
}
.infoblock{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#545353;
width:272px;
float:left;
padding:0 29px 0 24px;
}
.pic{
padding:18px 0;
}
.infoblock a{
color:#105183;
text-decoration:underline
}
.infoblock a:visited{text-decoration:underline}
.infoblock a:hover{text-decoration:none}
.infoblock p{
padding:0 0 30px 0
}
.border{
border-right:1px solid #E8E5DE
}
#footer{
width:980px;
float:left;
background-color:#FAF3E6;
line-height:60px;
height:60px;
padding:0 0 0 25px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#73706A;
}
#footer a{
text-decoration:none;
color:#73706A;
}
#footer a:visited{text-decoration:none}
#footer a:hover{text-decoration:underline}
#content .inner_copy {border:0;color:#f00;float:left;width:50%!important;margin:-202px 0 0 0;overflow:hidden;line-height:0;padding:0;font-size:12px}
这是如何引起的以及如何修复它？
最佳答案
您的文档类型触发器 Quirks Mode :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
当 IE 处于 Quirks 模式时，它会假装是 IE 5.5。
改成这样，问题就解决了:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
尽管在大多数情况下，您应该只使用 HTML5 文档类型:
<!DOCTYPE html>
向标准模式问好。
关于Internet Explorer 9 中的 CSS 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6259133/