Bloody Mary - blog

Bloody Mary 別館

CSS で文字が消える不具合

CSS で文字が消える不具合

WordPress で記事を投稿するときに、最初のタイトルタグの文字が消えてしまう不具合が発生。
下にスクロールして、また上の方に戻ってくるとまず消えている。

実際に起こったケース。

管理画面にログインしたあとに記事を見ると、最初の方に編集のリンクがでてくる。この「編集」は div.meta で囲まれているのだが、その後に h4 タグとかがあると文字が消えてしまう。

範囲選択してやると元に戻ったりするが、気になったので google パワーを消費。CSS 、消えるで検索したら一発ヒット。

IE6 で背景色/背景画像を指定している場合に、一部の文字列が消えることがあるらしい。
解決策は width を auto 以外に指定すること。

というわけで、 div.meta の後に使うのは h4 だが、一応それ以下の見出しタグすべてに width を指定してやった。

  1. div.storycontent h4 {
  2.     width              : 100%;    /* div.meta の後で文字が消えることがある対策 */
  3.     font-size          : 12px;
  4.     background-color   : #38b48b;
  5.     color              : #ffffff;
  6.     margin             : 20px 0px 0.5em 0px;
  7.     padding            : 1px 2px 1px 10px;
  8. }
  9.  
  10. div.storycontent h5 {
  11.     width              : 100%;    /* div.meta の後で文字が消えることがある対策 */
  12.     font-size          : 12px;
  13.     border-left        : 5px solid #38b48b;
  14.     margin             : 20px 0px 0.5em 0px;
  15.     padding            : 1px 2px 1px 10px;
  16. }
  17.  
  18. div.storycontent h6 {
  19.     width              : 100%;    /* div.meta の後で文字が消えることがある対策 */
  20.     font-size          : 12px;
  21.     border-bottom      : 1px solid #38b48b;
  22.     margin             : 20px 0px 0.5em 0px;
  23.     padding            : 0px 2px 0px 10px;
  24. }

これで OK 。

記事「CSS の li に width を指定すると不具合が起こる」とは逆に、 width を指定しないと不具合が起こるというのだからどっちやねん。

Updated: 2012/6/5 火曜日 — 15:52:46

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Bloody Mary - blog © 2008 - 2021