關於居中佈局和IE雙倍邊距bug_CSS/HTML

今天google了一下css居中版面的問題，結果差不多都是引用了同一篇文章。在ie中要居中，只要在

元素中定義text-align:center;的屬性。而在firefox中，需要定義一個wrapper包裹器。然後指定margin-left:auto;margin-right:auto;的屬性來使區塊在firefox中居中。其實，我自己都是用margin:auto;的縮寫margin屬性來設定居中。 margin縮寫屬性是上、右、下、左的順時針順序來設定四個方位的頁面邊距的。要注意的是，如果你據此以為只要設定margin-top:auto;屬性後就想使區塊居中的話，那你就錯了。用這種方式的時候，非得同時設定margin-left:auto;margin-right:auto;屬性才能居中。但是，你設定margin:0 auto;這樣的方法也是可以居中的。
另一個居中的方法是在使用絕對定位的前提下，用left：50%+margin-left:-375px;的組合方式來居中。兩種居中方式如下。

複製程式碼 程式碼如下:

/* 法🎜>    background: #00FF7F;
    text-align: center; /* hack for ie center alignlayout */ ;    width: 750px;
    margin:auto; /* 或 margin-left:auto;margin-right:auto;*/
}
/* 方法二 */
    width:750px;
    left:50%;
    margin-left:-375px;
    margin-left:-375px;
   🎜>我個人一直使用方法一的方式來居中，因為感覺方法二的區塊缺乏必要的剛性，程式碼也不太好理解。如果你縮小方法二的窗體到某個限度，就會看到整個佈局會出現流動的狀況。當然有人要的就是這種效果。 :)，另外方法二的一個好處是在其他嵌套區塊中不必覆蓋body元素的text-align: center;的設定，因為大部分文字還是會以左對齊居多。這樣一定程度上可以減少一點冗餘。不過我覺得這個好處可以忽略。總之，大家依照各自喜好各取所需便是。

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

盡快各種不同的瀏覽器都有css bug,但是css頁面佈局方式發展到今天，已經比較成熟了，因為bug而讓你抓狂不已的發生機率已經不大了。如果有問題，多查查搜尋引擎能夠解決你大部分的問題。如果，平常閒著的時候，可以作些試驗的話，也許更能夠在緊急情況下也能夠泰然自若。