在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>

- Paul Sheldrake

Answer 1

Opera会将百分比的width值四舍五入，但对于padding和margins的百分比值不进行四舍五入。

因此，简单方法是设置width: 15%，并添加padding-right: .633%。但这样做只会在视觉上使块变大。

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

这里有一个包含所有变体的演示: http://jsfiddle.net/kizu/8q23d/ - 固定像素宽度、带有width: 15.633%的块、第一个视觉修复和最终正确修复。

- kizu

---

谢谢您的回答。可惜需要通过添加更多标记来修复它。 - Paul Sheldrake

Answer 2

---

处理不同的盒子模型可能非常棘手和耗时。 我绝对建议您避免使用脏的CSS hack，这将无法验证您的CSS文件。

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

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

有条件的css 是一个可以帮助您完成此任务的库，但互联网上还有很多其他选项。

祝你好运

- Rdpi

---

谢谢你的回答，我之前没见过那个条件CSS库。 - Paul Sheldrake