Operaでのパーセンテージベースの幅の問題

Question

私は流体グリッドのレイアウトを作ろうとしており、Operaでの幅のレンダリングに問題があります。 Operaでは、要素の幅は他のブラウザよりもずっと小さくなっています。私は流体960グリッドシステムを試していますが、それが一貫していなければ固定サイズに変更することがあります。

Operaが他のブラウザと同じ幅でレンダリングする方法を知っている人はいますか？

は、ここで私は非常にトリッキーと時間がかかる可能性が異なるボックスモデルの対処このデモ

.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とHTMLです。 私は間違いなくあなたのCSSファイルを検証しない汚れたCSSのハッキングを避けることをお勧めします。

パーセント値の使用を削除して、「弾性」レイアウトにすることができます。 この場合、ブロック要素の最小幅と最大幅を指定します。 弾性レイアウトについての記事では、JavaScriptを介して、またはライブラリを経由して、ブラウザを検出して、条件付きのCSSファイルを使用することができます代替ではhereともっと何かhere

です。 これはIEを扱う際の私の好きなアプローチです。

conditional cssは、あなたに役立つライブラリですが、ウェブにはさらに多くのオプションがあります。

幸運