グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

ブラウザで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%ではこのように見えます。



縮小してしまうと



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

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

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