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

我正在尝试制作流畅的网格布局，并且遇到了Opera中宽度呈现不一致的问题。在Opera中，元素的宽度始终小于其他浏览器。我正在尝试流体960网格系统，但如果它不一致，那么我可能会更改为固定大小。基于百分比的宽度在Opera中的问题

有谁知道我怎么可以得到歌剧呈现与其他浏览器相同的宽度？

example of Opera browser not render something the percentage width it should be

这里是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>

来源

2011-08-17 Paul Sheldrake

歌剧轮％的widths但它不是圆的百分比值，填充和利润率。

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

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

这里是与所有的变体小提琴：http://jsfiddle.net/kizu/8q23d/ - 以像素为单位固定的宽度，与width:15.633%块，第一视觉修复和在端部的正确定位。

来源

2011-08-17 10:59:54 kizu

谢谢你的回答。耻辱，它必须通过添加更多的标记来解决。 – 2011-08-18 11:10:59

不同箱的型号处理可能会非常棘手且费时。我绝对建议你避免不会验证你的css文件的肮脏的CSS黑客。

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

在可替代的，你可以通过JavaScript或通过库检测浏览器和使用条件CSS文件。这是我在处理IE时最喜欢的方法。

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

好运

来源

2011-08-17 10:34:19 Rdpi

感谢您的回答，我以前没有见过这个条件的CSS库。 – 2011-08-18 10:33:39

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

回答

相关问题