去年剛剛接觸DIV+CSS樣式布局，發(fā)現這種布局有好多優(yōu)點(diǎn)，其中最大的優(yōu)點(diǎn)是能夠很清析的結構化html代碼，給后期制作后臺程序帶來(lái)很大的便捷，于是便喜歡上了這種布局方式。
現在總結一些我在做DIV+CSS樣式布局時(shí)遇到的一些問(wèn)題，以及這些問(wèn)題的解決方法，以便以后自己查詢(xún)，也希望有高人能看到這篇筆記，從而指導并交流一下。
1。IE瀏覽器真的是讓人又愛(ài)又恨，它是被運用最廣的瀏覽器，可偏偏又不符合標準，以至于頁(yè)面設計師們，在制作頁(yè)面布局的時(shí)候，要考慮到IE和其它瀏覽器的兼容問(wèn)題，如和FireFox之間的兼容?，F在有很多網(wǎng)站很喜歡在大分辨率的顯示器中，采用頁(yè)面居中的方式布局。在IE中只要如下布局即可：
<html>
<head>
<title>CSS</title>
<style type="text/css">
<!--
body{margin:0; padding:0;font-size:12px;line-height:1.8; font-family:Verdana, "宋體", Arial,Sans; text-align:center;}
#wrap{ width:778px; text-align:left; border:1px solid #333333; height:200px;}
-->
</style>
</head>
<body>
<div id="wrap"></div>
</body>
</html>
但是現在這段代碼，在IE下看是居中的，可在FireFox中，則依然是左對齊，如果要解決兩個(gè)瀏覽器都能居中顯示，只需要在#wrap里加入margin:0 auto;即可，詳細代碼如下：
<html>
<head>
<title>CSS</title>
<style type="text/css">
<!--
body{margin:0; padding:0;font-size:12px;line-height:1.8; font-family:Verdana, "宋體", Arial,Sans; text-align:center;}
#wrap{ width:778px; text-align:left; border:1px solid #333333; height:200px;
margin:0 auto; }
-->
</style>
</head>
<body>
<div id="wrap"></div>
</body>
</html>
2。在DIV+CSS樣式布局中經(jīng)常會(huì )用到<ul><li>來(lái)進(jìn)行布局，通常是用于新聞標題列表。見(jiàn)下面的代碼：
<html>
<head>
<title>CSS</title>
<style type="text/css">
<!--
body{margin:0; padding:0;font-size:12px;line-height:1.8; font-family:Verdana, "宋體", Arial,Sans; text-align:center;}
ul,li{list-style:none; padding:0px; margin:0px;}#wrap{ width:778px; text-align:left; border:1px solid #333333; height:200px; margin:0 auto; }
-->
</style>
</head>
<body>
<div id="wrap">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
</body>
</html>
上面代碼的效果，是讓<li>列表能夠左對齊，因為<ul><li>都是默認自帶樣式的，不加上面的樣式，他是默認與左邊線(xiàn)有一段距離的，上面的代碼還解決了IE和FireFox兼容問(wèn)題，如果只寫(xiě)padding:0px;在FireFox下可以實(shí)現左對齊，IE不能；只寫(xiě)margin:0px;在IE下可以實(shí)現左對齊，FireFox又不能了（唉，這兩個(gè)瀏覽器太能整人了），所以把這兩個(gè)樣式都加上，這樣肯定是沒(méi)有錯的。
3。在用table布局的時(shí)候，咱們可以使用<table>作出一個(gè)1px的線(xiàn)，注意：不是用<hr>。在Div下也可以實(shí)現：
<html>
<head>
<title>CSS</title>
<style type="text/css">
<!--
body{margin:0; padding:0;font-size:12px;line-height:1.8; font-family:Verdana, "宋體", Arial,Sans; text-align:center;}
.line{height:1px; background:#FF0000;width:50%; font-size:1px;}#wrap{ width:778px; text-align:left; border:1px solid #333333; height:200px;}
-->
</style>
</head>
<body>
<div id="wrap">
<div class="line"></div>
</div>
</body>
</html>
在FireFox中，只要加上height:1px；那么就已經(jīng)認出了，這個(gè)Div的高度為1px，可是IE下不能，就是高那么一塊（好像Div的高度低于15px，IE都不能直接用height來(lái)控制），所以用font-size:1px;來(lái)解決這個(gè)問(wèn)題。
4。Div不同于table，沒(méi)有垂直居中，如果只是單純的讓文字實(shí)現垂直居中，可以用以下代碼：
<html>
<head>
<title>CSS</title>
<style type="text/css">
<!--
body{margin:0; padding:0;font-size:12px;line-height:1.8; font-family:Verdana, "宋體", Arial,Sans; text-align:center;}
#valign_div{height:300px; line-height:300px; overflow:hidden;}
#wrap{ width:778px; text-align:left; border:1px solid #333333; height:200px;}
-->
</style>
</head>
<body>
<div id="wrap">
<div id="valign_div">test</div>
</div>
</body>
</html>
讓Div的高度和行高相等，最好加個(gè)overflow:hidden;來(lái)控制下文溢出的問(wèn)題，防止破壞頁(yè)面布局。
