俺の報告

RoomClipを運営するエンジニアの日報（多分）です。

日報 #42 - 小さな報告

なんだってネタにするゾ！
って言ったんだから、すっごい瑣末なことも書きまっせー！

ブラウザでの「拡大、縮小」問題について。
マックだったら⌘+とか⌘-とかで出来ますよね。
あれやると一気にデザイン崩れたりすることあるんですが、
今日はそれにおける猛烈些細なことを少し。

border: 1px solid gray;

HTML上で結構頻繁に出てくるこれですが、
ブラウザ拡大縮小においてはすげぇムカつくバグが潜んでいるようです。
例えば、ここに簡単なHTMLがあるじゃろ？

<html>
<body>

<div style="width: 404px;height: 102px;">
  <div
    style="border: 1px solid gray;background: red;
    width: 200px;height: 100px;
    float: left;"
  >box_A</div>
  <div
    style="border: 1px solid gray;background: red;
    width: 200px;height: 100px;
    float: left;"
  >box_B</div>
</div>

</body>
</html>

幅404pxのDIV箱に、
幅200px+枠線1px*2のDIV箱が2つならんでおる。
ブラウザに表示すると、確かにbox_Aとbox_Bがならんでおるじゃろ？
それを、こう（⌘-）じゃ。
するとbox_Aの下にbox_Bが来てしもうた。
幅がオーバーしてしもうたんじゃな。

いや、なんでじゃ！と。
これはborder: 1px;の呪いで、
実は枠線の幅は1px以下に縮小されんのです。
仮に2pxにしたら縮小1回までは耐えますが、
縮小2回（50%以下）にすると同じようなエラーが生じます。
borderは1pxで縮小レンダリングが止まってしまうんですね。

ムカつきますが、安全に枠線を付けたい時は十分な余裕を持つか、
要素を入れ子にして背景色で枠線を作るとかしないといかんのです。
世知辛いですね。

さて！
来週以降はもっと書くことなさそうだけど、
作業が続く限り、何でも共有しまっせ！
ウチに興味あるわーっていうエンジニア、いつでも連絡まってるぜ！