像许多设计师一样,我使用 margin: 0 auto;
来使元素居中。在 http://www.caniuse.com 尝试检查浏览器对此功能的支持时我找不到任何相关内容。
此功能是否有浏览器兼容性矩阵?
最佳答案
虽然您可能不想调整您的代码以在不支持 margin: 0 auto;
的古董浏览器中工作,但是既然您问了:
支持仅从 IE6 开始。如果你想支持更早的浏览器,你可以在父元素中添加text-align:center;
。这是可行的,因为旧浏览器错误地将 text-align
也应用于 block 元素。同时,为现代浏览器保留 margin: 0 auto;
。如果您希望 text-align: center
也能在现代浏览器中工作,您还可以设置 display: inline-block;
- 那么您将不需要 margin :0 自动;
。
假设这是您的 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;
}
但正如我所说,在支持这些古老的浏览器之前,您可能真的会考虑是否值得付出额外的努力,或者是否最好放弃对它们的支持。
关于css - 浏览器支持边距 : auto,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36521797/