css - Chrome でテーブルとテーブル セルを表示するバグ

Question

HTML

<div class="circle">
  <div class="content">
      <span><h3>heading</h3><p>slogan goes here</p></span>
  </div>
</div>

CSS

.circle {
  position: relative;
  width: 0;
  height: 0;
  padding: 20%;
  margin: 1em auto;
  border-radius: 50%;
  background: #a7cd80;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: table;
  overflow: hidden;  
}
.content span{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
 }
h3{
    line-height: 1px;
}

このコードはFirefoxでのみ機能しますが、Chromeなどでは機能しません。Firefoxではテキストがテーブルセルとして表示されますが、Firefoxではテキストが水平方向および垂直方向に中央に配置されている他のものでは表示されません。

デモ

これは視覚的に見ることができます

Answer 1

IE と Chrome で異なるスタイルを使用する必要があります。残念ながら、一部のスタイルは、ブラウザーによって表現が異なります。