Question

我有以下css：

h1{
    font-family: "tablet-gothic-n9", "tablet-gothic", sans-serif;
    font-style: normal;
    font-weight: 900;
    text-rendering: geometricPrecision;
    letter-spacing: 0.05em;
}

这在Chrome，Safari和Firefox中精美地展示了文字。

IE不支持text-rendering，因此不会显示正确的字母对和连字。这导致字母具有更宽的间距。因此，我想为所有版本的IE设置letter-spacing: 0。

我在页面标题中的样式表链接下面执行了以下操作：

<!--[if IE]>
    <style>
        h1{
            letter-spacing: 0;
        }
    </style>
<![endif]-->

这在IE8和9中运行良好，但在IE10和11中失败，因为后面这些浏览器不读取条件注释。

我已尝试将以下内容添加到页面的头部：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

正如http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx

所建议的那样

但这似乎不起作用。

任何让IE10和11设置为letter-spacing: 0的解决方案？

Answer 1

对于IE9及更早版本，在大多数情况下你可以使用以下6,7,8和9（我测试了你的）：

  letter-spacing:.05em;
  letter-spacing:0px\9;

对于IE 10，请检查此IE 10 Hack article和StackOverFlow [问题]：How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code?

Answer 2

对于字距调整（可能是“正确字母对”在问题中的含义）和连字，您可以使用font-feature-settings属性。 IE 10及更新版本支持它，因此您无需“条件注释”（在IE 10及更新版本上不起作用）。

h1 { font-feature-settings: "kern", "liga" }

（可能会添加"clig"等，但我怀疑Tablet Gothic是否具有超出“标准连字”的连字。）

IE10 +中的条件注释来处理缺少文本呈现声明

2 个答案: