伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。這篇由伯樂線上前端開發小組的@daozen 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）
【提示】：IE CSS BUG 系列譯文正在進行中，後續或有改動和調整，請不要轉載本系列的譯文。
—————————————————————————–
影響版本
該bug影響：IE8
表現
當按鈕類元素應用樣式{ display: block; margin-left: auto; margin-right: auto; } ，並且沒有詳細設定width值之時，按鈕類元素不居中。
教程時間
2009.8.19 10:22:23
描述
這是我在Gérard Talbot的IE8 Bug集合裡面找到的bug，不過我要更正說明一下：這個bug不會在所有的inline元素髮生，而僅僅會出現在按鈕（例如<button>和type=”button”、type=”submit”的<input>元素）。進一步說，考慮到規範一致性的話，這甚至連一個bug都算不上，因為在w3c標準裡面說明：“css 2.1不會定義表單控制元件和框架的屬性應用，也不會定義怎樣用css去進行樣式化。客戶端自己可能會對這些元素應用css屬性。”（http://www.w3.org/TR/CSS21/conform.html#conformance）。但是，這個bug並不會在更早版本的IE上出現，正常的瀏覽器也會將按鈕居中，所以讓我們來看一下狀況：
示例
這個示例在一個獨立的頁面。
HTML程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<form action=""> <div> <button>This button should be centered</button> <input type="button" value="This button should be centered"> <input type="text"> <input type="checkbox"> <input type="radio"> <input type="submit" value="This button should be centered"> <input type="file"> <select><option>test</option></select> </div> </form> |
CSS程式碼
|
1 2 3 4 5 6 |
button, select, input { display: block; margin-left: auto; margin-right: auto; width: auto; } |
在這個示例中，正常瀏覽器和IE6、IE7中的<button>元素以及<input>按鈕控制元件(type=”submit” 、type=”button”)都和其他表單控制元件一樣被居中。但是到了IE8這裡這種方法卻被認為是錯誤的，儘管設定margin-left和margin-right的值為auto和display屬性設定為block（按鈕被替換，因此按鈕有內在尺寸），但按鈕依然左對齊。
解決方法
以下是以型別安排的解決上述bug的方法。
解決方法（簡潔方案）
解決時間
2009．08.19 10:43:21
解決瀏覽器版本
所有受影響的版本
描述
這隻能算是一種頭痛醫頭的方法，但是這的確能解決上述的bug，假如你只有幾個按鈕的話也能算是一種可行的解決方法，讓我們來看看：
修復版本在獨立的頁面
HTML程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<form action=""> <div> <button>This button should be centered</button> <input type="button" value="This button should be centered"> <input type="text"> <input type="checkbox"> <input type="radio"> <input type="submit" value="This button should be centered"> <input type="file"> <select><option>test</option></select> </div> </form> |
CSS程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 |
button, select, input { display: block; margin-left: auto; margin-right: auto; width: auto; } button, input[type="submit"], input[type="button"] { width: 20em; } |
標記部分保持不變，我只是簡單地在CSS裡面定義了按鈕表單控制元件的width。如果你不喜歡這種使得其他瀏覽器裡面的按鈕寬度被定義的方式，可以通過條件註釋的方法來使用。
這種方法的缺點在於你需要考慮到每個按鈕的寬度——在我的示例裡面，三個按鈕的文字都一樣，所以我對所有按鈕都應用了同樣的寬度。
解決方法（Javascript方法）
解決日期
2009．8.19 11:17:13
解決瀏覽器版本
所有受影響的版本
描述
如果你有成千上萬的個按鈕及其他方法的不適用的話，你可以考慮一下Javascript的方法。注意：我很清楚把JS程式碼放進IE私有的expression()和保留在CSS檔案的話同樣也是同一種方法；但是，同時執行上千次的話會弊大於利——這只是一個提醒，只需要做你認為合適的就好。讓我們來看看這個示例。
修復版本在獨立的頁面
HTML程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<form action=""> <div> <button>This button should be centered</button> <input type="button" value="This button should be centered"> <input type="text"> <input type="checkbox"> <input type="radio"> <input type="submit" value="This button should be centered"> <input type="file"> <select><option>test</option></select> </div> </form> |
CSS程式碼
|
1 2 3 4 5 6 |
button, select, input { display: block; margin-left: auto; margin-right: auto; width: auto; } |
JavaScript程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/javascript"> var buttons = document.getElementsByTagName('button'); for ( var i = 0; i < buttons.length; i++ ) { buttons[i].style.width = buttons[i].offsetWidth + 'px'; } var inputs = document.getElementsByTagName('input'); for ( var i = 0; i < inputs.length; i++ ) { if ( inputs[i].type == 'button' || inputs[i].type == 'submit' ) { inputs[i].style.width = inputs[i].offsetWidth + 'px'; } } </script> |
HTML和CSS保持不變。這段JS程式碼的作用在於找到按鈕表單控制元件，判斷它們的寬度，並將這寬度作為CSS樣式。很簡單。
解決方法()
解決日期
2009．8.19 10:22:41
解決瀏覽器版本
所有受影響的版本
描述
這個方法可能會打破你對按鈕設定{ display: block; margin: 0 auto;}的原因，儘管如此，它還是帶來了曙光。讓我們來看看。
修復版本在獨立的頁面
HTML程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<form action=""> <div> <button>This button should be centered</button> <div class="ie_fix"> <input type="button" value="This button should be centered"> </div> <input type="text"> <input type="checkbox"> <input type="radio"> <div class="ie_fix"> <input type="submit" value="This button should be centered"> </div> <input type="file"> <select><option>test</option></select> </div> </form> |
CSS程式碼
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
button, select, input { display: block; margin-left: auto; margin-right: auto; width: auto; } .ie_fix { text-align: center; } .ie_fix input[type="submit"], .ie_fix input[type="button"] { display: inline-block; } |
條件註釋程式碼
|
1 2 3 4 5 |
<!--[if IE 8]> <style type="text/css"> button { display: table; } </style> <![endif]--> |
我們來分析一下這個方法。首先，我們對<input> type=”button” 和 type=”submit”的修改同樣可以用於<button>；我對<button>展示另外一種方法是因為它不需要額外的標記，不過該方法對其他bug不起作用。
在<button>上我設定其display屬性為table。這可以讓它居中，不過同時這也破壞了在Opera中的居中，這也是為什麼這個方法要用在以IE8為目標的條件註釋裡面。
按鈕<input>的解決就更為複雜了，我在每一個按鈕都用額外的<div>來包圍，把該<div>設為居中，同時將這些被<div>定位的<input>設為{ display: inline-block; }。這樣你仍然可以在你需要的時候改變它們的寬度，同時也使它們可以對對齊方式進行響應。