如何修复IE上的边距空间?这是代码。
如果您在现代浏览器上打开此文件,则所有工作都很好并且底部会有20px的空间。但在 IE 没什么空间。让我知道解决这个问题的诀窍。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Margin Auto</title>
<style type="text/css">
* { padding:0; margin:0; }
body { background:#333;}
#wrapper { width:800px; margin:20px auto 20px auto; padding:10px; background:#fff;}
p { line-height:18px; padding-bottom:20px;}
</style>
</head>
<body>
<div id="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue nisl a nisi ullamcorper lacinia. Vestibulum pulvinar porttitor laoreet. Maecenas feugiat tellus posuere dolor porttitor dignissim. Pellentesque vitae ligula nec velit egestas euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis hendrerit ligula at lobortis. Maecenas vel erat nisl. Duis eleifend ipsum et urna consectetur venenatis pharetra lectus sollicitudin. Phasellus adipiscing scelerisque lorem, et tristique nunc sagittis ut. Maecenas dui tellus, varius vel ultrices sit amet, fermentum quis nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean eget cursus eros. Aliquam erat volutpat. In odio risus, pellentesque a tempus in, condimentum et leo. Maecenas porttitor nisi eget justo vehicula accumsan. Sed tristique elementum fringilla. Nam nibh velit, aliquam ac tincidunt vitae, lacinia sodales elit. Pellentesque vitae lacus vel est feugiat vulputate non id velit. Nunc fringilla ullamcorper nunc, vel scelerisque lacus rutrum eget. Aenean at nulla at massa aliquet laoreet quis tincidunt dui.</p>
<p>Aliquam erat volutpat. Etiam aliquam lacus sit amet ipsum bibendum blandit. Vestibulum vitae purus a massa fermentum viverra. Sed eu magna massa, eu euismod dolor. Maecenas urna libero, ullamcorper a aliquam vitae, convallis nec mauris. Sed at vulputate libero. Donec bibendum mollis dapibus. Curabitur sed justo odio, ac mattis nunc. Vestibulum malesuada tellus at sapien euismod posuere et eget tortor. In hac habitasse platea dictumst. Nullam sit amet mi nulla, in vulputate est. Morbi ligula justo, tristique vitae consectetur ac, egestas non risus. In hac habitasse platea dictumst. Pellentesque odio mauris, euismod at ultrices blandit, vehicula cursus risus. Nullam eu metus at felis cursus luctus. Nulla facilisi. Nullam nec nisi quis tortor scelerisque luctus. Morbi feugiat, est id porttitor tincidunt, nunc sem euismod tellus, in pharetra velit tellus vel turpis.</p>
<p>Vestibulum risus sem, volutpat ut fringilla rhoncus, consequat sit amet tellus. Suspendisse vel elit ac urna eleifend tincidunt sit amet nec lacus. Proin non leo at est lobortis imperdiet quis sed justo. Fusce consequat sagittis arcu et iaculis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam aliquet nulla ultrices augue bibendum ut dapibus orci facilisis. Ut dapibus fermentum risus, viverra consequat tortor porttitor at. Aliquam erat volutpat. Cras congue euismod molestie. Suspendisse faucibus, quam in pellentesque rhoncus, nisi nulla molestie dolor, et laoreet libero dui sed enim. Quisque nec erat turpis. Fusce porta adipiscing lorem eget tincidunt. Integer lobortis arcu tempor odio imperdiet ornare. Aenean adipiscing, diam sed egestas cursus, orci dui elementum risus, at ullamcorper sem ante sit amet arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent volutpat lectus posuere est egestas et hendrerit ligula pulvinar.</p>
<p>Quisque eget eros quis elit rhoncus tincidunt. Vivamus sit amet nisl nulla, et iaculis sem. Integer luctus commodo quam ornare laoreet. Sed ultrices dolor eu tellus malesuada hendrerit. Integer tempus lacus in nisi laoreet pulvinar. Sed non diam elit, sit amet adipiscing mi. Proin sollicitudin ligula vitae massa sollicitudin porttitor. Aenean ut dui quis augue ornare ultrices nec bibendum felis. Nam ligula dolor, malesuada dictum tristique scelerisque, pretium eget justo. Ut lacinia rhoncus lorem, at gravida elit rhoncus malesuada. Phasellus auctor suscipit augue, vel elementum nisi feugiat ac. Nunc non leo et neque viverra faucibus ac sed quam. Suspendisse potenti. Nulla non lorem mi, vulputate commodo turpis. Donec aliquam aliquet justo, non pharetra urna interdum eget. Donec erat sapien, lobortis ac semper sed, feugiat a velit. Vivamus consectetur urna sed justo bibendum lobortis. Pellentesque eu orci enim, eget viverra dolor. Vestibulum porta, urna et mollis sodales, augue diam eleifend velit, nec congue mi odio nec magna. Nam tristique dignissim erat, in vehicula dui mollis non.</p>
<p>Integer orci quam, luctus eget accumsan eget, ornare ut libero. Vestibulum eget sem velit. Fusce lacinia tristique velit id sagittis. Proin sed nunc id magna posuere aliquet id vitae leo. Cras nisl ligula, venenatis mattis lobortis eget, euismod quis orci. Proin auctor luctus eleifend. Mauris ut enim at risus hendrerit consectetur ut eget dui. Morbi aliquam commodo elit, ut sagittis urna porta vitae. In semper scelerisque tortor vel rhoncus. Aliquam placerat ornare dui, id pulvinar mauris lobortis at. Nullam aliquet posuere leo, non volutpat mauris pretium vel. Nulla ornare nulla id urna adipiscing consectetur. Mauris quis nisi tellus. Quisque ac felis odio. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed congue nisl a nisi ullamcorper lacinia. Vestibulum pulvinar porttitor laoreet. Maecenas feugiat tellus posuere dolor porttitor dignissim. Pellentesque vitae ligula nec velit egestas euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc iaculis hendrerit ligula at lobortis. Maecenas vel erat nisl. Duis eleifend ipsum et urna consectetur venenatis pharetra lectus sollicitudin. Phasellus adipiscing scelerisque lorem, et tristique nunc sagittis ut. Maecenas dui tellus, varius vel ultrices sit amet, fermentum quis nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean eget cursus eros. Aliquam erat volutpat. In odio risus, pellentesque a tempus in, condimentum et leo. Maecenas porttitor nisi eget justo vehicula accumsan. Sed tristique elementum fringilla. Nam nibh velit, aliquam ac tincidunt vitae, lacinia sodales elit. Pellentesque vitae lacus vel est feugiat vulputate non id velit. Nunc fringilla ullamcorper nunc, vel scelerisque lacus rutrum eget. Aenean at nulla at massa aliquet laoreet quis tincidunt dui.</p>
<p>Aliquam erat volutpat. Etiam aliquam lacus sit amet ipsum bibendum blandit. Vestibulum vitae purus a massa fermentum viverra. Sed eu magna massa, eu euismod dolor. Maecenas urna libero, ullamcorper a aliquam vitae, convallis nec mauris. Sed at vulputate libero. Donec bibendum mollis dapibus. Curabitur sed justo odio, ac mattis nunc. Vestibulum malesuada tellus at sapien euismod posuere et eget tortor. In hac habitasse platea dictumst. Nullam sit amet mi nulla, in vulputate est. Morbi ligula justo, tristique vitae consectetur ac, egestas non risus. In hac habitasse platea dictumst. Pellentesque odio mauris, euismod at ultrices blandit, vehicula cursus risus. Nullam eu metus at felis cursus luctus. Nulla facilisi. Nullam nec nisi quis tortor scelerisque luctus. Morbi feugiat, est id porttitor tincidunt, nunc sem euismod tellus, in pharetra velit tellus vel turpis.</p>
<p>Vestibulum risus sem, volutpat ut fringilla rhoncus, consequat sit amet tellus. Suspendisse vel elit ac urna eleifend tincidunt sit amet nec lacus. Proin non leo at est lobortis imperdiet quis sed justo. Fusce consequat sagittis arcu et iaculis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam aliquet nulla ultrices augue bibendum ut dapibus orci facilisis. Ut dapibus fermentum risus, viverra consequat tortor porttitor at. Aliquam erat volutpat. Cras congue euismod molestie. Suspendisse faucibus, quam in pellentesque rhoncus, nisi nulla molestie dolor, et laoreet libero dui sed enim. Quisque nec erat turpis. Fusce porta adipiscing lorem eget tincidunt. Integer lobortis arcu tempor odio imperdiet ornare. Aenean adipiscing, diam sed egestas cursus, orci dui elementum risus, at ullamcorper sem ante sit amet arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent volutpat lectus posuere est egestas et hendrerit ligula pulvinar.</p>
<p>Quisque eget eros quis elit rhoncus tincidunt. Vivamus sit amet nisl nulla, et iaculis sem. Integer luctus commodo quam ornare laoreet. Sed ultrices dolor eu tellus malesuada hendrerit. Integer tempus lacus in nisi laoreet pulvinar. Sed non diam elit, sit amet adipiscing mi. Proin sollicitudin ligula vitae massa sollicitudin porttitor. Aenean ut dui quis augue ornare ultrices nec bibendum felis. Nam ligula dolor, malesuada dictum tristique scelerisque, pretium eget justo. Ut lacinia rhoncus lorem, at gravida elit rhoncus malesuada. Phasellus auctor suscipit augue, vel elementum nisi feugiat ac. Nunc non leo et neque viverra faucibus ac sed quam. Suspendisse potenti. Nulla non lorem mi, vulputate commodo turpis. Donec aliquam aliquet justo, non pharetra urna interdum eget. Donec erat sapien, lobortis ac semper sed, feugiat a velit. Vivamus consectetur urna sed justo bibendum lobortis. Pellentesque eu orci enim, eget viverra dolor. Vestibulum porta, urna et mollis sodales, augue diam eleifend velit, nec congue mi odio nec magna. Nam tristique dignissim erat, in vehicula dui mollis non.</p>
<p>Integer orci quam, luctus eget accumsan eget, ornare ut libero. Vestibulum eget sem velit. Fusce lacinia tristique velit id sagittis. Proin sed nunc id magna posuere aliquet id vitae leo. Cras nisl ligula, venenatis mattis lobortis eget, euismod quis orci. Proin auctor luctus eleifend. Mauris ut enim at risus hendrerit consectetur ut eget dui. Morbi aliquam commodo elit, ut sagittis urna porta vitae. In semper scelerisque tortor vel rhoncus. Aliquam placerat ornare dui, id pulvinar mauris lobortis at. Nullam aliquet posuere leo, non volutpat mauris pretium vel. Nulla ornare nulla id urna adipiscing consectetur. Mauris quis nisi tellus. Quisque ac felis odio. </p>
</div>
</body>
</html>
答案 0 :(得分:1)
IE中的中心块级元素可能很棘手。如果您想要站点的主要部分(示例中的“包装器”),那么您可以执行以下操作:
body {
text-align: center;
}
#margin {
text-align: left;
}
这将导致IE将页面上的所有内容都集中到#margin,包括#margin,然后将所有内容左对齐#margin,这与仅仅集中#margin基本相同。
答案 1 :(得分:1)
将padding-bottom添加到body元素并将#wrapper的margin底部设置为0px;
答案 2 :(得分:0)
我在IE 6和7中没有看到任何问题。你在使用IE?
如果使用边距而不是填充,问题是否仍然存在?