近日学习css等的一些实践总结
日期：2014-05-17 浏览次数：20775 次
之前我说自己就是个只兼容chrome的男人，哈哈。
?
最近随便写个页面练练手，果然，一放到ie6下就错乱了。
?
其实看书，看文章，看hack都没自己动手来的实在，so，stop reading,just code please。
?
首先页面是很简单的，就是一个header、content、footer布局的页面。不采用第三方lib，完全手工编写，这样才能碰到问题，才能容易理解到真的问题。不然弄个boostrap，这些个人用的页面真是一下子就出来了。
?
布局嘛，采用简单的margin auto布局。估计稍微懂点css的都知道了，哎，我也只是最近学习css才知道这个。之前我还一直用display:table来作为布局使用。太惭愧了。
?
大致我想做的页面是这样的
?
?
content部分因为有一个sidebar和maincontent区域，所以可以采用float的方式来进行布局。然后需要为float进行clear。这个时候可以采用加一个clear的div或者采用content加个overfloat：hidden的方式。加markup不是个好选择。所以我采用了overflow的方式。
?
最终的html大致如下：
?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>home</title> <link href="main.css" rel="stylesheet"> </head> <body> <div id="wrapper"> <div id="header"> <ul id="nav"> <li>Home</li> </ul> <img id="logo" src="bird.png"> </img> <h2> 1233 </h2> </div> <div id="content"> <div class="side_bar"> <p> Category </p> <ul class ="side_bar_menu"> <li>java</li> <li>python</li> <li>javascript</li> <li>go</li> <li>linux</li> </ul> <p> Recently </p> <ul class = "side_bar_menu"> <li>test1</li> <li>test2</li> <li>test3</li> </ul> </div> <div class="main_content"> <div class="post"> <div class="post_title"> <h3> title1 </h3> <div class="post_detail"> post at <span class="date"> 2012-1-1 </span> tags <span class="tag"> java </span> </div> </div> <div class="post_content"> <p> fkldajfldaj laj fldaj fdlajf adjfkldajf </p> <p> fdjlakfj dlajf ldajf ldajf fldajklfdjljfdlj </p> </div> </div> <div class="post"> <div class="post_title"> <h3> title1 </h3> <div class="post_detail"> post at <span class="date"> 2012-1-1 </span> </div> </div> <div class="post_content"> fkldajfldaj laj fldaj fdlajf adlj </div> </div> </div> </div> <div id="footer"> this is footer </div> </div> </body> </html>?
在chrome、ie8、firefox、ie7下都很好，但是页面一放到ie6，发现出问题了。
?
?
首先来看footer为啥自动float上去了。开始我是怀疑是不是overflow失效了，然后看了下，overfloat没失效。看着那footer明显被自动适配到content下的一个子区域下。omg，这不是float本来应该有的特质么？但是它float到非parent的地方去了。
?
然后我们再来看图片。这图片明显的和nav平排了。其实我是将header下都居中了。本来图片应该是在nav下面的。但是现在是平行了。
?
果然，是having layout的问题，我的nav是一个ul，ul默认是没有having layout的，所以，我的几个li 一直排过去，然后img也排在后面了。如果位置足够，连我的h2也会排上去了。
?
而content那里我也没设置width和height，div默认也是没有layout。它根本没有layout，所以下面的内容就float上来了。所以只要为content、nav设置上width、height之类触发having layout就可以了。
?
很多的问题，不亲手弄一下折腾一下，是不会有更深的理解的。
?
?
?
