縮小
ブラウザで縮小表示した場合の不具合
2011.08.10
ブラウザで100%で表示していた場合は崩れないのに、
縮小させて表示した場合に崩れてしまう場合があります。
たとえば下記のように記述した場合。

■html
-----------------------
<div class="all">
<div class="left"></div>
<div class="right"></div>
</div>
-----------------------

■CSS
-----------------------
.all{
width:402px;
height:50px;
margin:0;
padding:10px;
background-color:#FF0000;
}

.left{
width:200px;
height:48px;
margin:0;
padding:0;
border:#cccccc 1px solid;
background-color:#00F;
float:left;
}

.right{
width:200px;
height:50px;
margin:0;
padding:0;
background-color:#00FF00;
float:right;
}
-----------------------

100%ではこのように見えます。

110810_1.gif

縮小してしまうと

110810_2.gif

このようにずれてしまいます。
これは、親のボックスにぴったり入れ子していてかつ、
子のボックスにborder1pxを設定している為におこってしまいます。
border1pxが縮小できずにそのまま表示されてしまうため、
縮小した場合の数値が、あわなくなってしまうようです。
※2px以上の場合は大丈夫です!

今のところの解決策としては、親のボックスにぴったり入れ子せず
2px以上の余裕を持たせるようにする。
デザインによっては、できないこともありますね。。。。

■現象が起きてしまうブラウザ
IE,firefox

| コメント(2)