2009-05-20 22 views
2

IE上の余白スペースを修正するにはどうすればよいですか?ここにコード。CSSマージン自動

このファイルを最新のブラウザで開くと、すべてうまく動作し、下部に20ピクセルのスペースがあります。しかし、のIEスペース。このことを解決するためのトリックを教えてください。 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> 

Screenshot - Image link

答えて

1

body要素にpadding-bottomを追加し、#wrapperの余白の底を0pxに設定します。

+0

あなたはスーパーマンです!今働いて..ありがとうredwolves – wow

+0

私は体にmargin-bottomを追加し、ラッパーの底を0に設定して素晴らしい作業をしました。 – wow

1

トリッキーすることができます。サイト(あなたの例では「ラッパー」)の主要部分を中心にしたい場合は、次の操作を実行できます。

body { 
    text-align: center; 
} 

#margin { 
    text-align: left; 
} 

これは、IEが#margin含めへと、最大ページ上のすべてのものを中心に発生します#marginの中にすべてのものを左揃えにします。これは、#marginを中心に置くことと本質的に同じです。

+0

ありがとうdack ..働いていない:) – wow

0

IE6,7では何の問題もありません。どのIEを使用していますか?

パディングの代わりにマージンを使用すると問題は残りますか?

+0

私はもう一度試してみました:)底面の余白のないスペースはありません – wow