浏览器对边距的支持：自动

Posted 2023-03-06

【中文标题】浏览器对边距的支持：自动

【英文标题】：Browser support for margin: auto

【发布时间】：2016-07-31 00:39:33

【问题描述】：

像许多设计师一样，我使用margin: 0 auto; 来居中元素。尝试在 http://www.caniuse.com 检查浏览器对此功能的支持时，我找不到任何相关内容。

是否有此功能的浏览器兼容性矩阵？

【问题讨论】：

如果您在caniuse 上找不到它，那么您可能会认为它得到了一切支持。除了可能是 IE6，因为拧 IE6...

@NiettheDarkAbsol，我在某处读到过有关旧 android 版本的 Opera 或 Chrome 的一些问题 - 我不记得了。

【参考方案1】：

虽然您可能不想调整代码以在不支持margin: 0 auto; 的老式浏览器中工作，但既然您问了：

支持仅从 IE6 开始。如果要支持早期的浏览器，可以在父元素中添加text-align: center;。这是因为旧浏览器错误地将text-align 也应用于块元素。同时，为现代浏览器保留margin: 0 auto;。如果你想让text-align: center 也能在现代浏览器中工作，你也可以设置display: inline-block; - 那么你就不需要margin: 0 auto;了。

所以假设这是你的 html：

<div id="outer">
    <div id="inner"></div>
</div>

您有以下选择：

选项 1

#outer 
    background: pink;
    width: 100%;
    text-align: center; /* for very old browsers */


#inner 
    background: green;
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 0 auto; /* for >99% of browsers */

选项 2

#outer 
    background: pink;
    width: 100%;
    text-align: center;
    height: 50px; /* height of child - necessary for IE8 and IE9,
    otherwise the height is slightly larger than that of the child */


#inner 
    background: green;
    display: inline-block; /* necessary for modern browsers, IE8+ */
    width: 50px;
    height: 50px;

但正如我所说，在支持这些古老的浏览器之前，您可能真的会考虑是否值得付出额外的努力，或者是否最好放弃对它们的支持。

【讨论】：

很好的答案！谢谢！

另一个问题：width: auto; 的跨浏览器支持怎么样？

你问有什么特别的原因吗？据我所知，所有浏览器都支持width: auto;，而且恰好是the initial value。要计算块元素的自动宽度，请从父元素的宽度中减去水平边距/填充/边框。对于内联元素，自动宽度就是内容的宽度。就好像你根本没有设置任何宽度一样。

是的，这是有原因的。我正在开发一个 HTML5 框架，我非常依赖 margin: 0 auto 和 width: auto; 规则。我的目标是 Android Browser 2.3+，所以我必须避免使用 calc() 这样方便的东西。

您遇到width: auto; 的问题了吗？据我所知，它应该在所有浏览器中都能正常工作。

【参考方案2】：

从https://developer.mozilla.org/en/docs/Web/CSS/margin开始，所有浏览器都完全支持margin: 0 auto;。

【讨论】：

答案是错误的。一些旧的浏览器不支持margin: 0 auto;，这在引用的来源中也有说明。有关详细信息，请参阅我的答案。