サイトアイコン LUCKLOG

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点になります。

①アイコン

.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点になります。

テキスト部分

.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

結論

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

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

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

 

 

スポンサーリンク