margin系列之bug巡演（三）

margin系列之bug巡演（三）

原作者：doyoe
原文鏈接： http://blog.doyoe.com/2013/12/20/css/margin%E7%B3%BB%E5%88%97%E4%B9%8Bbug%E5%B7%A1%E6%BC%94%EF%BC%88%E4%B8%89%EF%BC%89/

IE8按鈕margin auto居中失效Bug

你會猛然覺得，這是正解啊，因為 button 或者 input type button類型 的元素是 inline-level 的。

不對啊，button 應該是 inline 的吧？哦，可能是 inline-block ？

在這之前，我們似乎要先明確一些基礎知識。

什么是 inline-level 元素？

要知道 inline-level 元素并不等于 inline 元素，也就是說 行內級元素 與 行內元素 是兩個不同的概念。

inline-level 元素包含 display 值為：

• inline
• inline-block
• inline-table
• inline-flex
• other inline-*

以上情況時，元素可被稱之為 inline-level 元素，但不都是 inline 元素。

什么是 block-level 元素？

block-level 指的是 display 值為 block 的元素嗎？我知道不少人一直有這樣的認知，不過這不完全準確。

block-level 元素包含 display 值為：

• block
• list-item
• table
• table-*
• flex
• 如果position既不是static也不是relative、float不是none或者元素是根元素，當display:inline-table時，display的計算值為table；當display值為 inline | inline-block | run-in | table-* 時，display的計算值為block

有如上情況時的元素均被稱之為 block-level 元素。同時 block-level 和 block 也不是同一個概念，所以如果你認為 display 值為 list-item 的 li 不是 塊級元素，那就錯了。

看到這里，你對 塊級元素，塊元素，行內級元素，行內元素
這個4個概念，應該已經有了比較清晰的了解？

margin keyword auto只能應用在常規(guī)流中的 block-level 元素上

• 當一個塊級元素定義了 position 值為非 static 和 relative 之外的值時，margin-right/left auto 的計算值為0；
• 當一個塊級元素定義了 float 值為非 none 之外的值時，margin-right/left auto 的計算值為0；
• 非塊級元素的margin-right/left auto 的計算值為0；

計算值為0，即說明其應用使用值的意圖失敗。所以在有如上情形的場景中，都無法使用 auto 來實現(xiàn)水平居中。同時也說明了，只有normal flow 的 block-level 才能應用 margin keyword auto。

margin可以應用于所有元素嗎？

這顯然不行。準確的說：margin可以應用在除某些table-*元素和某些行內元素之外的所有元素上。

和margin親近的table-*系元素

• table
• inline-table
• table-caption

除了 display 值為以上3種之外的 table系 元素，都不能應用 margin ，比如：th, td。

和margin親近的 inline-level 元素

我之前面試的時候常會問候選人，行內元素不能設置寬高對嗎？大部分人會告訴我說是；然后我又會問，那為什么 img 元素可以設置寬高呢？有人會告訴我，因為 img 是個特殊的元素？接著我又會問題，img 是如何特殊的？然后，然后就沒然后了，因為沒聲音了。

恩，img 確實是個特殊的元素。它特殊在哪里？它的特殊就在于它是一個行內置換元素。

所有的置換元素都可以設置 margin 屬性，并且可以設置寬高，這就是為什么 img 是行內元素卻可以設置 width 和 height。

什么是置換元素（Replaced elements）？

一個元素擁有內在的二維屬性，其寬高屬性受外部資源影響，默認擁有CSS格式，這樣的元素被稱為置換元素。

意思就是說置換元素的寬高不完全由CSS決定，還受其自身內容和外部資源所影響。

舉個例子來說，仍然說 img 元素吧，你會發(fā)現(xiàn)，如果你 src 進來不同尺寸的資源，那么在 viewport 上顯示的圖片寬高也是不同的，也就是說 img 元素的寬高會受外部資源影響。

再說說 input 元素，隨便在頁面上扔一個input，你都能發(fā)現(xiàn)它擁有一個默認的寬高，這就是它所具有的內在二維寬高屬性，并且該類元素會受UA影響，不同UA下所呈現(xiàn)外觀會有不同。

常見的置換元素有哪些？

img, object, button, input, textarea, select等

行內非置換元素真的不能應用margin嗎？

什么是非置換元素？除了置換元素之外的元素，我想將這樣的元素稱之為非置換元素是沒有大礙的。

那么行內非置換元素真的無法設置 margin 嗎？我想在工作中你一定碰到過很多這樣的場景，給一個 a 或者 span 定義間隙。這時我們寫：

CSS

span{margin:5px 10px;}

結果發(fā)現(xiàn) span 的水平方向上的 margin 定義生效了，但垂直方向上的 margin 定義卻沒被應用。

是的，這就是行內非置換元素使用 margin 時的表征，所以對各種特性的理解，在讓自己的代碼更有效上是大有裨益的。

回歸正題

我們本來是想說IE8按鈕margin auto居中失效Bug的，扯了不少題外話。
我們知道 margin keyword auto 不能應用在處于常規(guī)流中的 block-level 之外的元素上，所以我有這樣的一段代碼：

CSS

button{display:block;margin:auto;}

HTML

<div id="demo">
    <button>按鈕</button>
</div>

恩，我們將 button 顯式的轉換為了 block，同時我們知道 button 作為置換元素，本身具備內在寬高，也就是說這時，我只需要加上 margin:auto ，該按鈕就應該在其包含塊里水平居中。
是的，所有瀏覽器都和預期是一樣，實現(xiàn)了水平居中，但是卻出現(xiàn)了奇葩的IE8，完全無效，甚至不如原始社會的IE6。來看看示例 DEMO1：IE8按鈕margin auto居中失效Bug

通過以上例子，你有沒有突然感覺到，如果要讓一個置換元素在包含塊中水平居中，出乎預料的簡單，只需要 display:block;margin:auto; 即可。

注意事項

令人意外的是，只有 button 和 input type 為 button 相關元素的時候，在IE8中才會水平居中失效；如: input type text 或 img 時，margin keyword auto 運作正常。

解決方案

• 給其顯示的定義寬度
• 不改變其display值，包含塊text-align:center
• 其它水平居中方案，如：absolute + 負margin