[a]IEとEdgeで参照すると空白文字 5 | BackYard

BackYard

Testing About Ameba Blog Page

ブラウザ間の表示の違いというのは、大変に困った問題です。「空白文字」に着けた背景色の表示が、ブラウザによって違う事に最近気付きました。

 

 

 

空白文字の背景色が欠ける

 

下のHTMLコードは「 全角空白を両側に付けた表題 」の一例で、両側に全角空白を付けた上で、背景色を被せて表題らしく見せるものです。
 

<p><span style="background: #ddd;"> 全角空白を両側に付けた表題 </span></p> 


下はこのHTMLコードを書き込んだものですが、Chrome・Firefox と IE・Edge とでは表示が違います。

 

 全角空白を両側に付けた表題 

 

下はハードコピーですが、IE・Edge では背景色が右端で切れてしまいます。

 

 

 

Chrome / Firefox では全角空白に背景色が着いてくれます。 元のHTMLコードを見た限りでは、どうもマイクロソフトのブラウザの方が間違っている様に思えます。

この問題は、上側の<p>が囲んでいない場合には生じないのですが、アメブロ編集画面は困ったことに<p>タグ囲みの仕様です。(おそらく全てのブラウザ環境で )

そのため、HTML編集で<p>タグを外さないと、IEとEdge では背景色が欠ける事になりますが、自動補完で<p>タグが囲ってしまいます。

 

私は最新版エディタの「マーカー」機能で通常画面から表題の体裁を作って来ましたが、Edgeで見るまで不覚にも気付きませんでした。 そもそも、空白文字でスペース調節をするのは、あまり賢い方法ではないとされています。 まあ、その弊害のひとつとも言えるのかも。

 

 

 

対策を考えてみました

 

被検索対策上は「h2」「h3」などを使い、ページ内容を纏めるのが良いとされています。 表題に関しては、この際にこれらをインライン指定する事にしました。 スマホ表示にはインライン指定のみが有効ですから、

 

◎「インラインの指定」はスマホ表示をコントロールするための最小限とする

◎「PCスキンの指定」は、インライン指定で足りないものを補う

 

という修飾の分担になります。

 

<h2 style="font-size: 1em;"><span style="background:#b0e0e6;padding:0 1em;">
~~~表題h2~~~
</span></h2>

<h3 style="font-size: 1em;"><span style="background:#ddd;padding:0 1em;">
~~~表題h3~~~
</span></h3>

 

の2種のインライン指定で表題を修飾します。

また、これだけではPC表示で表題と本文間の間隔が調節しずらく、margin指定をリセットしました。 また、スマホスキンを変えた場合などにインラインの font-size指定を変える可能性があるので、PC側で font-sizeを指定しました。

 

h2,h3,h4 {
    font-size: 1em !important;
    margin: 0 !important; }

 

このページの表題の表示は、これらの指定をしています。

 

〔追記〕2017.11.27

上記PCデザインスキンの指定は、問題がありました。

 

ページの表示様式には大雑把に言うと2種あり、なんらかの「括り」で複数ページを纏めて表示する場合(リスト・タイルのトップページや記事一覧、カテゴリ選択、年月選択など)とね単記事のみを表示する場合です。

 

この2様式で、記事タイトルが複数ページでは「h2」、単ページでは「h1」と、指定が変更されるので、上記の指定では複数ページの場合のタイトル文字サイズに影響します。

 

上記の指定を投稿本文内に限れば、こういった影響をなくせるので、PCデザインスキンの指定を以下に変更しました。

 

[data-uranus-component="entryBody"] h2,
[data-uranus-component="entryBody"] h3,
[data-uranus-component="entryBody"] h4 {
    font-size: 1em !important;
    margin: 0 !important; }

[data-uranus-component="entryBody"] h2 span,
[data-uranus-component="entryBody"] h3 span,
[data-uranus-component="entryBody"] h4 span {
    padding-top: 0.12em !important; }