IEバグ？inline配置されたli内で背景画像位置がおかしくなる
inline要素化したli.list01に、先頭にアイコンが付くよう背景画像を設定していたのですが、IEだけそのアイコンがli.list01内で再度出現すると言うバグがありました。
こんな感じ↓
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月期
現在自分の管理している３サイトでのブラウザシェア及び画面解像度
期間：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%
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;
}
最近見たページ
勉強させていただきました、ありがとうございます
float 関連の問題で覚えておくべき５つの対策
３）IE6でテキストの端が3pxだけずれる
dtをfloatする場合の注意点
dtの横に隣り合う部分がIE6で3px右にずれる
display:inline- blockがけっこう便利。だけど…
display : inline-block をつかったレイアウト
floatを使わずにinline-blockで横並びにする方法
ユーザーにとってはUIがすべて：UIデザイン原則をソシオメディアが語る
iPhone フレンドリーなサイトにするための10の方法
自動でフォントサイズが調整されるのを防ぐ
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;を設定することで問題を解消した。
最近見たページ
ザッカーバーグ、Twitterを「気にしすぎていた」ことを認める
High Performance Web Design-デザインから考えるハイパフォーマンスwebサイト-
文字の左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%
カテゴリー
- 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 | 31 | ||||