我正在尝试 PureCSS对于我的网站来说,似乎一切都很顺利。我在 Firefox 中打开它,发现我的内容没有居中。
HTML/CSS 非常简单。如果我打开 Inspector 工具,我可以看到我的 <div class="content pure-u-1 pure-u-md-3-5">
以 60% 宽度正确渲染。如果是这样的话,那为什么不呢
.content {
margin: 0 auto;
}
将我的内容集中在 Firefox 中吗? Chrome 中一切正常。自从我做前端的东西以来已经有一段时间了,但是经过一些快速搜索后我看到人们仍然在推荐 margin: 0 auto;
居中,所以我认为这与网格框架有关?我也将所有内容设置为 box-sizing: border-box;
.
最佳答案
这似乎是浏览器之间的渲染不一致。
在您使用的框架中,网格元素设置为inline-block
。这些元素需要是 block
级别,以便margin: 0 auto
发挥作用并使元素在FireFox中居中:
.content {
margin: 0px auto;
display: block;
}
框架样式的罪魁祸首:
.pure-u-1, .pure-u-1-1, .pure-u-1-2, .pure-u-1-3, .pure-u-2-3, .pure-u-1-4, .pure-u-3-4, .pure-u-1-5, .pure-u-2-5, .pure-u-3-5, .pure-u-4-5, .pure-u-5-5, .pure-u-1-6, .pure-u-5-6, .pure-u-1-8, .pure-u-3-8, .pure-u-5-8, .pure-u-7-8, .pure-u-1-12, .pure-u-5-12, .pure-u-7-12, .pure-u-11-12, .pure-u-1-24, .pure-u-2-24, .pure-u-3-24, .pure-u-4-24, .pure-u-5-24, .pure-u-6-24, .pure-u-7-24, .pure-u-8-24, .pure-u-9-24, .pure-u-10-24, .pure-u-11-24, .pure-u-12-24, .pure-u-13-24, .pure-u-14-24, .pure-u-15-24, .pure-u-16-24, .pure-u-17-24, .pure-u-18-24, .pure-u-19-24, .pure-u-20-24, .pure-u-21-24, .pure-u-22-24, .pure-u-23-24, .pure-u-24-24 {
display: inline-block; /* Culprit */
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
关于css - PureCSS 网格不以 Firefox 为中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28162408/