現在作成中の新しい自社サイト。
以前から、CSS処理で気になっていたことが・・・・。それはFireFoxだけで表示されることなんだけどさ。
たとえば上部画像で言えば、「無料見積り」ボタン箇所。これはHTML上ではテキストなんだけど、cssで画像に切り替えて表示。
ただ、テキストを消すことができないので、cssにtext-indent: -99999pxと指示を入れて画面の外にテキストを飛ばして表示されないようにして居るんだけど。
FireFoxでこのボタンをクリックすると
このように、ボタンからtext-indent: -99999pxを指定した為にボタンから左側にかけてミシン罫のような物が表示される。
今までは、FireFoxだけで表示される現象で気にしていなかったんだけどね。
※理由は、アクセスログを確認してもFireFox訪問者は少ないから。
だからと言って放置しておくのはプロとしてはいかがな物か。と言うことで色々と調べてみたところ回避方法が見つかりました。
回避方法はcssに overflow:hidden と追加するだけ。では追加した状態でどうなるかというと
このように、「無料見積り」ボタンの周りだけにミシン罫が表示されるのでスッキリ！
IE6移行ではミシン罫が表示されないので、あくまでもFireFox対策だけどね。
そうそう、今となっては意識しなくて良いかもしれないけどIE5.5？IE5？では overflow:hidden を指示するとボタン自体が機能しなくなるらしいので注意してください。（動作確認できる環境がないので未確認です。）
コメントする