web codery

[Media Queries]Firefoxだけwidth計算がずれることについて

category: HTML/CSS

Media Queriesで指定したmin-widthと同じ値をコンテンツ幅に指定したのに、Firefoxで横スクロールバーが出現してしまうという問題にぶつかったことがあるので、共有のためにメモします。Media QueriesについてはMedia Queriesの基本的な実用方法と書き方を参照してみてください。
上の説明ではわかりにくいと思うので、まずは発生する状況から説明していきます。

目次

  1. 横スクロールバーが出るケースの例
  2. 横スクロールバーが出る理由と対処について

横スクロールバーが出るケースの例

まずはコードを書いて、それから説明をします。

/* html */
<body>
  <div id="container">
    //ここにコンテンツが入る
  </div>
</body>
/* CSS */
div#container {
  width: 100%;
}
@media only screen and (min-width: 960px) {
  div#container {
    width: 960px;
    margin: 0 auto;
  }
}

body直下のdiv要素にスタイルを指定しています。上記のCSSを書いた状態でブラウザの幅を960pxちょっとにしてみると、出るはずのない横スクロールバーが出現するのです。ブラウザ幅を広げていくとスクロールバーは小さくなり、やがて消えます。ちなみにmarginの指定は#containerをセンタリングするために指定していますので、今回の件には関係ありません。

では、なぜスクロールバーが出るはずがないのかというと、この指定をした場合#containerの横幅は
ブラウザの幅が960px未満 ⇒ ブラウザの幅と同じ幅
ブラウザの幅が960px以上 ⇒ 960px
になるはずです。
それなのに横スクロールバーが出るなんておかしいですよね。

横スクロールバーが出る理由と対処について

いろいろと試してみると、どうもコンテンツの縦幅が小さく縦スクロールバーが出ない状況ではこの問題は起こらないようなのです。つまり、FirefoxだけMedia Queriesのwidth計算に縦スクロールバーの幅(20px弱)を入れてしまっているのが原因のようです。

ということで、解決法としては

  1. 1. Media Queriesのmin-widthの指定を20px大きくする
  2. 2. 普通にCSSを書いて、Firefoxの対応を待つ

といったところになりそうです。

上に掲載したコードで説明すると
1.の方に関しては、Firefox以外のブラウザで幅980pxにすると急に左右に10pxずつ余白ができますが、言われないと気づかない程度の問題だと思うのでこれが妥当かなと。

2.に関しては、標準的なCSSの書き方をしているし、ほかのブラウザで問題ないのならFirefoxが対応することを信じて待ってみようというような考え方です。自分のサイトなど、いつでもいじれるサイトは1.を選択⇒Firefoxが対応次第2.にするという対応が良いと思います。

ということで、FirefoxだけMedia Queriesのmin-width計算がちょっとおかしい問題についてでした。

管理人にメッセージを送る





ページトップ