Internet Explorer

ブラウザシェアと画面解像度のランキング　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%

Tags: FireFox, Internet Explorer, ブラウザ, 解像度

月曜日, 4月 16th, 2012 browser コメントはまだありません

IEバグ：overflowを設定したボックス内のposition指定した要素が動かない

サイトの特性上、あまり今までoverflow:auto やoverflow:scroll-y などを使うことが無かったのですが、ここにきてIEのバグに遭遇しました。

まずバグの概要ですが、

・親ボックスはoverflow:scroll-yとheightを設定していて、内容物が高さを超えると縦スクロールバーが出るようにしていた。
・内包要素にはpositionによって配置されるパーツがあり、relativeとabsoluteによって配置していた。
・IE6,7,8,9でバグが発覚。position:relativeを指定した要素が親ボックスのスクロールに連動せず、頑なにその位置から動こうとしない。

という状態になりました。

解決方法

overflow:scroll-y;を設定した要素にposition:relative;を追加する。

ということで解消です。

2012年に発見するようなバグでもないかもしれませんがメモしておきます。

Tags: css, Internet Explorer, バグ, ブラウザ

火曜日, 4月 10th, 2012 browser, css, html / xhtml, Internet Explorer コメントはまだありません

IEでwhite-space:nowrap;を指定した要素の一部が消える、改行する

どうもIEとwhite-space:nowrap;は相性が悪いようで、バグもよくweb上で見かけるわけだが、今回はこんなバグに遭遇しました。

今回の条件：
white-space:nowrap;を指定しているa要素で、そのa要素に背景画像で先頭にアイコンを設定している場合。
IE6,IE7ともに発生、その他Firefox safariなどは問題なし。

発生した問題：
テキスト部分はwhite-space:nowrap;がきいていたが、アイコン表示部分だけが上の行に残ってしまった。
また、アイコン自体も表示されなかった。

対応：
white-space:nowrap;を設定した要素に対してzoom:1;を設定することで問題を解消した。

Tags: css, Internet Explorer, バグ

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

文字の左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;を指定することにしました。
こうすると若干文字のはみ出し方に違いは出ますが、とりあえずは解決です。

Tags: css, FireFox, Internet Explorer

水曜日, 6月 23rd, 2010 browser, Fire Fox, Internet Explorer コメントはまだありません

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で半角英数の折り返し処理を適用できるようになっただけでもまだマシということで…

Tags: css, FireFox, Internet Explorer, バグ, ブラウザ, 新規タグの追加

水曜日, 6月 23rd, 2010 browser, Fire Fox, Internet Explorer コメントはまだありません

overflow:auto;を指定した要素の背景画像が固定できない件

ある特定のボックスであるdivの高さと横幅を固定とし、テキストがその領域からはみ出る場合にスクロールバーが出る設定を以下のようにした。

div#messageArea{ width:600px; height:150px; overflow:auto; padding:12px 10px; border:1px solid #CCC; background:#FCFCFC url(http://xxxx.jp/img/sampleaimage.gif) no-repeat 0 0; }

まずこれでIE以外のブラウザでは背景画像をdivの領域内で固定できた。
このままだと、IEで背景画像はスクロールで消えてしまうため、
ここにさらにbackground-attachment:fixed;を追加。

div#messageArea{ width:600px; height:150px; overflow:auto; padding:12px 10px; border:1px solid #CCC; background:#FCFCFC url(http://xxxx.jp/img/sampleaimage.gif) no-repeat 0 0; background-attachment:fixed; }

こうした場合、IE6以外のブラウザで背景画像の開始位置の解釈が変わり、ウインドウの左上が開始点となってしまった。
そのため、IE6専用にハックをつける。

ここまでで、FireFox3.6,Safari4,IE6には対応できた。
が、IE7では背景画像は出るが、固定はできていない状態。

ここまでが限界だったため、いろいろ調べてみたところ、
ここの一番下に探し求めていた情報がありました。

背景画像を固定しない場合
・背景画像を設定したボックス内の左上が0%位置となる。
・IEも同様。

背景画像を固定した場合
・背景画像の0%位置は閲覧領域（自分の場合はウインドウの左上）となる。
・IEの場合、body要素とhtml要素に背景画像を指定した場合は上と同様。
・IE6でそれ以外の場合は背景画像を設定したボックス内の左上が0%位置となる。
・IE7でそれ以外の場合は閲覧領域（ウインドウ）の左上が0%位置となる。

ただ、自分の場合についてはdiv要素の位置が常にウインドウの左右中心で、上から200pxの位置にあったため、以下のように無理やり背景位置を固定とした。

IE以外のブラウザでは背景固定を設定しない（fixedにしなくても背景が固定されるから）で背景位置を００ポジションに設定。
IE6,IE7は背景画像を固定し、ウインドウの左上を始点として背景画像の位置を設定。
IE6は背景画像を固定にしても、背景画像の開始位置がdiv要素の左上になるためウインドウではなく、divボックスの左上を背景画像開始点とする。

Tags: css, Internet Explorer, バグ, ブラウザ

水曜日, 2月 24th, 2010 Internet Explorer コメントはまだありません