Question

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

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

Answer 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;
}

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

Answer 2

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

浏览器支持保证金：自动

2 个答案:

选项1

选项2