FireFox
ブラウザシェアと画面解像度のランキング 2012年3月期
現在自分の管理している4サイトでのブラウザシェア及び画面解像度
期間：2012/3/1-2012/3/31
前回計測からもう１年半経ってしまいましたが、ブラウザシェアと解像度のランキングです。
■ 地方のシネコン
1. Internet Explorer8.0—24.08%
2. Android Browser 533.1—21.14%
3. Internet Explorer9.0—15.96%
4. Safari 7534.48.3—10.79%
5. Internet Explorer7.0—5.29%
6. Internet Explorer6.0—3.98%
7. Safari 6533.18.5—3.29%
8. DoCoMo 2.0—2.83%
9. Mozilla Compatible Agent5.0—1.59%
10. Android Browser 530.17—1.22%
11. Chrome 17.0.963.79—1.15%
12. Firefox 10.0.2—1.15%
13. Firefox 11.0—0.80%
14. Chrome 17.0.963.56—0.74%
15. Chrome 17.0.963.83—0.70%
16. Safari 534.52.7—0.47%
17. Safari 6531.22.7—0.38%
18. Safari 533.19.4—0.34%
19. NetFront 3.5—0.30%
20. Android Browser 534.13—0.28%
21. Safari 534.53.10—0.27%
22. Chrome 17.0.963.78—0.24%
23. Safari 533.22.3—0.22%
24. Safari 534.54.16—0.18%
25. Chrome 17.0.963.66—0.17%
1. 320×480 —13.68%
2. 1366×768 —11.39%
3. 1280×800 —9.04%
4. 1024×768 —8.66%
5. 1280×1024 —6.54%
6. 1920×1080 —4.25%
7. 480×854 —2.82%
8. 1440×900 —2.52%
9. 800×1220 —2.15%
10. 1680×1050 —2.13%
■ Yahoo!ショッピング 寝具ショップ
1. Internet Explorer8.0—27.93%
2. Internet Explorer9.0—22.94%
3. Android Browser 533.1—6.89%
4. Internet Explorer7.0—6.51%
5. Safari 7534.48.3—6.36%
6. Firefox 10.0.2—5.83%
7. Internet Explorer6.0—3.71%
8. Firefox 11.0—3.48%
9. Chrome 17.0.963.79—2.27%
10. Safari 534.52.7—1.67%
11. Chrome 17.0.963.8—31.59%
12. Safari 534.53.10—1.29%
13. Safari 6533.18.5—0.83%
14. Chrome 17.0.963.56—0.76%
15. Chrome 17.0.963.78—0.76%
16. Safari 534.48.3—0.68%
17. Opera 11.61—0.61%
18. Safari 533.22.3—0.61%
19. Android Browser 530.17—0.45%
20. Mozilla Compatible Agent5.0—0.45%
21. Safari 533.20.27—0.38%
22. Safari 534.54.16—0.38%
23. DoCoMo 2.0—0.30%
24. Chrome 17.0.963.66—0.23%
25. Safari 531.21.10—0.23%
1. 1366×768 —14.31%
2. 1280×800 —13.47%
3. 1024×768 —9.77%
4. 1280×1024 —7.80%
5. 1920×1080 —7.42%
6. 1920×1200 —5.15%
7. 320×480 —4.69%
8. 1440×900 —3.71%
9. 1680×1050 —3.63%
10. 768×1024 —3.26%
■ ブログ（これ）
1. Firefox 10.0.2—18.46%
2. Firefox 11.0—13.85%
3. Chrome 17.0.963.79—10.15%
4. Internet Explorer8.0—9.85%
5. Chrome 17.0.963.83—5.85%
6. Internet Explorer9.0—5.85%
7. Chrome 17.0.963.56—5.23%
8. Chrome 17.0.963.66—3.38%
9. Firefox 3.6.27—1.85%
10. Internet Explorer7.0—1.85%
11. Firefox 9.0.1—1.54%
12. Internet Explorer6.0—1.54%
13. Safari 534.52.7—1.54%
14. Chrome 17.0.963.78—1.23%
15. Chrome 18.0.1025.142—1.23%
16. Firefox 3.6.28—1.23%
17. Firefox 4.0.1—1.23%
18. Firefox 3.6.24—0.92%
19. Firefox 8.0.1—0.92%
20. Opera 11.61—0.92%
21. Chrome 18.0.1025.140—0.62%
22. Chrome 18.0.1025.45—0.62%
23. Chrome 18.0.1025.56—0.62%
24. Firefox 3.6.23—0.62%
25. Firefox 7.0.1—0.62%
1. 1280×1024 —24.31%
2. 1920×1080 —19.69%
3. 1366×768 —8.92%
4. 1280×800 —8.62%
5. 1920×1200 —8.62%
6. 1680×1050 —8.31%
7. 1440×900 —5.85%
8. 1600×1200 —5.54%
9. 2560×1440 —2.46%
10. 1024×768 —1.85%
■ アメブロ（プライベート）
1. Internet Explorer8.0—32.35%
2. Internet Explorer7.0—14.71%
3. Internet Explorer9.0—8.82%
4. Firefox 11.0—5.88%
5. Lunascape6.5.4.24433—5.88%
6. Safari 534.52.7—5.88%
7. Chrome 14.0.814.0—2.94%
8. Chrome 17.0.963.56—2.94%
9. Chrome 17.0.963.79—2.94%
10. Firefox 4.2a1pre—2.94%
11. Firefox 9.0a2—2.94%
12. Internet Explorer6.0—2.94%
13. Opera 11.10—2.94%
14. Safari 533.22.3—2.94%
15. Safari 7534.48.3—2.94%
1. 1280×768 —26.47%
2. 1280×800 —14.71%
3. 1280×1024 —11.76%
4. 1366×768 —8.82%
5. 1093×614 —5.88%
6. 1192×670 —5.88%
7. 1680×1050 —5.88%
8. 1024×640 —2.94%
9. 1024×768 —2.94%
10. 1252×704 —2.94%
文字の左1px分が欠ける現象
overflow:hidden;が指定された領域内で、文章の先頭文字が欠けてしまう現象が発生しました。
windowsのIEのみではなく、今回はFireFoxでも同様の現象が見られたため、この問題が解決するまでに結構な時間を・・・。
OSの問題？
フォントの問題？
フォントサイズの問題？
overflow:hidden;の指定領域の問題？
複数の観点から調べてみました。
まず、OSの問題かということについてですが、今回はwindowsのみで発生していてmacでは発生しなかったのでOSに何かヒントがないかということで、Windows XP での全角固定ピッチフォントの仕様変更を確認しましたが、今回使用しているフォントがプロポーショナルフォントであるMS Pゴシックであることからも、ここに問題があるとは思えません。
次にフォントの問題？かという点についてですが、たしかに問題が発生しているのはMS Pゴシックのときでそれを使用するwindows側ブラウザのみに発生している問題でした。
macはデフォルトのフォントが異なるためこの現象は発生しません。
フォントの表示領域に問題があるかもしれないが、確かではない感じです。
フォントサイズの問題？という点ですが、こちらも特定の大きさの場合のみ今回の現象が発生しました。
１４px相当前後の場合に発生した問題です。
しかしこれを原因としてしまうと、14pxがダメなのか！？ということにもなり納得がいきません。
最後にテキストの表示領域自体に何らかの問題がないかについてです。
テキストが表示されるエリアに指定しているCSSをすべて細かく見ていくと、overflow:hidden;が影響していることわかりました。
まずはhtmlをみてみます。
<div class=”contents”>
<p>ぐぐぐぐぐぐぐぐぐぐぐぐぐぐぐ</p>
<p>aaaaaaaaaaaaaaaaaa</p>
</div>
これに対してcssは、
.contents{
width:640px;
padding:20px;
}
.contents p{
width:600px;
overflow:hidden;
}
としていました。
ここでpに指定したoverflow:hidden;が無いと、文字は欠けずに表示できました。
ただし、ここでの疑問は領域（ボックス横幅）についてはきちんと確保しているにも関わらず、overflowを指定しているとその計算が狂ってしまい先頭文字の開始位置が左にずれてしまうことです。
ここで、pに対してoverflow:hidden;が無ければ文字が欠けない訳ですが、それでは困るので代替手段としてoverflowの指定場所を変えました。
.contents{
width:640px;
overflow:hidden;
padding:20px;
}
.contents p{
width:600px;
}
pを内包する親要素に対してoverflow:hidden;を指定することにしました。
こうすると若干文字のはみ出し方に違いは出ますが、とりあえずは解決です。
IEでoutlineの領域が広がる
IE6,7でword-wrap:break-word;を適用したところ、とある問題（バグ？）に遭遇しました。
横幅指定のあるボックス内にテキストが入るような状況で、半角英数記号が連続する場合に、これまでは
word-break:break-all;
でIEには折り返しの対応をしていましたが、今回は
word-wrap:break-word;
で対応してみることにしました。
すると、折り返す半角英数記号がリンクの場合、outlineだけ右にはみ出てしまうのです。
かといって、クリッカブル領域もその分広がるのかというと、そうではないようです。
残念な表示をしてくれるIEのために、結局これまでどおりの
word-break:break-all;
をIEのみに適用することにしました。残念。
ちなみにFireFoxなどのモダンブラウザではoverflow:hiddenないしはword-wrap:break-word;でこれまで対応してきました。
FireFoxで半角英数の折り返し処理を適用できるようになっただけでもまだマシということで…
overflow:auto;にしたtextareaでスクロールバーが出ない
overflow:auto;を設定し、入力エリアより長く文章が入った場合に自動的にスクロールバーが出るように設定したtextareaで、こんな問題に遭遇した。
FireFoxで見たとき、文章が多くてもスクロールバーが出ないといわれた。
調べてみたところ、どうやらtextareaの高さが足らなかったため、スクロールバーの▲▼の描画エリアを確保できなかっただけっぽい。
なので高さを追加した、解決。。。。
最低でもwindowsでは高さ34pxくらい必要だった。
ちなみにmacはというと56pxくらい必要になります。
border-collapse:collapse;を指定したtableが左にズレるバグ
FireFoxでサイトを確認したとき、border-collapse:collapse; が指定されたtableが親要素から左に1pxずれるバグがありました。
原因がイマイチ分かりませんが、おそらくmozillaのバグなんでしょうね。
ここにも載ってました。
http://bugzilla.mozilla.gr.jp/show_bug.cgi?id=4246
しかも解決済みだということですが、いまだに直らないってことは解決していないのでしょうか？？
それともこちらのマークアップにミスが！？
こんな構造になっていようが、
にしようが、ずれるもんはずれるんです。
結局、ボーダーをtableに指定しないで、tableをdivで囲ってあげてそのdivにボーダー指定するか、
FireFoxだけ、border-collapse:collapse; を指定しないかで解決したんですけどね。
うーん。。
FireFoxで画像置換したリンクのアウトラインが画面左に伸びる
overflow:hidden;の指定。
また、macIE5のバグ回避のため、
/*\*//*/
li.a{overflow:visible;}
/**/
とする。
FireFox3のフルページズームに関するバグ？
親ボックス内3カラムの子ボックスをフロートで配置したレイアウトの場合に、FireFox3のフルページズームの縮小を行うと3カラム目のボックスが落ちる現象を確認。
原因をネットで探してみた中で、解決に一番近い情報が確認できたサイトが、Firefox 3 のフルページズーム使用時はスクリーン上でのピクセル量とCSS上でのピクセル量 なのだが・・・・
・親ボックスの横幅に対して、3つの子ボックスそれぞれにも横幅が指定され、合計で親ボックスの全幅となる。
・float:left; float:left; float:right; で配置。
・フルページズーム機能の縮小の場合のみ、3カラム目が下に落ちる。
とりあえず、ボックスのカラム落ちを回避した方法は・・・
子ボックスの幅をどれかひとつ数ピクセル縮める。
カラム落ちする場合の縮小したイメージをよく見ると、どうやら余白やコンテンツ幅のpx指定がうまく効いていないっぽいことでレイアウトが崩れている。
フロートの解除に関するスタイル指定のミスではなかったので・・・・
これでいいのだろうか？？
FireFox3のズーム機能で縮小するとレイアウトが崩れる
floatで配置した3カラムデザインのうち、FireFox3のズーム機能を使って（テキストのみのズームではない）一番右のカラムが下に落ちてしまった。
ボックス内の全幅は500pxとして、CSSで150px 200px 150pxと指定していた。
それぞれ、float:left; float:left; float:right;で配置していた。
どうやら縮小するとwidthの解釈がおかしくなるらしい・・・
この問題を解決するために、真ん中のカラムの幅を1px減らして199pxにしてみたら直った。
はたしてこれで問題解決になってるのだろうか？？？
カテゴリー
- browser (22)
- Chrome (2)
- Fire Fox (12)
- Internet Explorer (13)
- webkit (1)
- css (8)
- design (1)
- History (5)
- html / xhtml (5)
- JavaScript (2)
- Links (1)
- memo (3)
タグ
confidelic-logについて
アーカイブ
| 日 | 月 | 火 | 水 | 木 | 金 | 土 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | ||||