框架布局慎用元素

作者：样吧　来源：样吧　发布时间：2008-12-21 16:33:00　

标签：框架,布局,浮动,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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS的包含问题</title><style type="text/css">body {width:950px;height:auto;margin:0px auto;font:Arial, Helvetica, sans-serif;font-size:12px;background-color:#111825;}div, ul, li {margin:0px 0px;padding:0px 0px;}img {border:0px;}.clear {clear:both;}#head {width:950px;height:auto;float:left;}#head ul {width:950px;height:auto;float:left;}#head li {list-style:none;float:left;}.content {width:950px;height:auto;float:left;}.content ul {width:950px;height:auto;float:left;}.content li {list-style:none;float:left;}</style></head><body><div id="head"> <ul> <li><img src="https://img.aspxhome.com/file/UploadPic/200812/21/cssbook-99.jpg" width="496" height="104" /></li> <li><img src="https://img.aspxhome.com/file/UploadPic/200812/21/cssbook-99.jpg" width="454" height="104" /></li> </ul> <div class="clear"></div></div><div class="content"> <ul> <li><img src="https://img.aspxhome.com/file/UploadPic/200812/21/cssbook-99.jpg" width="496" height="138" /></li> </ul></div></body></html>

如果拨云去雾，敏锐的人会发现这不是一个简单的技巧问题。通过在不同浏览器中测试，一般人都会发现它也不是一个浏览器的Bug问题，好像是一种普遍规律。先看看效果：

<!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=gb2312" /><title>CSS的包含问题</title><style type="text/css">.bg1 { background:blue;}.bg2 { background:red;}.bg3 { background:green;}img {border:none;height:120px;}*{margin:0;padding:0;list-style-type:none;}.left {float:left;}.box {height:100px;width:120px;background:white;}</style></head><body><div class="bg1"><img src="https://img.aspxhome.com/file/UploadPic/200812/21/cssbook-99.jpg" /></div><p class="bg2"><img src="https://img.aspxhome.com/file/UploadPic/200812/21/cssbook-99.jpg" /></p><li class="bg3"><img src="https://img.aspxhome.com/file/UploadPic/200812/21/cssbook-99.jpg" /></li><div class="bg1 left"><img src="https://img.aspxhome.com/file/UploadPic/200812/21/cssbook-99.jpg" /></div><p class="bg2 left"><img src="https://img.aspxhome.com/file/UploadPic/200812/21/cssbook-99.jpg" /></p><li class="bg3 left"><img src="https://img.aspxhome.com/file/UploadPic/200812/21/cssbook-99.jpg" /></li></body></html>

这里，我选用了三种比较典型的元素（列表、段落和div元素）进行对比试验，并分别在流动和浮动环境中测试，发现不管在哪种浏览器中，列表项（li元素）包含框都会多出一道空隙（在IE6、IE7和FF3下测试），在IE中甚至左侧也多出一道空隙。莫名其妙？

这是不是特殊情况呢？我在《CSS商业网站布局之道》一书中曾经结论说：浮动元素会自动收缩大小只到包含内部的子元素。看来，这个结论需要斟酌了，汗~~~。至少在列表项元素li中是如此。

为了进一步研究这个个案，我又尝试把图像替换为div盒子。先看看效果：

2 下一页

投稿

框架布局慎用元素

猜你喜欢