Chrome

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をかなり前から先行実装してたから。

火曜日, 9月 25th, 2012 browser, Chrome, css, Fire Fox, Internet Explorer コメントはまだありません

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のテキストリンクで、通常時とオンマウス時でリンク色を変えている場合にオンマウス時に下線の色だけ通常時の色になる！」

もう知りません。

Tags: , ,

火曜日, 2月 28th, 2012 browser, Chrome, css, design, History, html / xhtml, JavaScript, Links コメントはまだありません

カテゴリー

confidelic-logについて

アーカイブ

2024年4月
日 月 火 水 木 金 土
 123456
78910111213
14151617181920
21222324252627
282930