CSS HappyLifeさんのbodyに設定しておくと便利な3つのポイントとおまけを読んでちと気になったのがhtmlにoverflow-yを指定するというもの。

言われてみればFirefoxとかでスクロールバーのありなしで位置がずれるのは気になるかも(今まであまり気にしてこなかったけど・・・)。この問題はoverflow-y:sclollを指定すればFirefoxではスクロールバーが表示されるので、ずれるのは解消されます。でもHappy Lifeさんのエントリー「Firefoxのスクロールバーの有無でセンタリング位置がズレる件を解消」にもあるようにOperaでは適用されません。

overflow-yというプロパティはもともとIEの独自拡張なんですよね。でもCSS3の草案ではそれが正式に採用されることになったので、Firefoxでは先行実装しているというワケ。ただOperaじゃサポートされていないという問題があります。

overflowプロパティを使わずにOperaでもFirefoxでもIEでもブラウザのサイドバーを出には下記のようなやりかたがあります。

html
  {
  height:100%;
  margin-bottom:1px;
}

これをCSSで指定しておけば、コンテンツの長短にかかわらずサイドバーが出るので、センタリングのずれを解消することができます。

何が一番ベストかというのにはいろいろと議論の余地があると思いますが、方法の一つとしてご参考までに。

関連エントリー

• 関連する投稿はありません。

• Category
  • CSS
• 2 件のコメント

現在、この記事へのトラックバックは受け付けていません。