ブラウザ
ブラウザで縮小表示した場合の不具合
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)
スクリーンサイズ(画面解像度) 2007/9時点
2008.07.31
2007/9時点

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

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

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



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
| コメント(0)