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

【问题标题】：Problem with percentage based widths in OperaOpera中基于百分比的宽度问题
【发布时间】：2011-08-17 10:24:02
【问题描述】：

我正在尝试制作流畅的网格布局，但在 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>

【问题讨论】：

标签： css cross-browser opera fluid-layout

【解决方案1】：

Opera 会舍入百分比 widths，但不会舍入填充和边距的百分比值。

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

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

这是所有变体的小提琴：http://jsfiddle.net/kizu/8q23d/ — 固定宽度（以像素为单位），用width:15.633% 块，第一次视觉修复，最后正确修复。

【讨论】：

感谢您的回答。可惜必须通过添加更多标记来修复它。
非常感谢您的回答！ =D

【解决方案2】：

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

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

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

conditional css 是一个可以帮助您解决此问题的库，但网络中还有更多选择。

祝你好运

【讨论】：

谢谢你的回答，我之前没见过那个条件css库。