快捷導(dǎo)航

關(guān)于居中布局和IE雙倍邊距bug

更新時(shí)間：2006年09月25日 00:00:00 作者：

今天google了一下css居中布局的問(wèn)題，結(jié)果差不多都是引用了同一篇文章。在ie中要居中，只要在<body>元素中定義text-align:center;的屬性。而在firefox中，需要定義一個(gè)wrapper包裹器。然后指定margin-left:auto;margin-right:auto;的屬性來(lái)使區(qū)塊在firefox中居中。其實(shí)，我自己都是用margin:auto;的縮寫margin屬性來(lái)設(shè)定居中。margin縮寫屬性是上、右、下、左的順時(shí)針順序來(lái)設(shè)定四個(gè)方位的頁(yè)面邊距的。需要注意的是，如果你據(jù)此以為只要設(shè)定margin-top:auto;屬性后就想使區(qū)塊居中的話，那你就錯(cuò)了。用這種方式的時(shí)候，非得同時(shí)設(shè)定margin-left:auto;margin-right:auto;屬性才能居中。但是，你設(shè)定margin:0 auto;這樣的方法也是可以居中的。
另外一種居中的方法是在使用絕對(duì)定位的前提下，用left：50%+margin-left:-375px;的組合方式來(lái)居中。兩種居中方式如下。

復(fù)制代碼代碼如下:

/* 方法一 */ 
body { 
    background: #00FF7F; 
    text-align: center; /* hack for ie center alignlayout */ 
} 
#wrapper{ 
    background: Aqua; 
    width: 750px; 
    margin:auto; /* 或者 margin-left:auto;margin-right:auto;*/ 
} 
/* 方法二 */ 
#wrapper2 { 
    position: absolute; 
    width:750px; 
    left:50%; 
    margin-left:-375px; 
    background: Orange; 
} 

我個(gè)人一直使用方法一的方式來(lái)居中，因?yàn)楦杏X(jué)方法二的區(qū)塊缺乏必要的剛性，代碼也不太好理解。如果你縮小方法二的窗體到一定限度，就會(huì)看到整個(gè)布局會(huì)出現(xiàn)流動(dòng)的情況。當(dāng)然有人要的就是這種效果。:)，另外方法二的一個(gè)好處是在其他嵌套區(qū)塊中不必覆蓋body元素的text-align: center;的設(shè)定，因?yàn)榇蟛糠治谋具€是會(huì)以左對(duì)齊居多。這樣一定程度上可以減少一點(diǎn)冗余。不過(guò)我覺(jué)得這個(gè)好處可以忽略不計(jì)?？傊蠹腋鶕?jù)各自喜好各取所需便是。

另外一個(gè)是ie的雙倍邊距的bug,解決方法就是加上display:inline;的設(shè)定即可。其實(shí)這個(gè)解析錯(cuò)誤的bug會(huì)影響很多方面。如果你遇到css布局在ie中間距表現(xiàn)異常的時(shí)候，就可以試試看加上display:inline;的屬性申明了。而且在一定特定的布局問(wèn)題問(wèn)題，需要組合使用display:block;和display:inline;才能讓布局如你所愿。我在一個(gè)unorder list控制的圖片菜單中就遇到過(guò)類似的問(wèn)題。

盡快各種不同的瀏覽器都有css bug,但是css頁(yè)面布局方式發(fā)展到今天，已經(jīng)比較成熟了，因?yàn)閎ug而讓你抓狂不已的發(fā)生機(jī)率已經(jīng)不大了。如果有問(wèn)題，多查查搜索引擎能夠解決你大部分的問(wèn)題。如果，平時(shí)閑著的時(shí)候，可以作些試驗(yàn)的話，也許更能夠在緊急情況下也能夠泰然自若。