cssの最近のブログ記事
もうIE6の利用率も下がってきていますが、昔よく発生したIE6のバグの回避方法です。
ボックス内で文字をfloatさせた時に、文章の最後の文字が二重に表示される現象があります。
--------------------------------------------
ありがとうございました。
ました。
--------------------------------------------
の様なイメージです。
これはボックスの幅を少し広げる事でも回避できますが、表示に影響が出てしまいます。
そこで色々聞いてみたら簡単な回避策があったんですね！
CSS制作を出来るだけ効率化させたい時のひとつの案としてライブラリの使用があります。
それが数パターンの定型フォーマット選択ではなく、自由にレイアウト構成を指定できたら楽ですね。
そんな事が実現できるのがYahooのaAjaxライブラリ「YahooUI Library」の「CSS Grid Builder」です。
cssをはじめたばかりの頃に疑問に思う様な些細な小ネタ関連。
text-indent:-9999px;等、text-indentでテキストを画面外に飛ばした場合、Firefoxではリンククリック時のリンクフォーカス点線が飛ばしたテキスト部分まで伸びて表示されてしまいます。
これを回避するには２通りの記述がありますが、対応としてはＮｏ２の方法がベストです。
★Ｎｏ１
●a {outline:none}
上記はリンクエリア点線自体が表示されなくなります。
Tabキーによるリンクフォーカスが見えなかったりと、アクセシビリティ的に難があります。
★Ｎｏ２
●a {overflow:hidden}
記述の通り、はみ出した部分のフォーカス点線は表示されません。ボタンエリアのみリンクフォーカス点線が表示されます。
