Firefoxのズーム縮小によるレイアウト崩れ | [旧] WEB向上中

[旧] WEB向上中

webデザイナーとして日々奮闘する中、色々と忘れず頑張っていければと、web周りの技術や情報をメモっています。

あるスタッフからFirefoxで見たら表示が崩れてるーという報告を受けました。

調べてみるとどうやら、表示→ズームの文字サイズだけを変更するのチェックが入っていない状態で縮小する(画像も全て縮小されるモードです)とレイアウトが崩れる箇所があったようです。
<table>
  <tr>
    &$lt;td><dl>
     <dt><img (中略) width="100" /></dd>
     <<dd><img (中略) width="100" /></dd>
     <dd><img (中略) width="100" /></dd>
     <dd><img (中略) width="100" /></dd>
    </dl></td>
  </tr>
</table>
※dt、ddはfloat:leftで横並び
こんな感じで、DIV要素事態はtd要素内にピッタリと設置されていました。

色々調べるとどうやらFirefoxの仕様上のバグのようで(たぶん)。
そもそも画像なんかも小さくなり、普通の状態では無い見方をしているので、無視してやりたい気持ちをぐっと抑え、方法を考えました。
なにやら、1pxの余裕を作ると大丈夫なようですが、この部分は色々インパクトがでかい部分だったのであんまり変更することができず、断念することに。
ただ、最初は一回目の縮小で段崩れを起こしていたのですが、それを3回縮小するぐらいまでは耐えうる軽減策を見つけました。
<table>
  <tr>
    <td><dl>
     <dt><img (中略) width="100" /></dd>
     <dd><img (中略) width="100" /></dd>
     <dd><img (中略) width="100" /></dd>
     <dd style="width:99px;"><img (中略) width="100" /></dd>
    </dl></td>
  </tr>
</table>
最後のdd要素に、中のimgより1px小さい数字を掘り込みます。通常での表示も大丈夫ですし、若干の縮小には耐えれました。

なんかすっきりしない方法ですね。。
そもそも画像も縮小するような変な見方してんじゃねぇ~よと心の中で叫びながら、とりあえずでしのいでみましたという心のメモ。