グラビカ学習帳～四谷のホームページ制作会社 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

2007/9時点

スクリーンサイズ（画面解像度）のシェアをお送りします。
下記数字ですが、

・世界的シェアである
・あるマーケティング会社のものである
・対象ユーザが必ずしも重ならない
・データが１年弱前

ということを考えると隔たりがあるかもしれませんが、
精密機械大国ニッポン、のことを考えると
より、進んだ解像度が高い（つまり幅がひろい）状態で
広がっていてもおかしくありません。



1. 1024 x 768    55.34%
2. 1280 x 1024    17.23%
3. 1280 x 800    8.23%
4. 800 x 600    8.18%
5. 1152 x 864    3.67%

引用サイト
http://www.onestat.com/html/aboutus_pressbox51_screen_resolutions_internet.html
http://www.w3counter.com/globalstats.php