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

这是因为您给了您.circle的宽度和高度为 0，这意味着对象内部实际上没有空间，因此当您将跨度的宽度和高度设置为 100% 时，它的实际宽度和高度将为 0

如果你给你的圆圈一个实际的宽度和高度，而不是使用填充来制作形状，那么它应该可以工作

http://jsfiddle.net/pj3u5/

Answer 2

用于设置本演示<div>中所示的内容样式。

Answer 3

您必须为 IE 和 Chrome 使用不同的样式。不幸的是，某些样式在不同浏览器中的表示方式不同。