CSS で文字が消える不具合
WordPress で記事を投稿するときに、最初のタイトルタグの文字が消えてしまう不具合が発生。
下にスクロールして、また上の方に戻ってくるとまず消えている。
実際に起こったケース。
管理画面にログインしたあとに記事を見ると、最初の方に編集のリンクがでてくる。この「編集」は div.meta で囲まれているのだが、その後に h4 タグとかがあると文字が消えてしまう。
範囲選択してやると元に戻ったりするが、気になったので google パワーを消費。CSS 、消えるで検索したら一発ヒット。
IE6 で背景色/背景画像を指定している場合に、一部の文字列が消えることがあるらしい。
解決策は width を auto 以外に指定すること。
というわけで、 div.meta の後に使うのは h4 だが、一応それ以下の見出しタグすべてに width を指定してやった。
- div.storycontent h4 {
- width : 100%; /* div.meta の後で文字が消えることがある対策 */
- font-size : 12px;
- background-color : #38b48b;
- color : #ffffff;
- margin : 20px 0px 0.5em 0px;
- padding : 1px 2px 1px 10px;
- }
- div.storycontent h5 {
- width : 100%; /* div.meta の後で文字が消えることがある対策 */
- font-size : 12px;
- border-left : 5px solid #38b48b;
- margin : 20px 0px 0.5em 0px;
- padding : 1px 2px 1px 10px;
- }
- div.storycontent h6 {
- width : 100%; /* div.meta の後で文字が消えることがある対策 */
- font-size : 12px;
- border-bottom : 1px solid #38b48b;
- margin : 20px 0px 0.5em 0px;
- padding : 0px 2px 0px 10px;
- }
これで OK 。
記事「CSS の li に width を指定すると不具合が起こる」とは逆に、 width を指定しないと不具合が起こるというのだからどっちやねん。