Opera中基于百分比的宽度问题

Question

我正在尝试制作流畅的网格布局,并且我遇到了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>

Answer 1

Opera widths会对百分比进行舍入,但不会对填充和边距的百分比值进行舍入.

所以,简单的方法是设置width: 15%,并添加padding-right:.633%.但这样做,只有块在视觉上会更大.

如果你想让它的宽度公平,所以所有的孩子都有相同的宽度,你需要添加另一个包装并为它添加适当的负边距.它由这个公式计算:100/width*padding在你的情况下:100/15*0.633.它会补偿填充,一切都会很酷.

以下是所有变体的小提琴:http://jsfiddle.net/kizu/8q23d/ - 固定宽度(以像素为单位),块状width:15.633%,第一次视觉修复以及最后的正确修复.