Archive for 9月 27th, 2010

ブラウザシェアと画面解像度のランキング　2010年9月期

現在自分の管理している３サイトでのブラウザシェア及び画面解像度

期間：2010/09/01-2010/09/26

前回計測からまたもや８ヶ月経ってしまいましたが、ブラウザシェアと解像度のランキングです。

プライベートブログは計測から外しました。数値が小さく参考にならないので。。。

今回のポイントは主に2つ。
・スマートホン経由のアクセスが着実に増加していること。
・SafariがFireFoxを逆転しているところ。

■ 地方のシネコン
1.　Internet Explorer—–81.47% 前回86.47%　　　
—8.0 　 61.68% 前回47.48%　
—7.0 19.41% 前回26.60%
—6.0 　18.59% 前回25.47%　
—5.5 　0.27% 前回0.29%
—5.0　 0.03% 前回0.12%
2. Safari—–8.05% 前回3.97%
3. Firefox—–4.50% 前回4.17%　
4. Chrome—–1.57% 前回1.22%　
5. NetFront —–1.26% 前回2.28%　
6. DoCoMo　—–1.23% 初登場
7. Opera—–0.90% 前回0.89%　
8. Mozilla Compatible Agent —–0.52% 前回0.34%　
9. Lunascape—–0.29% 前回0.45%　　
10. Playstation 3—–0.15% 前回0.09%　

1. 1024×768 —–23.69% 前回30.45%
2. 1280×800 —–17.72% 前回20.46%
3. 1280×1024 —–15.18% 前回16.70%
4. 1366×768 —–8.31% 前回4.72%
5. 1440×900 —–4.74% 前回4.91%
6. 1680×1050 —–4.30% 前回4.66%
7. 1920×1080 —–3.52% 前回2.08%
8. 320×480 —–3.26% 初登場
9. 480×854 —–1.59% 初登場
10. 1280×768 —–1.38% 前回1.82%　
11. 320×396 —– 1.23% 前回1.57%

■ 地域グルメ検索サイト
1.　Internet Explorer—–84.92% 前回88.75%
—8.0 　57.30% 前回42.31%
—6.0 22.71% 　前回32.19%
—7.0 19.64% 　 前回25.08%
—5.5 　0.32% 前回0.40%
—9.0 0.02% 初登場
2. Safari—–6.04% 前回3.62%
3. Firefox—–5.52% 前回5.19%
4. Chrome—–2.17% 前回1.26%
5. Opera—–0.63% 前回0.58%　
6. Lunascape—–0.23% 前回0.21%

1. 1024×768 —–25.52%　　　前回32.71%
2. 1280×800 —–19.90%　　　前回21.93%
3. 1280×1024 —–17.18%　　　 前回18.59%　
4. 1366×768 —–7.03%　　　前回4.32%
5. 1680×1050 —–4.74%　　　前回4.17%
6. 1440×900 —–4.22%　　　前回4.24%
7. 1920×1080 —–3.17%　　　前回1.69%
8. 320×396 —–2.19%　　　前回1.03%
9. 1280×768 —–1.50%　　　前回1.72%
10. 1600×900 —–1.07%　　初登場

■ Yahoo!ショッピング　寝具ショップ
1.　Internet Explorer—–78.45% 前回84.85%　
—8.0 65.11% 　前回52.69%
—6.0 　18.21% 前回24.85%
—7.0 　16.07% 前回22.21%　
2. Firefox—–9.58% 前回7.27%
3. Safari—–6.30% 前回4.65%
4. Chrome—–3.83% 前回1.27%
5. Opera—–1.20% 前回0.35%

1. 1280×800 —–20.19% 前回21.75%
2. 1024×768 —– 19.55% 前回26.45%
3. 1280×1024 —–16.44% 前回15.97%
4. 1680×1050 —–7.74% 前回5.16%
5. 1366×768 —–6.07% 前回4.37%
6. 1920×1080 —–6.07% 前回2.23%
7. 1440×900 —–3.59% 前回5.20%
8. 1280×720 —–2.15% 前回3.67%
9. 1920×1200 —–2.15% 前回2.31%
10. 1280×768 —–1.28% 前回2.06%　

月曜日, 9月 27th, 2010 browser, Fire Fox, Internet Explorer 1件のコメント

IE:クリックするとfloatした要素の親ボックスの余白（padding）が広がる

IE6で閲覧していたときにこんなことがありました。
テキストエリアをクリックしたとき、その親領域が下方向に少し広がった（ずれた）。

IEでfloatのバグといえば、ブロック要素にmarginを指定すると値が2倍になってしまうという有名なものがあるが、今回はpaddingで発生するバグ。

IEでは発生したが他のブラウザでは大丈夫で、おそらくIE特有のバグなんだろうということで対策を検索していたが、どうにも見つからなかった。

発生条件は以下の通り。
・テキストエリアの右側にsubmitボタン。
・それぞれliで囲まれfloatによって左右に配置されている。
・両者を内包するulにはclearfixが適用されている。
・ulには余白（padding）が設定されている。


ul.commentBox{
width:500px;
padding:5px;
}

ul.commentBox:after{
content:".";
display:block;
clear:both;
height:0;
visibility:hidden;
}

ul.commentBox li{
float:left;
}

原因の特定：
・liのfloatをやめたら現象は消えた。
・ulのpaddingをなくすと現象が消えた。
・clearfixの問題は無い（IE向けにはulの幅指定、zoom:1;などは無用）
・ulを内包するさらに親要素（div）にもfloatが使用されていたため、多用による問題かと思われたがそうでもない。

対応策：
今回のケースは純粋にli内それぞれに1要素ずつしか入っていなかったため、floatでの配置をやめて、display:inline;を適用。

CSSは以下の通り。


ul.commentBox{
width:500px;
padding:5px;
}

ul.commentBox li{
display:inline;
}

月曜日, 9月 27th, 2010 browser, css, Internet Explorer コメントはまだありません

カテゴリー

confidelic-logについて

アーカイブ

2010年9月
日 月 火 水 木 金 土
 1234
567891011
12131415161718
19202122232425
2627282930