Firefoxで縮小した際に表示がズレる問題

1pt

Firefox で縮小した際に表示がズレる問題の概要

pixel単位で指定するタイトなデザインを作っていると、Firefoxで縮小表示した際にfloat段組が下にズレる。
※「文字サイズだけ変更」ではなく、フルページズームの縮小です。

原因をググって先頭100件で出てこなかったので、ここに書くことにした。

ズレの発生条件

pixel指定した float 要素を、同じくpixel指定した、ピッタリの幅で囲っている場合に顕著に発生。（ピッタリでなくても、発生する可能性あり）

ズレの発生原因

Firefoxの縮小は、「小数点以下繰上げ」の為。

検証に基づいた推測です。

67pxのものを縮小すると下記のようになる。
- 67 * 90% = 60.3 繰り上げて 61px
- 67 * 80% = 53.6 繰り上げて 54px
- 67 * 67% = 44.89 繰り上げて 45px
- 67 * 50% = 33.5 繰り上げて 34px
- 67 * 30% = 20.1 繰り上げて 21px
272pxのものを縮小すると下記のようになる。
- 272 * 90% = 244.8 繰り上げて 245px
- 272 * 80% = 217.6 繰り上げて 218px
- 272 * 67% = 182.24 繰り上げて 183px
- 272 * 50% = 136
- 272 * 30% = 81.6 繰り上げて 82px
1pxのものはどんなに縮小しても1pxで表示される。

さて、67pxのタブに右だけ1pxの枠をつけたものを4つ並べたレイアウトを、272pxのdivで囲んだレイアウトを考えてみる。

100%時は、(67 + 1) * 4 = 272px で、ピッタリだ。

これを縮小した時、パーセンテージ毎に計算してみる。

90%時、(61 + 1) * 4 > 245px で、ズレる。
80%時、(54 + 1) * 4 > 218px で、ズレる。
67%時、(45 + 1) * 4 > 183px で、ズレる。
50%時、(34 + 1) * 4 > 136px で、ズレる。
30%時、(21 + 1) * 4 > 82px で、ズレる。

要するに、全部はみ出してしまい、下にズレる事になる。これは一例だけれど、特に幅1pxのボーダーを付けた時は、発現しやすい。

対策

ぱっと思いつく限りで、下記のようにすれば解決できると思う。
100% ÷ 並べる要素数を、並べる要素の幅に指定して、その中に枠線などが入ったdivを作る。
→ 例えば4つ並べるならば、幅25% を各要素に指定する。

下記、検証用html。（こういうのを、気になったものの数だけ、ポコポコ作ってます。）

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>CSS Float For Firefox</title>
<style type="text/css">
ul#f1{width: 272px;}
ul#f1 li {
    display: block;
    float: left;
    width: 25%;
    background-color:green;
}
ul#f1 li div{
    width: 67px;
    border-left: 1px solid black;
    background-color: yellow;
    text-align: center;
}

ul#f2{width: 272px;}
ul#f2 li {
    display: block;
    float: left;
    width: 25%;
    width: 67px;
    border-left: 1px solid black;
    background-color:yellowgreen;
    text-align:center;
}
.example ul{margin:0; padding:0;}
.w272{clear:both; width:272px; border-top:1px solid red; margin-bottom:10px; color:red;}
#comment{margin: 20px; padding: 1em; background-color: #CCCCCC; border:1px solid #333333;}
div div{margin: 0;}
hr {clear: both;}
</style>
</head>
<body>
<h1>Firefoxでfloatを縮小表示する際の対策テスト</h1>
<div id ="comment">
<p>
Firefox の縮小は、幅の数値を「小数点以下を繰り上げ」するようです。
</p>
<p>
つまり、<br />
<ul>
<li>幅67pxならば、90%の時 67×0.9 = 60.2px。繰り上げるので表示は61pxです。</li>
<li>幅1pxならば、縮小してもずっと1pxです。</li>
</ul>
</p>
<p>
全体の幅が指定してあり、かつその中の各要素を幅ギリギリまで取ってFloatしてあるものを縮小すると、「全体の幅 < 各要素の幅合計」になる瞬間がやってきます。そして、ズレます。
（特に、幅1pxの枠を使う場合は、ズレやすいです。）
</p>

<p>
ぱっと思いつく限りで、下記のようにすれば解決できると思います。<br />
100% ÷ タブ数 を、タブの幅に指定して、その中に枠線などが入ったdivを作る</br />
→ 例えばタブが4つならば、幅25% を各タブに指定する
</p>
</div>

<hr />

<div class="example">
<h2>％指定divで囲む対策</h2>
<ul id="f1">
<li><div>67px</div></li>
<li><div>67px</div></li>
<li><div>67px</div></li>
<li><div>67px</div></li>
</ul>
<p class="w272">272px</p>
</div>
<hr />
<div class="example">
<h2>対策なし</h2>
<ul id="f2">
<li><div>67px</div></li>
<li><div>67px</div></li>
<li><div>67px</div></li>
<li><div>67px</div></li>
</ul>
<p class="w272">272px</p>
<hr />
</div>
</body>
</html>

参考　Firefoxの縮小率
http://mozlinks-jp.blogspot.com/2008/06/firefox-3.html