IE8 与“margin: 0 auto;”的差异对于输入元素
尽管它广泛用于元素居中,但“margin: 0 auto;”属性在 IE8 中似乎表现出不一致的行为。在最近的测试中,块元素内包含的输入元素无法在 IE8 的标准模式下居中。
有问题的 HTML 代码如下:
<div>
浏览器兼容性
IE8 标准模式下元素居中不当的问题已在众多浏览器中观察到,包括:
但是,它不存在于 IE8 标准中
潜在问题
此行为背后的罪魁祸首是输入元素本质上不是块级元素。当“display: block”应用于输入时,它会有效地将其转换为块级元素,从而使“margin: 0 auto;”属性适用。
解决方案
要解决此问题,开发人员可以显式设置输入元素的宽度或将其包含在块级元素中并应用“ text-align: center" 到容器。
规范参考文献
根据 CSS 2.1 规范:
因此,不使用“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中文网其他相关文章!