browser
max-heightとvertical-alignの組み合わせによる表示不具合
スマホ向けのコーディングをしていた時に、どうしても思い通りの配置にできない現象が発生してしまった。
以下のような条件で作成していた。
・元画像サイズ 縦26px 横40px を縮小して表示するため max-width と max-height をそれぞれ20pxと指定。
・この画像の外側には２pxのボーダーを設定し、固定サイズ(縦20px横20px)のボックス内に配置する。
・この時、内側の画像は、左右中央・上下中央配置とする。
タグはこんな感じ
＜p class="gazou"＞＜a＞＜img src="img/001.jpg" alt="画像" /＞＜/a＞＜/p＞
CSSはこんな感じ
p.gazou{
margin:3px 5px 2px 0;
}
p.gazou a{
display:table-cell;
width:20px;
height:20px;
border:2px solid #CCC;
-webkit-border-radius:2px;
text-align:center;
}
p.gazou img{
max-width:20px;
max-height:20px;
vertical-align:middle;
}
こうした時、画像の上に少し余分な余白が発生してしまい、上下中央には配置できなくなり、2~3pxほど下に寄った配置になってしまった。
これを元画像サイズのまま使用した場合はきちんと上下中央に配置できた。
画像サイズを半分のサイズにして配置したのだが、元サイズ縦40px横26pxが縮小されて縦13px横20pxになったため、それを20px20pxの枠内に収めた場合、上下どちらかに1pxの配置ずれが起こるのはやむを得ないが、今回はそれ以上のずれとなった。
また、vertical-align:middle;が有効になる場合のセレクタも、max-height、max-widthの使用有無により変わる結果となった。
今のところ解決策が見つかっていないが、max-とvertical-alignの組み合わせは相性が悪いのかなという感じです。
とりあえず解決策としては画像をCSSで縮小するんじゃなくて、プログラム側で半分サイズにするかな。
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に上書きする。
これで完了。
ブラウザシェアと画面解像度のランキング 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%
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年に発見するようなバグでもないかもしれませんがメモしておきます。
Chromeでフォントサイズ10px相当の場合にリンク下線が消える
こんなバグが上がってきたのでメモ。
【現象】
10pxのテキストリンクをマウスオーバーした場合の下線が表示されません。
※Chromeで発生。ブラウザの拡大/縮小が100%の状態で表示されません。(110%では表示されます。)
【期待値】
Chrome使用時、テキストリンクをマウスオーバーした場合の下線が表示されること
まずリンクへのtext-decolationの設定は、このようにしていた。
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:underline;}
a:active{text-decoration:underline;}
a:focus{text-decoration:underline;}
この設定が入っていたにもかかわらず、10pxのテキストリンクにマウスカーソルが乗ってもリンク下線が出なかった。
しかし、他の場所にある同じ条件のリンクでは、下線が出るケースがある。。。。。
スタイルの影響が考えられるとすれば…
line-hightか、paddingか、marginか、font-sizeか、font-familyか…
しかし、この辺り変えてしまうと他のブラウザにも影響があるので、Chromeだけ何とか対応したいが、調べていくとどうもChromeのバグっぽい。
それぞれのプロパティを少しずつ変えてみたところ、
line-hight…変えても効果なし
padding…padding-bottom: 1px;を入れると下線が出た。
margin…変えても効果なし
font-size…9pxでは下線が出ないが、11pxなら出る。
font-family…arialを指定したら下線が出た。sans-serifやMS Pゴシックでは下線が出ない。
という結果に。
余白やフォント設定が影響している感じはするが、どうにもつかみどころのない感じ。
しかもついでに違うバグまで見つかってしまった。。。。。。。。。。
「10pxのテキストリンクで、通常時とオンマウス時でリンク色を変えている場合にオンマウス時に下線の色だけ通常時の色になる！」
もう知りません。
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;
}
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;を設定することで問題を解消した。
カテゴリー
- 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 | ||||