css - css添加的引号在Chrome和IE10中显示不同

Question

我有以下 CSS 代码:

blockquote {
    color:#bc6d10;
    font-family: 'FranklinGothicURW-Dem';
    font-style:normal;
    float:left;
    margin:0;
    font-size:1.5em;
    margin:20px 0 5px;}

blockquote p {
    font-size:1.4em;
    line-height:1em;
    float:left;
    width:88%;}

blockquote:before, q:before {
    content:"❞";
    font-size:6em;
    line-height:0.9em;
    float:left;
    width:12%;
}

它产生这个，即 Chrome:

在 IE10 中是这样的:

我的 CSS 不是很流利，所以我很难弄清楚为什么。有谁知道为什么吗？

Answer 1

也许尝试使用 rem 单位与 em。像这样的东西:

blockquote:before, q:before {
  font-size: 6rem;
  line-height: 0.9em;
}

这样你的大小将与基本字体大小相关，而不是父大小(IE 的计算方式可能与其他浏览器不同)。

它将在 Chrome 和 IE 中呈现相同的效果，但您可能需要稍微调整一下大小。