margin系列之bug巡演（三） · Web前端干貨鋪

# 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只能應用在常規流中的 block-level 元素上 - 當一個塊級元素定義了 `position` 值為非 `static` 和 `relative` 之外的值時，margin-right/left auto 的計算值為0； - 當一個塊級元素定義了 `float` 值為非 `none` 之外的值時，margin-right/left auto 的計算值為0； - 非塊級元素的margin-right/left auto 的計算值為0；計算值為0，即說明其應用使用值的意圖失敗。所以在有如上情形的場景中，都無法使用 `auto` 來實現水平居中。同時也說明了，只有` 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` 元素吧，你會發現，如果你 `src` 進來不同尺寸的資源，那么在 `viewport` 上顯示的圖片寬高也是不同的，也就是說 `img` 元素的寬高會受外部資源影響。再說說 `input` 元素，隨便在頁面上扔一個input，你都能發現它擁有一個默認的寬高，這就是它所具有的內在二維寬高屬性，并且該類元素會受UA影響，不同UA下所呈現外觀會有不同。 ### 常見的置換元素有哪些？ img, object, button, input, textarea, select等 ### 行內非置換元素真的不能應用margin嗎？什么是非置換元素？除了置換元素之外的元素，我想將這樣的元素稱之為非置換元素是沒有大礙的。那么行內非置換元素真的無法設置 margin 嗎？我想在工作中你一定碰到過很多這樣的場景，給一個 `a` 或者 `span` 定義間隙。這時我們寫： ### CSS ```css span{margin:5px 10px;} ``` 結果發現 `span` 的水平方向上的 `margin` 定義生效了，但垂直方向上的 `margin` 定義卻沒被應用。是的，這就是行內非置換元素使用 `margin` 時的表征，所以對各種特性的理解，在讓自己的代碼更有效上是大有裨益的。 ## 回歸正題我們本來是想說IE8按鈕margin auto居中失效Bug的，扯了不少題外話。我們知道 `margin keyword auto` 不能應用在處于常規流中的 `block-level` 之外的元素上，所以我有這樣的一段代碼： ### CSS ```css button{display:block;margin:auto;} ``` ### HTML ```html <div id="demo"> <button>按鈕</button> </div> ``` 恩，我們將 `button` 顯式的轉換為了 `block`，同時我們知道 `button` 作為置換元素，本身具備內在寬高，也就是說這時，我只需要加上 `margin:auto` ，該按鈕就應該在其包含塊里水平居中。是的，所有瀏覽器都和預期是一樣，實現了水平居中，但是卻出現了奇葩的IE8，完全無效，甚至不如原始社會的IE6。來看看示例 `DEMO1`：[IE8按鈕margin auto居中失效Bug](http://demo.doyoe.com/css/margin/bug/button-auto-margin-bug.html) 通過以上例子，你有沒有突然感覺到，如果要讓一個置換元素在包含塊中水平居中，出乎預料的簡單，只需要 `display:block;margin:auto;` 即可。 ## 注意事項令人意外的是，只有 `button` 和 `input type` 為 `button` 相關元素的時候，在IE8中才會水平居中失效；如: `input type text` 或 `img` 時，`margin keyword auto` 運作正常。 ## 解決方案 - 給其顯示的定義寬度 - 不改變其display值，包含塊text-align:center - 其它水平居中方案，如：absolute + 負margin