0

如果我使用 css 中固定的位置，我在 ie7 中的 margin-top 有问题。

我在网上搜索解决方案并尝试了很多但没有任何效果。

测试 div 的 margin-top 不起作用。

任何帮助，将不胜感激。

这是我的html

<!DOCTYPE html>
<html lang="en">
<head>
<title> test </title>
<link rel="stylesheet" href="test.css">

<!--[if IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" media="screen"/><![endif]-->



</head>

<body>
<div id="fixed1">
<div id="fixed"></div>
</div>


<div id="test">
ayhd iaudiuawdyiaudyw
</div>
<div class="clear">
</div>

</body>
</html>

这是我的CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, 
q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, 
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin : 0;
padding : 0;
border : 0;
outline : 0;
font-weight : inherit;
font-style : inherit;
font-size : 100%;
font-family : inherit;
vertical-align : baseline;}
:focus {
outline : 0;
}
body {
line-height : 1;
color : black;
background : white;
}
ol, ul {
list-style : none;
}
table {
border-collapse : separate;
border-spacing : 0;
}
caption, th, td {
text-align : left;
font-weight : normal;
}


#fixed1 {
position : fixed;
width : 100%;
top : 0;
background-color : red;
}
#fixed {
margin : 0 auto;
height : 20px;
background-color : blue;
width : 980px;
}
#test {
margin : 0 auto;
margin-top : 20px;
margin-bottom : 20px;
height : 2000px;
width : 980px;
background-color : red;
}

这是ie7.css

#fixed1{
left:0px;
}

#test{
margin-top:30px;
background-color:grey;
}

谢谢你，基肖尔。

4

1 回答 1

0

检查这个小提琴。我已经在小提琴中添加了您的代码。它也适用于 ie 7 http://jsfiddle.net/S9AVa/1/

问题是因为以 2 种方式指定边距，边距：0 自动；又是margin-top 和margin-bottom。IE 考虑第一次调用。

它应该像

#test {
margin : 20px auto 20px auto;
float:left;
 height : 2000px;
width : 1040px;
background-color : red;
}

我已经添加left:0;到fixed1课堂上。

更新了演示http://jsfiddle.net/S9AVa/2/

于 2012-08-29T11:00:56.113 回答