border-width: 1px; はブラウザで縮小表示すると小数点が出てくる?

こういう横並びのメニューを実装することってよくありますよね?

私はあります。
メニューに限らずなんですが、この横並びのレイアウトは組み方によっては「ブラウザで縮小表示した際にレイアウトが崩れる」という現象が起こりうるので、今回はその原因と解決方法をメモしていきます。

ブラウザで縮小表示するとカラム落ちしてしまう!

以下のようなコードを書いてみます。

<ul>
	<li><a href="">メニュー1</a></li>
	<li><a href="">メニュー2</a></li>
	<li><a href="">メニュー3</a></li>
	<li><a href="">メニュー4</a></li>
	<li><a href="">メニュー5</a></li>
</ul>
ul {
	width: 960px;
	margin: 0 auto;
	padding: 0;
	border-right: solid 1px #333;
}
ul:after {
	content: "";
	display: table;
	clear:both;
}
ul li {
	width: 191px;
	float: left;
	list-style: none;
	border-left: solid 1px #333;
	text-align: center;
}

通常であれば問題なく表示されるのですが、これをブラウザの機能で縮小表示させてみると……

こんな風にカラム落ちしてしまいました!
すべてのブラウザで確認したわけではありませんが、主要なブラウザのほとんどが同じような挙動になるようです。

原因は border-width が 1px じゃなくなってたから

Chromeのデベロッパーツールで確認してみると、なんと興味深い現象が起きていました。

見てほしいのは border の部分。
1px で指定したはずの border-width が 1.111px となっているではありませんか!
これは縮小表示する際に1pxよりも小さい値がモニターで表示できないため、縮小した割り合い分の border-width が拡大されているようです。

ちなみに 1px よりも大きい値の場合は問題なく表示されます。

対応策

原因は「border-width」がおかしくなることなので「border」を使わずに線を付けるというのが考えられます。
例えば「::before」などの疑似要素を使ったりなどですね。
あとはliタグに「box-sizing: border-box;」を指定するのもアリでしょう。
最新ブラウザしか対応しないのであればいっそ「flex-box」で組んでしまうのも手かもしれません。

もちろん組み方によってできるものとそうでないものがあるので、そのときに応じて対応策を試すしかなさそうです。
サンプルをアップしましたので、縮小表示して挙動を確認してみてください。

ということで、border-width: 1px; の要素を横並びにする際はちょっと気を付けましょう、というお話でした。

スポンサーリンク