Internet Explorer

Firefox15でword-breakが実装されたので全半角英数記号が連続入力される場所や禁則処理についてのあれこれ

連続する全半角英数記号が入力された場合の改行処理に対応するため、
今まで以下のような対応を行ってきました。

※方針としては、希望としては禁則処理を正しく処理したいが、
テキストが領域(幅300pxとする)をはみ出してしまうことでのレイアウト崩れは起こさないこと。
見えるべき情報が見えなくなるのは避けたいが、レイアウト崩れ防止を優先とする。
対応ブラウザは、IE6以上、safari最新版、Chrome最新版、Firefox最新版とする。

→結果、禁則処理よりレイアウトの維持が優先されるスタイル設定となった。

■第一世代(~2010年頃まで)
width:300px;
word-break:break-all;
overflow:hidden;

IE/safari/chromeにはword-breakで強制的に単語の途中改行。
Firefoxにはword-breakが効かず、overflowで領域からはみ出たテキストを消す。

■第二世代(いまここ)
width:300px;
word-break:break-all;
word-wrap:break-word;

IE/safari/chromeにはword-breakで強制的に単語の途中改行。
Firefox3でword-wrapが実装されたためoverflowでの処理からword-wrapに変更し強制改行。

■第三世代(今日から)
width:300px;
word-wrap:break-word;

Firefox15.0(2012/08/28 リリース)からword-breakプロパティが実装された。
これに伴い、上記設定に変更する。
IE/webkit/Firefoxすべてに適用。

※今頃気づいたこと…
第一世代の対応は今考えてみると間違いだったんじゃないか。word-wrapとoverflowにすべきだったか。
第二世代の時にはもうword-break:break-all;はいらなかったんじゃないかということ。
だってIEってword-wrapをかなり前から先行実装してたから。

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: , , ,

IEバグ?inline配置されたli内で背景画像位置がおかしくなる

inline要素化したli.list01に、先頭にアイコンが付くよう背景画像を設定していたのですが、IEだけそのアイコンがli.list01内で再度出現すると言うバグがありました。

こんな感じ↓
ws000000

HTML構造とstyle設定は以下のようになっていました。

<ul class=”listArea”>
<li class=”list01″><a href=””>あああ</a><a href=”” class=”delete”><img src=”delete01.gif” alt=”削除” /></a></li>
<li class=”list02″>いいいいいい</li>
</ul>

ul.listArea li{
display:inline;
}

ul.listArea li.iine{
margin-right:10px;
padding:0 0 0 15px;
background:url(icon01.gif) no-repeat 0 0;
}

ul.listArea li.list01 a img{
margin-left:5px;
}

<li class=”list01″></li>内では<a>要素が2個入っていましたが、この2個目の<a>の裏側(削除ボタンdelete01.gifの位置)に、liの先頭に配置したはずのアイコンが再度出てきました。

もともとは、
ul.listArea li.list01 a img{
margin-left:3px;
}
を、
ul.listArea li.list01 a{
margin-left:3px;
}
にしていましたが、この時には今回の問題が出ませんでした。

セレクタを<a>ではなく<img>への指定に変更したことが問題だったのかというと、これに関連するバグというのが思い当らず、margin設定に問題があるようにも思えませんでした。でもmarginが0だと問題が解消されました。

次にliに指定しているdisplay:inlineに問題があるのではと疑いました。
ここで必殺技のzoom:1;を指定したところ、見事問題は解消されました。
ul.listArea li{
display:inline;
zoom:1;
}

しかし、納得がいきません。
このIEのバグの原因がイマイチわからないままですが、一番納得できる解消法として、li.list01内の2個目の<a class=”delete”>に対するセレクタに変更すると言うことで今回は対応しました。
ul.listArea li.list01 a.delete{
margin-left:3px;
}

これはやっぱりバグでしょうか、IEさん…

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

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

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

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

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

今回のポイントは主に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;
}

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: , ,

文字の左1px分が欠ける現象

overflow:hidden;が指定された領域内で、文章の先頭文字が欠けてしまう現象が発生しました。
windowsのIEのみではなく、今回はFireFoxでも同様の現象が見られたため、この問題が解決するまでに結構な時間を・・・。

OSの問題?
フォントの問題?
フォントサイズの問題?
overflow:hidden;の指定領域の問題?

複数の観点から調べてみました。

まず、OSの問題かということについてですが、今回はwindowsのみで発生していてmacでは発生しなかったのでOSに何かヒントがないかということで、Windows XP での全角固定ピッチフォントの仕様変更を確認しましたが、今回使用しているフォントがプロポーショナルフォントであるMS Pゴシックであることからも、ここに問題があるとは思えません。

次にフォントの問題?かという点についてですが、たしかに問題が発生しているのはMS Pゴシックのときでそれを使用するwindows側ブラウザのみに発生している問題でした。
macはデフォルトのフォントが異なるためこの現象は発生しません。
フォントの表示領域に問題があるかもしれないが、確かではない感じです。

フォントサイズの問題?という点ですが、こちらも特定の大きさの場合のみ今回の現象が発生しました。
14px相当前後の場合に発生した問題です。
しかしこれを原因としてしまうと、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: , ,

IEでoutlineの領域が広がる

IE6,7でword-wrap:break-word;を適用したところ、とある問題(バグ?)に遭遇しました。

横幅指定のあるボックス内にテキストが入るような状況で、半角英数記号が連続する場合に、これまでは

word-break:break-all;

でIEには折り返しの対応をしていましたが、今回は

word-wrap:break-word;

で対応してみることにしました。

すると、折り返す半角英数記号がリンクの場合、outlineだけ右にはみ出てしまうのです。
かといって、クリッカブル領域もその分広がるのかというと、そうではないようです。

