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%阻止，第一次视觉修复以及最后的正确修复。

Answer 2

---

处理不同的盒子模型可能非常棘手且耗时。 我绝对建议你避免不能验证你的css文件的脏CSS黑客。

您可以尝试放弃使用百分比值并选择“弹性”布局。 在这种情况下，您可以指定块元素的最小宽度和最大宽度。 有关弹性布局的文章是here，还有更多here

另外，您可以通过javascript或库检测浏览器并使用条件CSS文件。 在处理IE时，这是我最喜欢的方法。

conditional css是一个可以帮助您的图书馆，但网络上还有更多选项。

祝你好运