Fire Fox
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をかなり前から先行実装してたから。
Firefoxの引越し
古いWindows XPのPCからWindows 7のPCへ引っ越しました。
Firefoxのブックマーク、アドオン、そのた設定の全てを新しいPCのFirefoxに移動します。
Firefoxのバージョンは揃えておいたほうがいいかもしれないです。
スタンドアロンで他のバージョンのFireFoxを入れていたりすると少しフォルダ名などで迷うかもしれないですが、ほぼこんな手順です。
■古いPC側(XP)
はじめにFirefoxを終了するのと隠しフォルダが表示されるようにしておく。
マイコンピュータ→ローカルディスク(C:)→Documents and Settings→（ユーザ名）→Application Data→Mozilla→Firefox→Profiles
ここに、xxxxx.defaultというフォルダがあるので、丸ごとコピーし新しいPCのデスクトップにでもコピーしておく。
もしかするとxxxxx.defaultではなく、xxxxxx.3betaになっているひともいるかも。
■新しいPC側(7)
まずFirefoxを終了する。
コンピューター→ローカルディスク(C:)→ユーザー→（ユーザー名）→AppData→Roaming→Mozilla→Firefox→Profiles
ここに、yyyyy.defaultというフォルダがあるので、先ほど古いPCでコピーしたxxxxx.defaultの中身をyyyyy.defaultに上書きする。
これで完了。
ブラウザシェアと画面解像度のランキング 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%
文字の左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くらい必要になります。
ブラウザシェアと画面解像度のランキング 2010年1月期
現在管理している4サイトでのブラウザシェア及び画面解像度
期間：2010/01/01-2010/01/31
前回計測からすでに８ヶ月程度経って、ブラウザシェアと解像度にも変化が出てきました。
以下のデータの中からはグルメ検索サイトが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%
ブラウザシェアと画面解像度のランキング 2009年4月期
現在管理している4サイトでのブラウザシェア及び画面解像度
期間：2009/04/01-2009/04/30
■ブログ(プライベート)
1. Internet Explorer—–78.18%
—7.0 79.73%
—6.0 19.93%
—8.0 0.33%
2. Firefox—–11.95%
3. Safari—–6.75%
4. Netscape—–2.08%
5. Chrome—–0.52%
6. Opera—–0.52%
1. 1024×768 —–34.81%
2. 1280×800 —– 29.87%
3. 1366×768 —–6.49%
4. 1680×1050 —–5.19%
5. 1280×1024 —–4.16%
6. 1280×768 —–3.64%
7. 1400×1050 —–3.38%
8. 1920×1200 —–2.86%
9. 1440×900 —–2.60%
10. 800×600 —–1.82%
■地方のシネコン
1. Internet Explorer—–89.80%
—7.0 58.45%
—6.0 37.61%
—8.0 2.88%
—5.5 0.69%
—5.0 0.10%
2. Firefox—–3.82%
3. NetFront —–2.37%
4. Safari—–2.25%
5 Opera—–0.86%
6. Chrome—–0.59%
1. 1024×768 —–37.44%
2. 1280×800 —– 20.03%
3. 1280×1024 —–19.98%
4. 1440×900 —–4.64%
5. 1680×1050 —–4.05%
6. 1280×768 —–2.32%
7. 1366×768 —–1.31%
8. 240×400 —–1.07%
9. 1400×1050 —–1.02%
10. 1920×1200 —–0.95%
■地域グルメ検索サイト
1. Internet Explorer—–91.14%
—7.0 53.76%
—6.0 42.84%
—8.0 2.36%
—5.5 0.62%
—5.0 0.19%
2. Firefox—–4.38%
3. Safari—–2.81%
4. Opera—–0.83%
5. Chrome—–0.57%
6. Netscape—–0.05%
1. 1024×768 —–40.66%
2. 1280×1024 —– 20.69%
3. 1280×800 —–20.45%
4. 1440×900 —–4.01%
5. 1680×1050 —–3.91%
6. 1280×768 —–2.30%
7. 1152×864 —–1.10%
8. 1400×1050 —–1.02%
9. 1366×768 —–0.82%
10. 1920×1200 —–0.79%
■Yahoo!ショッピング 寝具ショップ
1. Internet Explorer—–86.37%
—7.0 57.87%
—6.0 37.70%
—8.0 3.93%
—5.0 0.18%
—5.5 0.18%
2. Firefox—–7.89%
3. Safari—–4.10%
5. Chrome—–0.90%
6. Opera—–0.47%
4. Netscape—–0.04%
1. 1024×768 —–36.90%
2. 1280×800 —– 19.68%
3. 1280×1024 —–17.69%
4. 1680×1050 —–5.54%
5. 1440×900 —–5.47%
6. 1920×1200 —–2.34%
7. 1280×768 —–2.23%
8. 1280×720 —–2.07%
9. 1366×768 —–1.17%
10. 1400×1050 —–0.86%
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;}
/**/
とする。
カテゴリー
- 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 | ||||