screenshot

残念な表示をしてくれるIEのために、結局これまでどおりの
word-break:break-all;
をIEのみに適用することにしました。残念。

ちなみにFireFoxなどのモダンブラウザではoverflow:hiddenないしはword-wrap:break-word;でこれまで対応してきました。

FireFoxで半角英数の折り返し処理を適用できるようになっただけでもまだマシということで…

Tags: , , , , ,

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

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

期間:2010/01/01-2010/01/31

前回計測からすでに8ヶ月程度経って、ブラウザシェアと解像度にも変化が出てきました。
以下のデータの中からはグルメ検索サイトがUU,PVともにトップで統計としてはそこが一番役に立つのではないでしょうか。
傾向としては、IE7からIE8への移行が多く、IE7よりもIE6を使用している人の方が多くなっているという現象や、横長のディスプレイを使用している人が増えてきたこと、そしてやはりスーマートフォンユーザーが少しずつ増加しているということでしょうか。

■ブログ(プライベート・アメブロ)
1. Internet Explorer—–70.78%    前回78.18%
—7.0 60.55%   前回79.73%
—6.0  22.02%   前回19.93%
—8.0  17.43%   前回0.33%
2. Safari—–12.34%    前回6.75%
3. Firefox—–7.14%   前回11.95%
4. Lunascape—–7.14%
5. Chrome—–2.60%    前回0.52%

1. 1280×800 —–27.92%    前回29.87%
2. 1024×768 —–24.68%   前回34.81%
3. 1680×1050 —–12.99%   前回5.19%
4. 1093×614 —–9.09%   前回5.19%
5. 1280×768 —–7.14%   前回3.64%
6. 320×396 —–5.84%   前回5.19%
7. 1400×1050 —–3.25%    前回3.38%
8. 1280×1024 —–1.95%   前回4.16%
9. 1366×768 —–1.30%   前回6.49%
10. 1440×900 —–1.30%   前回2.60%

■地方のシネコン
1. Internet Explorer—–86.47%   前回89.80%
—8.0   47.48%   前回2.88%
—7.0 26.60%   前回58.45%
—6.0   25.47%   前回37.61%
—5.5   0.29%   前回0.69%
—5.0  0.12%    前回0.10%
2. Firefox—–4.17%   前回3.82%
3. Safari—–3.97%   前回2.25%
4. NetFront —–2.28%   前回2.37%
5. Chrome—–1.22%   前回0.59%
6. Opera—–0.89%   前回0.86%
7. Lunascape—–0.45%   前回0.86%
8. Mozilla Compatible Agent —–0.34%   前回0.86%
9. Playstation 3—–0.09%   前回0.86%
10. Playstation Portable —–0.03%   前回0.86%

1. 1024×768 —–30.45%   前回37.44%
2. 1280×800 —–20.46%    前回20.03%
3. 1280×1024 —–16.70%   前回19.98%
4. 1440×900 —–4.91%   前回4.64%
5. 1366×768 —–4.72%   前回1.31%
6. 1680×1050 —–4.66%   前回4.05%
7. 1920×1080 —–2.08%
8. 1280×768 —–1.82%   前回2.32%
9. 320×396 —– 1.57%
10. 1920×1200 —–1.10%   前回0.95%

■地域グルメ検索サイト
1. Internet Explorer—–88.75%    前回91.14%
—8.0   42.31%   前回2.36%
—6.0  32.19%   前回42.84%
—7.0   25.08%    前回53.76%
—5.5   0.40%   前回0.62%
—5.01  0.01%
2. Firefox—–5.19%    前回4.38%
3. Safari—–3.62%   前回2.81%
4. Chrome—–1.26%   前回0.57%
5. Opera—–0.58%   前回0.83%
6. Lunascape—–0.21%

1. 1024×768 —–32.71%    前回40.66%
2. 1280×800 —–21.93%   前回20.45%
3. 1280×1024 —– 18.59%   前回20.69%
4. 1366×768 —–4.32%   前回0.82%
5. 1440×900 —–4.24%   前回4.01%
6. 1680×1050 —–4.17%   前回3.91%
7. 1280×768 —–1.72%   前回2.30%
8. 1920×1080 —–1.69%
9. 1920×1200 —–1.19%   前回0.79%
10. 320×396 —–1.03%

■Yahoo!ショッピング 寝具ショップ
1. Internet Explorer—–84.85%   前回86.37%
—8.0  52.69%    前回3.93%
—6.0  24.85%   前回37.70%
—7.0  22.21%   前回57.87%
—5.01  0.10%
—5.0  0.05%   前回0.18%
2. Firefox—–7.27%   前回7.89%
3. Safari—–4.65%   前回4.10%
4. Chrome—–1.27%   前回0.90%
5. Lunascape—–1.15%
6. Opera—–0.35%   前回0.47%

1. 1024×768 —–26.45%   前回36.90%
2. 1280×800 —– 21.75%   前回19.68%
3. 1280×1024 —–15.97%   前回17.69%
4. 1440×900 —–5.20%   前回5.47%
5. 1680×1050 —–5.16%   前回5.54%
6. 1366×768 —–4.37%   前回1.17%
7. 1280×720 —–3.67%   前回2.07%
8. 1920×1200 —–2.31%   前回2.34%
9. 1920×1080 —–2.23%
10. 1280×768 —–2.06%   前回2.23%

Tags: ,

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専用にハックをつける。

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;
}

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

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

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

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

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

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;
*background-position:50% 200px;
_background-position:0 0;
}

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

Tags: , , ,

2021年12月
 1234
567891011
12131415161718
19202122232425
262728293031