：在 windows/mac Chrome 中内容占用空间不同之前答案

【问题标题】：:before content taking up space differently in windows/mac Chrome：在 windows/mac Chrome 中内容占用空间不同之前
【发布时间】：2016-03-13 09:58:13
【问题描述】：

Chrome for Windows 和 Chrome for Mac 处理在 CSS 中添加到 :before 的内容的方式略有不同。

这是以下内容的 CSS：

.s-smiley:before {
  content: "\EA20";
}

 .s-smiley {
  color: white;
  background: #D8D8D8;
  margin-top: 46px;
  margin-right: 16px;
  padding: 9px;
  font-size: 37px;
  line-height: 29px;
}
 .s-smiley {
  background: #50E3C2;
}

.s:before {
    display: inline-block;
    font-family: symbols;
    font-style: normal;
    font-weight: 400;
    line-height: 37px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

问题在于，在 Windows 中 - 内容似乎被下推并占用了空间。还有人知道这个问题吗？有解决办法吗？

Windows 版 Chrome：

Mac 版 Chrome：

【问题讨论】：

为之前添加一个显示类型，例如 display:block 声明了高度和宽度
@VictorRadu - 抱歉，我错过了一行 CSS - 我将 :before 设置为内联块。但这无济于事。即使我确实阻止并设置了高度，它也只是切断了字体的底部，而不是把它往上撞。

标签： css macos google-chrome

【解决方案1】：

没有完整的代码很难说，但试试这个：

.s:before {
    display: block;
    float:left;
    font-family: symbols;
    font-style: normal;
    font-weight: 400;
    height: 37px;
    line-height:37px;
    overflow:hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

http://jsfiddle.net/kmrjy11d/

还要确保你的字体文件是正确的

【讨论】：