首页 > web前端 > css教程 > 为什么'margin: 0 auto;”在 IE8 标准模式下不居中输入元素?

为什么'margin: 0 auto;”在 IE8 标准模式下不居中输入元素?

DDD
发布: 2024-11-29 16:46:10
原创
520 人浏览过

Why Doesn't

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板