History

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 コメントはまだありません

最近見たページ

今年も勉強させていただきました、ありがとうございます。

Coding Contest #02
http://lp9cc.pxgrid.com/

inline-blockをie6，7でも対応させてFirefoxなどで隙間をなくす方法。ついでにブレッドクラムとCSS3でAppleメニュー作ってみた
http://worldwidedeb.net/2011/03/20/inline-block-ie6-7-css-apple

CSS IE6でliの隙間問題
http://underground7.blog116.fc2.com/blog-entry-15.html

OOCSS(Object-Oriented CSS)の考え方
http://d.hatena.ne.jp/in0in0/touch/20100208/1265657205

SEOの終わりとソーシャルとnanapiのコンテンツの未来
http://lite.blogos.com/article/3085/

New Mobile Safari stuff in iOS5: position:fixed, overflow:scroll, new input type support, web workers, ECMAScript 5
http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-input-type-support-web-workers-ecmascript-5

フォームとアクセシビリティ
http://www.kanzaki.com/docs/html/htminfo33.html

Scalable and Modular Architecture for CSS
http://smacss.com/book/

RewriteRule

Dependency Injection

viコマンド
http://yamabito.main.jp/linux/vi_commands.htm

CSS Nite LP 9.2 (reprise) フォローアップ
http://www.yomotsu.net/wp/?cat=17&paged=2

レスポンシブWebデザイン

もうlast-childとfirst-childくらい使いたいAdd Star

IE7で親要素と子要素の間にHTMLのコメントがあるとチャイルドセレクタなどが適用されない
http://ameblo.jp/regolbema/entry-10826427620.html

IE6、IE7、IE8におけるCSSの違いまとめ
http://s.news.mynavi.jp/news/2009/10/16/062/index.html

スマホ対応の新潮流「レスポンシブWebデザイン」とは？
http://ascii.jp/elem/000/000/613/613028/index-3.html

safari 　line-height:0　バグ

SVN コマンド　実行　中止

IE6, IE7でもRGBaを使う
http://css-eblog.com/csstechnique/rgba-for-ie.html

全てのtextareaを自動的にリサイズするJavaScriptとGreasemonkeyAdd Star
http://www.kanasansoft.com/weblab/2008/05/post_28.html

textareaの高さを自動調節
http://dev.chrisryu.com/2008/05/rej_resize_textarea_by_avascript.html

「内容に合わせて伸縮するテキストエリア」を Opera にも
http://d.hatena.ne.jp/miya2000/20071004/p0

ちょっと小細工：textareaの高さを自動調節
http://furyu.tea-nifty.com/annex/2008/05/textarea_f641.html

Resizable Textarea
http://userscripts.org/scripts/review/12933

textareaの高さを自動調節するブックマークレット
http://d.hatena.ne.jp/tanku/20080521/1211389954

textareaのサイズを入力にあわせて調整するＪａｖａＳｃｒｉｐｔ
http://dev.iralog.net/2008/05/textarea.html

Elastic – Dynamic Height Textarea Jquery Plugin | Unwrongest
http://unwrongest.com/projects/elastic/

オンラインデスクトップサービスとしてのWebOSの意味
http://d.hatena.ne.jp/NGC2237/20070311/1173712927

Stylus vs SASS vs LESS error reporting
http://tjholowaychuk.com/post/5002088731/stylus-vs-sass-vs-less-error-reporting

IE6 で position:relative; を指定した要素のレイアウトを JavaScrip で変更した時に位置がずれる際の解決方法
http://vosegus.org/blog/2010/10/ie6-positionrelative-javascrip.html

ネガティブマージンを使うなら position: relative; を併記
http://cameme.net/ie6%E3%83%90%E3%82%B0/Article2459/

devicePixelRatioについて調べてみたAdd Star
http://d.hatena.ne.jp/ksrtmyk/20110522/1306038375

スマートフォンサイトを制作する際に便利なサイト
http://k-nagara.jimdo.com/%E3%81%8D%E3%81%96%E3%81%BF%E3%81%AE%E3%82%8A/web/

水曜日, 12月 28th, 2011 History コメントはまだありません

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さん…

火曜日, 12月 13th, 2011 browser, css, History, html / xhtml, Internet Explorer, JavaScript コメントはまだありません

最近見たページ

勉強させていただきました、ありがとうございます

IEでのCSSのバグを回避するhasLayout

float 関連の問題で覚えておくべき５つの対策
３）IE6でテキストの端が3pxだけずれる

dtをfloatする場合の注意点
dtの横に隣り合う部分がIE6で3px右にずれる

display:inline- blockがけっこう便利。だけど…

display : inline-block をつかったレイアウト

floatを使わずにinline-blockで横並びにする方法

ユーザーにとってはUIがすべて：UIデザイン原則をソシオメディアが語る

iPhone 4に対応したWebサイトを作る方法

iPhone用CSS

iPhone フレンドリーなサイトにするための10の方法
自動でフォントサイズが調整されるのを防ぐ

金曜日, 7月 16th, 2010 History コメントはまだありません

最近見たページ

セレクタは右から左に解釈される

マークアップエンジニアと情報アーキテクチャ

ザッカーバーグ、Twitterを「気にしすぎていた」ことを認める

続・ハイパフォーマンスWebサイト-まえがき-

CSS セレクタの高速化の話を検証

IE で透過pngにopacity

floatしたボックスの親要素の内容物を表示する方法

Feng-GUI

High Performance Web Design-デザインから考えるハイパフォーマンスwebサイト-

m●xiが白い件

Webデザイン用モニタの選び方

配色パターンからWebデザインを考える

CSS3のでのボックス要素デザインを圧倒的に簡単化できる「CSS3 Click Chart」

近未来に頻繁に使われるであろうCSS3サンプル１０

Tags:

月曜日, 6月 28th, 2010 History コメントはまだありません

カテゴリー

confidelic-logについて

アーカイブ

2024年12月
日 月 火 水 木 金 土
1234567
891011121314
15161718192021
22232425262728
293031