位置：首页>> 网络编程>> 网页设计>> 框架布局慎用元素（2）

框架布局慎用元素（2）

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

标签：框架,布局,浮动,css

此时，分别在不同浏览器中测试，结果迥异，特别在IE下还存在很多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;border:solid 2px #000;}</style></head><body><div class="bg1"><div class="box">盒子1</div></div><p class="bg2"><div class="box">盒子2</div></p><li class="bg3"><div class="box">盒子3</div></li><div class="bg1 left"><div class="box">盒子4</div></div><p class="bg2 left"><div class="box">盒子5</div></p><li class="bg3 left"><div class="box">盒子6</div></li></body></html>

于是，我把盒子设置为浮动显示，然后在不同浏览器中测试，则对比结果更是惨不忍睹，你看看：

<!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;border:solid 2px #000;float:left;}</style></head><body><div class="bg1"><div class="box"></div></div><p class="bg2"><div class="box"></div></p><li class="bg3"><div class="box"></div></li><div class="bg1 left"><div class="box"></div></div><p class="bg2 left"><div class="box"></div></p><li class="bg3 left"><div class="box"></div></li></body></html>

算了，不再去整理这个乱七八糟的问题，想起来头都大了。总之，感觉CSS布局总会出现各种特殊的怪问题，正如织布机对于陌生人来说，总会出现各种意外的断头。我曾经想试图找到一种万能膏药，来解救困在布局中的初学者或者设计师，看来这个努力只是枉然。哎，布局难呀！

但是，如果追根溯源，你又会发现布局的源头依旧清澈如许，干嘛老与这些极特殊的结构较劲呢？临终的总结：

第一，在设计页面结构时就要慎重，不要乱用元素。也许发明灯泡的人是不希望你用电灯泡去烤红薯，你干嘛要用灯泡去烤面包呢，所以，遭罪也自有应得。对于页面的宏观结构来说，还是老老实实的使用div吧，它确实是一位纯洁无个性的侠士，使用p或li只能够让自己痛苦，何苦呢？

第二，布局中应该有婆婆心态，不要去想当然。有些问题，如果我们不要主观臆断，主动的去多定义一个样式，可能什么问题都不会发生了，很多初学者总爱使用惯有的直觉来判断问题，所以问题自然会找到你。对这上面这个莫名其妙的空隙来说，如果我们直接为包含框显式定义一个高度也就Ok了。当然你会说，干嘛非要定义这个高度呢，如果包含内容的高度不固定该如何呢？此时，我也只能汗了，唯一能够自辩的就是具体问题具体解决，OK？绕了我吧~~~~~

第三，在万不得已的情况，不要较真。较真是分情况的，有时我们可以去讲理，但是为了讲理非要辩个输赢，只能是遭罪。这样做是不是值得，如果不值得，那么我们就不要去往里钻了，钻进去总之还是要爬出来的，自作聪明，不要让自己受罪。

哎，这个小问题，让我反思了2个小时，值不值得呢，看来我自己反被上套了，较劲的人真是受罪，呜呼——

第一页上一页 1

投稿

框架布局慎用元素（2）

猜你喜欢