chromeとfirefox(IE)でdisplayが「table」のときborderの扱いが異なる

あまり発生する現象ではないかと思いますが、「吹き出しをつける」などcssで装飾を行う場合に、起きる可能性が多少あるかなという事象です。
僕の場合は、装飾を加えて、かつ、テキストを垂直方向真ん中に表示したかった場合に起きました。
あまり大きな問題ではありませんが、いろいろとパターンを見てみたいと思います。

スポンサーリンク

どういった事象？

実際にありそうな形で実装してみます。どういう違いがあるか確認してみてください。

下のレイアウトをChromeとFirefox（IE）で確認してみてください。
①の位置が少し異なるかと思います。少しでも違いがわかるように罫線を太くしています。
※罫線はわざと太くしています

1
テキスト

比較

画像にしてChromeとFirefox（IE）の2つを並べてみます。
比べてみると下図のように平行方向、垂直方向ともに「15px」ずつの違いがあります。
これは罫線の太さ分です。

※左：Firefox、右：Chrome
※上：Firefox、下：Chrome

 

なぜ起きる？

このような差が起きてしまう理由を見ていきます。

スタイルについて

まずは、どういったおよびスタイル（css）かをご覧ください。

まず、html

htmlは下記の通りシンプルなものです。

<div class="testbox">
<div class="textbox-no">1</div>
<div class="testbox-child">テキスト</div>
</div>

グレーの罫線の箱

.testbox {
  background: #fff;
  border: 15px solid #ccc;
  display: table;
  height: 200px;
  position: relative;
  max-width: 200px;
  width: 100%;
}

全スタイルを書きましたが、注目する点としては、以下の3点になります。

  • border: 15px solid #ccc;

    この罫線の幅分違いが出てきます。

  • display: table;

    子要素で垂直方向の中央にテキストを表示させるために指定しています。子要素にtable-cellを設定することで、垂直方向の中央を実現することができます。
    ※この指定がなければ、そもそも違いは発生しません

  • position: relative;

    「①」を左上に配置するために設定します。この指定があると「①の位置を決めるための基準要素」と認識され、この要素の左上が基準位置となります。

①アイコン

.textbox-no {
  background: #fff;
  border: 15px solid #333;
  border-radius: 80px;
  line-height:50px;
  position: absolute;
  left: -40px;
  top: -40px;
  text-align:center;
  width: 80px;
}

全スタイルを書きましたが、注目する点としては、以下の2点になります。

  • position: absolute;

    基準となる親要素の左上を基準位置として、その位置からの絶対値に配置します。

  • left: -40px;、top: -40px;

    子要素の位置を指定します。基準値から左上配置します。
    指定の値は同じですが、FirefoxとChromeで位置が異なります。

テキスト部分

.testbox-child {
  display: table-cell;
  height: 200px;
  text-align: center;
  vertical-align: middle;
  width: 100%;
}

こちら違いの発生には無関係です。

ただ、この要素を垂直方向に中央配置したいときに起こりやすい現象かとは思います。
※「display: table-cell;」、「vertical-align: middle;」←これらで中央配置にします

基準位置（点）に違いがありそう

①は絶対位置に配置されます。そこがずれていますので、基準となる位置自体が違っていると想像できます。

それを確かめるために、①の〇を取り除き、絶対位置も下記のように0、0とし、基準位置にします。

textbox-no2 {
  background: #fff;
  line-height:1;
  position: absolute;
  left: 0;
  top: 0;
}

それでは実際にFirefox、Chromeでご確認ください。
基準位置の違いははっきり分かるのではないでしょうか？

1
テキスト

比較（基準位置に違いがある）

画像にしましたので、ご覧ください。
基準がどこにあるかはっきりしました。

  • Firefox・・・罫線も要素の一部である（基準位置が罫線上になる）
  • Chrome・・・罫線は要素の一部ではない（基準位置が罫線に被らない）
※左：Firefox、右：Chrome

結論

やはりChromeとFirefoxで基準の位置が異なるようです。
はっきりとした理由は不明ですが、おそらく罫線の扱いが異なるのでしょう。

もしブラウザ間でこのような違いがあったら、これが理由かもしれません。推測の域は越えませんが、理由はこのあたりかと思います。理由がわかれば、htmlの構造と、cssの調整で回避できるかと思います。どうしようもない場合は別のスタイルを考えたり、重要テキストで無ければ画像化も検討できるかと思います。

原因を探してると案外時間が経っているということはよくあります。もしも、原因究明の時間削減に貢献できれば幸いです。

 

 

スポンサーリンク