7

流動的なグリッドレイアウトを作成しようとしていますが、Operaでの幅のレンダリングに一貫性がないという問題が発生しました。Operaでは、要素の幅は他のブラウザよりも一貫して小さくなっています。流動的な960グリッドシステムを試していますが、一貫性がない場合は、固定サイズに変更する可能性があります。

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

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

2 に答える 2

15

Operaはパーセントを丸めますwidthsが、パディングとマージンのパーセンテージ値は丸めません。

したがって、簡単な方法は、を設定しwidth: 15%、を追加することpadding-right:.633%です。しかしそうすることで、ブロックだけが視覚的に大きくなります。

すべての子が同じ幅になるように幅を公平にしたい場合は、別のラッパーを追加し、それに適切な負のマージンを追加する必要があります。これは次の式で計算されます：100/width*padding、あなたの場合：100/15*0.633。それはパディングを補い、すべてがクールになるでしょう。

これがすべてのバリエーションのフィドルです：http：//jsfiddle.net/kizu/8q23d/ —ピクセル単位の固定幅、ブロックwidth:15.633%、最初の視覚的修正、最後の適切な修正。

于 2011-08-17T10:59:54.510 に答える
0

さまざまなボックスモデルを扱うことは、非常にトリッキーで時間がかかる可能性があります。cssファイルを検証しないダーティなCSSハックを避けることを強くお勧めします。

パーセンテージ値の使用をやめて、「弾力性のある」レイアウトにしようとすることができます。この場合、ブロック要素の最小幅と最大幅を指定します。弾力性のあるレイアウトに関する記事はここにあり、もっと何かがここにあります

または、JavaScriptまたはライブラリを介してブラウザを検出し、条件付きCSSファイルを使用することもできます。これは、IEを扱うときの私のお気に入りのアプローチです。

条件付きcssはそれを支援するライブラリですが、Webにはさらに多くのオプションがあります。

幸運を

于 2011-08-17T10:34:19.200 に答える