Google Chromeで、li::afterを使ったら、変な改行が起りませんか?

ここ2年程、WordPressサイトでも・CMSを使わないコンテンポラリーなサイトでも、サイトを作成する時は、Google Chromeを基準にしてレイアウトを調整していました。まずはGoogle Chromeでレイアウトのバランスを合わせ、それからFirefoxやIEの9そして8、Operaへと調整するブラウザを広げて、どのブラウザでも同じレイアウトとなる様にしていたんですね。

まあGoogle Chromeを信頼していたんです。(以前はFirefoxを基準にしていましたが。)

でも、ちょっと前からGoogle Chromeの挙動に「??」な事がいろいろ出てきて、信頼感が崩れかけているんですよ。

多分、26.0.1410.43にバージョンアップしてからだと思うんですが、このバージョンから挙動が変わった感じがするんです。

前回書いた「Chromeは、CSSのlinear-gradientにdegが使えない?」でもそうでしたが、以前と同じ様にGoogle Chromeでサイトを見ていて、それまでとはレイアウトが変わり、「なんか変だ?」と思う事が色々と出てきてるんです。

今回もこうしたGoogle Chromeの表示がおかしくなってる件についてです。

サイトを見ていて、今見ているページの位置を知るのにパン屑リストが有ると便利ですよね。

WordPressのサイトではPrime Strategy Bread Crumbというplug-inを使うと、パン屑リストが簡単に表示できる様になります。作ったWordPressサイトにはほぼインストールしている位、愛用しています。

が、最新版のGoogle Chrome(Windows・Macとも)だけ、パン屑リストの一番左の項目、つまり表示させているページのタイトルの最後の1文字が改行されるてしまうと言う現象が起きる様になったんです。

Google Chromeでの表示は下図の様になります。

Google Chromeのみ、変な改行が起きます

Google Chromeのみ、変な改行が起きます

SafariやIE、Firefox、Sleipnirなどでは下図の様に、変な改行は起きません。

Safariなどでは改行されない

Safariなどでは改行されない

結論から言うと、これはWordPressだけの現象ではなく、liなどにCSSの擬似要素の::afterを使い、そのcontentプロパティの値をnull(なにもないと言う意味でと記載)にしていると、Google Chromeでは、なぜかliタグで囲まれている文字が、最後に句読点が付いているのと同じ扱いを受ける様なんです。

ブラウザが表示ページをレンダリングする時、文字の長さを計算して文字を表示する幅を決めるのですが、目に見えない句読点的なものが付いた分文字が長くなり、表示前にレンダリングで算出された幅に入りきらず、句読点が付いた場合と同じ様に、直前の1文字も一緒に改行させていると考えられます。

言葉だけでは解り難いのでCSSコードを載せます。(.bread_crumbPrime Strategy Bread Crumbを使うと自動的に付く、パン屑リストを囲むnavタグのclassです。)

li:afterで各層の項目名の後にcontentプロパティの「>」を表示させ、パン屑リストの層と層との間「>」が有る様に見せています。ですが一番右の表示ページ分の項目名の後には「>」が必要無いので、li:last-child::afterとして一番右の項目を選ばせ、そのcontentプロパティは「」として、何も表示させていません。

このli:last-child::aftercontentプロパティの「」が、Google Chromeだけ句読点や?や!などと同じ扱いにされ、ワープロの禁則処理の様に句読点だけ行頭に表示しない様に、表示される項目名の最後の一文字も一緒に改行されるのですね。表示されたものを見ると、「」は見えませんから、最後の一文字だけ改行された様に見えるんですね。

これを回避するには、li内の文字、つまりaタグで囲まれるものを、white-speceプロパティのnowrapで改行禁止させればいいわけです。

つまりCSSを

とすることで、下図の様に解決です。

CSS修正したものをGoogle Chromeで表示させる

CSS修正したものをGoogle Chromeで表示させる

これって、Google Chromeのバグだと思います。

ついでにPrime Strategy Bread Crumbの使い方なども。

使い方は、まず、いつもの様にダッシュボード>プラグイン>新規追加からPrime Strategy Bread Crumbを検索して、インストール、有効化します。

そしてheader.phpパン屑リストを表示させたい位置に

を打ち込んでやれば表示されます。

しかし、このままでは下図の様に、単にパン屑リストの項目名が縦に並ぶだけになります。

Prime Strategy Bread Crumbレイアウト設定前

Prime Strategy Bread Crumbレイアウト設定前

なので、Google Chrome用の修正も含め、次の様にCSSでの調整が必要です。(WordPressサイトの使っているテーマのstyle.cssに書き込むだけでOK)

今回はWordPressというよりCSSについてでした。

追加(2013-04-21)
Prime Strategy Bread Crumbの代わりにWP SiteManagerのパン屑リスト機能を使ってパン屑リストを表示させているサイトでも同様の症状が起きてました。
まあ、Google Chromeの最新バージョン(26.0.1410.65)のレンダリング・バグだと思うので、CSSにli::afterを使うと、どこでも発生すると思われます。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください