為什麼「margin: 0 auto;」在 IE8 標準模式下不居中輸入元素？

IE8 與「margin: 0 auto;」的差異對於輸入元素

儘管它廣泛用於元素居中，但「margin: 0 auto;」屬性在IE8 似乎表現出不一致的行為。在最近的測試中，區塊元素內包含的輸入元素無法在 IE8 的標準模式下居中。

有問題的HTML 程式碼如下：

<div>
<p><strong>瀏覽器相容性</strong></p>
<p>IE8 標準模式下元素居中不當的問題已在眾多居中不當的問題已在眾多居中瀏覽器中觀察到，包括：</p>
<ul>
<li>Firefox 3</li>
<li>Opera</li>
<li>Safari</li>
<li>Chrome</li>
<li>IE7相容模式</li>
</ul>
<p>但是，它不存在於 IE8標準中</p>
<p><strong>潛在問題</strong></p>
<p>此行為背後的罪魁禍首是輸入元素本質上不是區塊級元素。當「display: block」應用於輸入時，它會有效地將其轉換為區塊級元素，從而使「margin: 0 auto;」屬性適用。 </p>
<p><strong>解決方案</strong></p>
<p>要解決此問題，開發人員可以明確設定輸入元素的寬度或將其包含在區塊級元素中並應用「 text-align : center" 到容器。 </p>
<p><strong>規範參考文獻</strong></p>
<p>依據CSS 2.1 規格：</p>
<ul>
<li>非區塊級元素上的「display: block」不指定顯式寬度。 </li>
<li>「保證金：0 自動；」區塊級元素上的元素在其父元素中水平居中。 </li>
</ul>
<p>因此，不使用「margin: 0 auto;」將輸入元素居中的瀏覽器的行為根據規範，這是不正確的。 </p>
<p><strong>注意：</strong>新增 DOCTYPE 聲明在某些情況下可以解決問題。考慮使用以下：</p>
<pre class="brush:php;toolbar:false">