加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 中呈现相同的效果，但您可能需要稍微调整一下大小。

Answer 2

据我所知，您必须在 css..

中使用一些调整

请测试此代码，因为我无法测试..

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.entry-content blockquote {font-size:20px;}
     blockquote::before, q::before 
     {
         margin-top:-53;
         margin-left:-20;
         font-size:6.6rem;
     }
}

让我知道它是否有效..

是的，Slavenko 的回答比我的好，所以你可以将两者结合起来..只需更改大小但不要忘记更改边距顶部，因为它必须..行高在那里不起作用..

抱歉，如果它无法正常工作，因为我之前与您讨论过它未经测试..

已更新我刚刚更改了大小和边距，请重新测试..

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

Quotation symbol added with css is displayed differently in Chrome and IE10

css

internet-explorer

google-chrome

blockquote