我正在尝试制作流畅的网格布局,并且我遇到了Opera中宽度渲染不一致的问题.在Opera中,元素的宽度始终小于其他浏览器.我正在尝试流体960网格系统,但如果它不一致,那么我可以改为固定尺寸.
有谁知道如何让Opera渲染宽度与其他浏览器相同？
这是我用于此演示的CSS和HTML
.show_grid {
background: url(../img/grid.gif) no-repeat center top;
}
html,body{
margin: 0;
padding: 0;
}
.container {
width: 92%;
margin-left: auto;
margin-right: auto;
max-width: 936px;
padding-top: 15%;
}
.Box {
width: 15.633%;
background: #006;
color: #999;
margin: 5% .55%
}
<div class="container show_grid">
<div class="Box">2 column - browser name</div>
</div>
解决方法
Opera会舍入百分比宽度,但不会对填充和边距的百分比值进行舍入.
因此,简单的方法是设置宽度：15％,并添加填充权：.633％.但这样做,只有块在视觉上会更大.
如果你想让它的宽度合适,所以所有的孩子都有相同的宽度,你需要添加另一个包装并为它添加适当的负边距.它通过以下公式计算：100 /宽*填充,在您的情况下：100/15 * 0.633.它会补偿填充,一切都会很酷.
这是所有变种的小提琴：http://jsfiddle.net/kizu/8q23d/ – 固定宽度(以像素为单位),块宽(15.633％),第一次视觉修复和最后的正确修复.
