SewiGの日記

■ [tDiary] CSSに関するバグ

普段、私はブラウザはOperaを使用していて、Internet Explorerで本日記の確認をしていませんでした。InternetExplorerユーザの方から文字が消えて見えると指摘があったので、Internet Explorerで確認すると確かに文字が消えていて、再描画すると元に戻ったり、再び消えるような表示になっていました。Firefoxでも確認しましたが問題は無くInternet Explorerのみの問題でした。

最近はInternet Explorerのシェアが下がっているとは言うもののWindows標準のブラウザでユーザも多いので無視できません。さらにInternet Explorer以外のブラウザの中には、SleipnirといったInternet Explorerのコンポーネントを利用したアプリケーションも含まれているようなので実際にはCSSのバグによる被害者はもう少し多いでしょう。

しかし、各ブラウザには多少細かいバグが含まれているため、このブラウザなら規格通りに正確に表示できるというWebブラウザは今のところありません。実際にCSS製作においてブラウザのバグのせいでブラウザやそのバージョンごとにCSSを切り替えるといった根気のいる作業が強いられるというのはどうかと思います。次期バージョンでは、まとめサイト*1に記述されているバグは修正してほしいと思います。

今回のCSSのバグは「背景色が指定された要素内にフロートがあるときに要素内の文字が消える」というもので解説ページ通りに対処しました。適用しているテーマは現在light-blueなので/diary/theme/light-blue/light-blue.cssを以下のように変更しました。

/*
1日の日記全体を囲む枠の設定
*/
div.day {
       width: 100%;　　　　　　　　/* ←この行を追加 */
       background-color: #fff;
       color: #000;
       border-style: solid;
       border-color: #48C0F0;
       border-width: 1px;
       padding-bottom: 0.5em;
       margin-top: 1em;
       background-image: url(light-blue_back2.gif);
       background-position: bottom;
       background-repeat: repeat-x;
}