新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

Win版IEにおけるCSSのバグ

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

最近では当たり前のように使われているCSSですが、
最も多くの人が使っているに違いないWindows版Internet Explorerにおいて、
数多くのバグ(仕様無視)が報告されている。

スポンサーリンク
 

その中のひとつにハマった(泣

それは

li要素やli要素の子孫要素の幅が指定されているとリストマークが下方にずれる

というもの。

コンテンツメニューはなるべくリスト形式で表示したほうがSEO上よいみたいなので、
リスト表示させたボタンを等間隔に並べようとしたところ、
Mac版SafariとWin版IEでどうしても間隔が合わない。
Win版IEの方で5pxほど余計に間隔があいてしまう。
そこでいろいろ調べて辿り着いた答えがWin版IEのバグでした。
バグにあわせてデザインするのも癪なので需要無視してSafariにあわせ、
CSSハック」なる技でWin版IEに対応させようと思ってます。

■17時追記
原因がわかりました。
まず、バグってたのが上記の状態(もあったのですが)だけではなく、
liタグ内にimgタグを置くことによるどちらかというとタグレベルでのバグでした。
で、どう対応したかですが、
1. liタグ内の文字の大きさをCSSでゼロにする。
これでとりあえず解決したのですが、文字の大きさがゼロってのが
スパム扱いされないかと気になって。
2. liタグ内のimgタグにCSSでvertical-align:topの指定をする。
でも直りました。

CSSハック使わずにすみました。やれやれ。。

 - Webデザイン, ユーザビリティ

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

no image
Web制作に役立つブログ

1年以上前の記事です。内容が古い可能性があります。Web制作に役立つブログを紹介 …

CSS2.1まとめ書き-font編(HTML・CSSリファレンス)

1年以上前の記事です。内容が古い可能性があります。HTML5やCSS3がそろそろ …

バーチャルキーボードで未来のインターフェース実現へ

1年以上前の記事です。内容が古い可能性があります。レーザーでキーボードを再現する …

Android版ツイッター(Twitter)公式アプリは全ツイートを拾ってくれない

1年以上前の記事です。内容が古い可能性があります。いろいろあったもののAndro …

Illustrator(イラストレーター)を使ってWebサイトのデザインをする際の注意点

1年以上前の記事です。内容が古い可能性があります。自分、基本的にIllustra …

ワードプレス(WordPress)とツイッターを連携「Twitter Tools」 #wp

1年以上前の記事です。内容が古い可能性があります。さて、つぶくまにワードプレスを …

世の中進んでる。スマホ(スマートフォン)で操作するシャワートイレとそれをハッキングする人たち

1年以上前の記事です。内容が古い可能性があります。実際、そういう人たちが現れたわ …

「Google Reader」のあと何使う?「livedoor Reader」?「Feedly」?それとも「Gunosy」?

1年以上前の記事です。内容が古い可能性があります。先日、ネタにしたように「Goo …

ツイッター(Twitter)とはなんなのか?

1年以上前の記事です。内容が古い可能性があります。今さら「ツイッター(Twitt …

自分を自分の作ったリストに入れたり外したりする方法(ツイッター)

1年以上前の記事です。内容が古い可能性があります。いつの間にやらつぶくま自身がつ …

血液型オヤジ