我正在進行一些高級IE8測試，似乎舊的使用技巧margin: 0 auto;在IE8中并非在所有情況下都有效。以下HTML給出了FF3，Opera，Safari，Chrome，IE7和IE8兼容的居中按鈕，但在IE8標準中卻沒有：<div style="height: 500px; width: 500px; background-color: Yellow;"> <input type="submit" style="display: block; margin: 0 auto;" /></div>（作為一種解決方法，我可以為按鈕添加一個明確的寬度）。所以問題是：哪種瀏覽器正確？還是這是行為未定義的情況之一？（我的想法是所有瀏覽器都不正確-如果按鈕的“顯示：阻止”按鈕不應該是100％寬度嗎？）更新：我是笨蛋。由于輸入不是塊級元素，因此我應該將其包含在帶有“ text-align：center”的div中。話雖如此，出于好奇的緣故，我仍然想知道在上面的示例中按鈕是否應該居中。賞心悅目的：我知道我在示例中做的很奇怪，正如我在更新中指出的那樣，我應該將其居中對齊。為了懸賞，我希望引用能回答以下問題的規范：如果設置為“ display：block”，按鈕的寬度應為100％嗎？還是這是不確定的？由于顯示為塊，因此應“ margin：0 auto;” 將按鈕居中，還是不居中？
3 回答
慕運維8079593
TA貢獻1876條經驗 獲得超5個贊
是的，您可以閱讀該規范一百次，并結合使用不同的片段，直到您有一個正確的解釋-但這正是瀏覽器供應商所做的，這就是我們處在當今狀況下的原因。
本質上，如果將100％的寬度應用于元素，則該元素應擴展為其父元素寬度的100％（如果該父元素是塊元素）。您將無法再居中，margin: 0 auto;因為它已經占用了可用寬度的100％。
要使任何內容居中，margin: 0 auto;您需要定義一個明確的寬度。要使內聯元素居中，您可以text-align: center;在父元素上使用，盡管如果父元素有其他子元素，則可能會有不良的副作用。
偶然的你
TA貢獻1841條經驗 獲得超3個贊
表單控件是CSS 中的替換元素。
10.3.4正常流程中的塊級替換元素
確定使用的“寬度”值與內聯替換元素相同。然后，將非替換塊級元素的規則應用于確定邊距。
因此，表單控件不應拉伸到100％的寬度。
但是，它應該居中。它看起來像IE8中的普通錯誤。如果您設置特定的寬度，它將使元素居中：
<input type="submit" style="display: block; width:100px; margin: 0 auto;" />
- 3 回答
- 0 關注
- 461 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消