てんぽ: li {display:inline}で半角英数が折り返されない対策

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

li {display:inline}で半角英数が折り返されない対策

2006年12月10日(日)

li要素の内容が半角英数文字で、li要素にdisplay:inlineが指定してあり、なおかつli要素のソースコードに改行や空白文字を含まない場合、 連続する半角英数字が改行されない問題が生じます。

li {display:inline;}

<ul>
<li>hankakueisuu</li><li>hankakueisuu</li><li>hankakueisuu</li>
</ul>

ソース内でli要素ごとに改行すればいいのですが、 FC2ブログのテンプレート用ブロック変数では繰り返し単位ごとに改行コードは挿入されない(参照:見えないところも見やすく)ので、 li要素の繰り返し部分に上記の問題が生じ得るわけです。 (ただし、この仕様はIE6のブロックボックス化した要素を含むリストアイテムの後ろに空行が入るバグへの対処法として機能している面もある。)

この問題への対処としてはli:after {content:" "}のように、after擬似要素を使ってli要素の後ろに空白を挿入する方法があります。 とはいえ、IEは7になってもafter/before擬似要素に対応していないので、これだけでは不十分なのですが。

#120
カテゴリ:HTML・CSS
タグ[ FC2ブログ IE CSS ]

同じカテゴリの記事

(-2件)

Morgoth:Re: li {display:inline}で半角英数が折り返されない対策

こんにちは。
自分も Tag Cloud をリストタグでマークアップするときにこの問題に遭遇しました。そして回避策を見つけました。li要素ごとに改行しなくても、

<ul>
<li>hankakueisuu
</li>
</ul>

このようにli要素内に改行を入れることで回避できました。スタンダードなブラウザはこれでOKみたいです。なぜこれで大丈夫なのか理由は分かりませんが・・・

  • 2006年12月11日(月)00:32:08
  • URL
  • 編集
みりばーる:>Morgothさん

まさにこれはli要素でマークアップしたタグクラウドを想定した問題でした。
終了タグの直前での改行のほかにも半角スペースを入れる手もありますね。ただ、W3C勧告の中には以下のような記述があります。
「開始タグ直後の行区切り及び終了タグ直前の行区切りは共に無視すべきである」
「著者は、ユーザエージェントが開始タグ直後または終了タグ直前の空白類をレンダリングするとは期待しないようにすべきである」
(http://www.w3.org/TR/html401/struct/text.html#h-9.1)
つまり、その回避策が有効なのはブラウザの実装がこの規則を守っていないためだと思います。

また、MacIE5を無視していいなら、display:inlineの代わりにfloat:leftを使ってもいいかもしれません(CSS2.1ではwidth:autoのフロートの幅は内容物に合わせて縮められる。MacIE5以外のモダンブラウザの実装もそうなっている)。

  • 2006年12月12日(火)00:37:00
  • URL
  • 編集
コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/120-1cc24c4a

<<「このキーワードはまだ登録されていません。」 | blockquoteで切る>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。