3

我正在尝试在圆圈内设置数字样式，但它在 Chrome 中的外观与在 iOS 上的外观不同。

在 Chrome 上预览

在此处输入图像描述

在 iOS 上预览

在此处输入图像描述

请注意，这些数字不是垂直居中于 iOS 上的。

是的，我已经尝试添加vertical-align: center;，但它不会成功。

这是我的 CSS

.circle {
   display: inline-block;
   text-decoration: none;
   width: 20px;
   height: 10px;
   padding: 3px;
   background: #7DBCD8;
   border: 1px solid #599DBB;
   color: #FFF;
   text-align: center;
   vertical-align: top;
   margin: 3px 3px 0 0;
   font-size: 10px;
   font-family: Arial, Helvetica, sans-serif;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px; 
}

与 HTML

<span class="circle">5</span>
<span class="circle">15</span>
<span class="circle">125</span>

这是此示例的 JS Fiddle。我怎样才能让它在 iOS 上看起来一样？

我还尝试了 iOS 原生的各种其他字体，但问题仍然存在。

4

3 回答 3

1

centervertical-align不是该属性的有效值。同样，这个问题似乎不是 iOS 特定的，因为我在 Windows 7 上的 Chrome 上也遇到了这个问题，您的网站可能已被缓存。

解决问题的一种方法（您的字体似乎太大而无法放入小容器中）是简单地将跨度的高度增加到 12px：JSFiddle demo。

另一种方法是替换height:12px为line-height:10px. JSFiddle 演示。

这两种方法都会增加跨度的高度，我不确定这是否对您的情况不利。

于 2013-05-29T14:08:27.727 回答
0

尝试设置line-height: 1em。

于 2013-05-29T14:07:40.437 回答
0

垂直居中一直是一个巨大的痛苦。我喜欢使用表格单元，它们似乎是解决问题的一个公平的跨浏览器解决方案。再说一次，我自己只是个菜鸟。

我会做的是：

/* Not even touching this */
.circle {
  display: inline-block;
  text-decoration: none;
  width: 20px;
  height: 10px;
  padding: 3px;
  background: #7DBCD8;
  border: 1px solid #599DBB;
  color: #FFF;
  text-align: center;
  margin: 3px 3px 0 0;
  font: 10px Arial, sans-serif;
  border-radius: 999px;
}

/* to make your sub-span in to a table */
.circle > span {
  display:table;
  width:100%;
  height:100%;
}

/* to make your sub-sub-span in to a table cell */
.circle > span > span {
  display:table-cell;
  vertical-align:middle;
}

和

<span class="circle">
  <span>
    <span>
      5
    </span>
  </span>
</span>

<span class="circle">
  <span>
    <span>
      5
    </span>
  </span>
</span>

<span class="circle">
  <span>
    <span>
      5
    </span>
  </span>
</span>

如果这确实是您的问题，这将真正垂直对齐您的数字...

于 2013-05-29T14:35:23.800 回答