ios - Bootstrap 字体似乎在 Safari iOS 上被条纹化

Question

我创建了一个简单的应用程序，它使用 Bootstrap 版本 3.3.5 和一个带有下拉菜单的按钮:

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

如果你在 Safari iOS 上运行它，down图标似乎被剪掉了:



这个问题有解决方案吗？

Answer 1

我发现了问题，这是由 caret 造成的CSS类:

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid \9;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

我修改了以下行，来自:

  border-top: 4px dashed;

到

  border-top: 4px solid;

它工作正常。