為什麼「margin: 0 auto;」在 IE8 標準模式下不居中輸入元素？
- DDD原創
- 2024-11-29 16:46:10461瀏覽
IE8 與「margin: 0 auto;」的差異對於輸入元素
儘管它廣泛用於元素居中，但「margin: 0 auto;」屬性在IE8 似乎表現出不一致的行為。在最近的測試中，區塊元素內包含的輸入元素無法在 IE8 的標準模式下居中。
有問題的HTML 程式碼如下：
<div>
瀏覽器相容性
IE8 標準模式下元素居中不當的問題已在眾多居中不當的問題已在眾多居中瀏覽器中觀察到，包括：
- Firefox 3
- Opera
- Safari
- Chrome
- IE7相容模式
但是，它不存在於 IE8標準中
潛在問題
此行為背後的罪魁禍首是輸入元素本質上不是區塊級元素。當「display: block」應用於輸入時，它會有效地將其轉換為區塊級元素，從而使「margin: 0 auto;」屬性適用。
解決方案
要解決此問題，開發人員可以明確設定輸入元素的寬度或將其包含在區塊級元素中並應用「 text-align : center" 到容器。
規範參考文獻
依據CSS 2.1 規格：
- 非區塊級元素上的「display: block」不指定顯式寬度。
- 「保證金：0 自動；」區塊級元素上的元素在其父元素中水平居中。
因此，不使用「margin: 0 auto;」將輸入元素居中的瀏覽器的行為根據規範，這是不正確的。
注意：新增 DOCTYPE 聲明在某些情況下可以解決問題。考慮使用以下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
以上是為什麼「margin: 0 auto;」在 IE8 標準模式下不居中輸入元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn