Question

我使用HTML和CSS做了一个简单的导航栏。

在IE11中，font-size比其他浏览器小得多。在我的.css文件中，我设置了body { font-size:16px; }，我想为该文档设置默认font-size。

对于所有其他元素，我使用em个单位。

我在导航栏中为font-size:1.5em设置了<a>，24px，但是IE11忽略了这一点，而字体大小只有16px。网站上的其他一些文字（h1，h2，span）也会发生同样的事情。

当我检查元素时，我看到IE11显示1.5em大小作为分配给它的大小，但计算结果仅为16px。其他浏览器（包括Edge）正确显示网站。

CODE：

＆＃13;

* {
  border: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
  line-height: normal;
  list-style-position: inside;
}
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  color: #666;
  font-family: 'Roboto', Arial, Tahoma, sans-serif;
  font-size: 16px;
  font-weight: normal;
  padding: 0;
  margin: 0 auto;
  background-color: #fff;
}
nav#top {
  float: right;
  display: inline-block;
}
nav#top ul {
  list-style: none;
  display: inline;
}
nav#top ul li {
  list-style: none;
  display: inline;
  float: left;
}
nav#top ul li a {
  display: block;
  float: left;
  padding: 30px 10px;
  font-size: 1.5em;
  font-family: 'Lato', sans-serif;
  font-family: 'Arimo', sans-serif;
  color: #fff;
  text-shadow: 1px 1px 1px #060;
}

＆＃13;

<nav id="top">
  <ul class="clearfix">
    <li><a href="page1/">Label 1</a>
    </li>
    <li><a href="page1/">Label 1</a>
    </li>
    <li><a href="page1/">Label 1</a>
    </li>
    <li><a href="page1/">Label 1</a>
    </li>
    <li><a href="page1/">Label 1</a>
    </li>
  </ul>
</nav>

＆＃13;

我用Google搜索了font-size:100% !important和类似的解决方案，但没有发现任何有效的方法。

Answer 1

请试试这个：

nav#top ul li a {
    color: #fff;
    display: block;
    float: left;
    font-family: "Arimo",sans-serif;
    font-size: 24px;
    padding: 30px 10px;
    text-shadow: 1px 1px 1px #060;
}

Answer 2

这不符合每个用例，但这种方式可以大大减轻我的头痛。

为了获得整体良好的跨浏览器体验，我建议您一般从body标签中删除字体大小，让浏览器发挥其魔力。

虽然 - 乍一看 - 似乎你可能无法控制设计，但我知道如果你删除了大部分字体大小的属性，你会得到更一致的结果。

IE 11忽略字体大小

2 个答案: