css - 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%。但是这样做，只有 block 在视觉上会更大。

如果您想让它的宽度公平，以便所有子元素都具有相同的宽度，您需要添加另一个包装器并为其添加适当的负边距。它是通过以下公式计算的:100/width*padding，在您的情况下:100/15*0.633。它会补偿填充，一切都会很酷。

这是一个包含所有变体的 fiddle :http://jsfiddle.net/kizu/8q23d/ — 以像素为单位的固定宽度，width:15.633% block ，第一次视觉修复和最后的正确修复。