css - 导航中的字体在 IE8(XP 模式)中太大。页面的其余部分没问题。仅在导航中

Question

---

编辑

这个问题解决了!

---

有一些奇怪的东西。

我正在使用 html { font-size: 100% } 和 body {font-size: 62.5%} 所以我有 1em == 10px 在 CSS 中。我以前做过几次。

现在在我的页面上，除了 IE8 和 IE7(XP 模式)中的导航字体外，所有内容都可以正常使用字体大小

我在这里摆弄了相关的 HTML/CSS 代码 http://jsfiddle.net/gk4j9/3/

使用 modernizr 为渐变和阴影的浏览器能力切换

缩放为 100%
文本缩放中等

---

编辑
测试去这里
http://netrenderer.com/index.php
并测试这个地址
http://fiddle.jshell.net/gk4j9/3/show/light/

---

编辑
字体大小是 2em，所以应该是 20px。如果我在 IE8 中使用 Developer Tools (18px) 更改为 1.8em，它看起来与 IE9 和其他浏览器中的 2em 完全一样

---

HTML

<div class="l-fullwrap clearfix">
    <header class="page-header">
        <div class="l-header-nav-primary">
            <nav class="primary">
                <ul>
                    <li class="first has-children">
                        <a href="javascript:;">
                            <span>Item 1</span>
                        </a>
                    </li><li class="has-children">
                        <a href="javascript:;">
                            <span>Item 2</span>
                        </a>
                    </li><li class="has-children">
                        <a href="javascript:;">
                            <span>Item 3</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
</div>

---

CSS

html {
  font-size: 100%;
}

html, button, input, select, textarea {
  font-family: sans-serif;
  color: #222;
}

body {
  font-size: 62.5%;
  line-height: 1.4em;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}


nav ul, nav ol {
  list-style: none;
  list-style-image: none;
}


a, a:link, a:visited {
  color: #EFAA03;
}
a, a:link, a:visited {
  color: #EFAA03;
}
a:visited {
  color: #551A8B;
}
a, a:link, a:visited {
  color: #EFAA03;
}
a {
  color: #00E;
}








/* Primary Nav */
.l-header-nav-primary {
  position: absolute;
  right: 0px;
  top: 45px;
}
nav.primary {
  border-top: 1px solid #CDCDCD;
  border-bottom: 1px solid #AAAAAA;
}
nav.primary,
nav.primary li{
  display: inline-block;
  *zoom: 1;
  *display: inline;
  vertical-align: baseline;
}
.no-cssgradients nav.primary li,
nav.primary li{
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d2d2', endColorstr='#979696',GradientType=0 ); /* IE6-9 */
}
.cssgradients nav.primary li,
nav.primary li{
  line-height: 3.2em;
  padding-right: 1px;
  background: #979696; /* Old browsers */
  background: -moz-linear-gradient(top, #d2d2d2 0%, #979696 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2d2d2), color-stop(100%,#979696)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #d2d2d2 0%,#979696 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #d2d2d2 0%,#979696 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #d2d2d2 0%,#979696 100%); /* IE10+ */
  background: linear-gradient(top, #d2d2d2 0%,#979696 100%); /* W3C */
  filter: none;
}
nav.primary li.last{
  padding-right: 0;
}
.no-cssgradients nav.primary a,
nav.primary a {
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#b6b6b6',GradientType='0' ); /* IE6-9 */
}
.cssgradients nav.primary a,
nav.primary a{
  display: block;
  background: #b6b6b6; /* Old browsers */
  background: -moz-linear-gradient(top, #ffffff 0%, #b6b6b6 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#b6b6b6)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ffffff 0%,#b6b6b6 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ffffff 0%,#b6b6b6 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ffffff 0%,#b6b6b6 100%); /* IE10+ */
  background: linear-gradient(top, #ffffff 0%,#b6b6b6 100%); /* W3C */
  filter: none;
}
nav.primary a {
  display: block;
  padding: 0 10px;
  font-size: 2em;
  font-family: Calibri;
  font-weight: bold;
  color: #333333;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 1px 1px rgba(255,255,255, 0.65);
  height: 100%;
}
.no-textshadow nav.primary a span{
    display: inline-block;
    *zoom: 1;
    *display: inline;
    background-color: #E0E0E0;
    -ms-filter: "Chroma(Color=#E0E0E0) DropShadow(OffX=1, OffY=1, Color=#FFFFFF)";
    filter: Chroma(Color=#E0E0E0) DropShadow(OffX=1, OffY=1, Color=#FFFFFF);
}
.no-textshadow nav.primary li.active a span,
.no-textshadow nav.primary a:focus span,
.no-textshadow nav.primary a:hover span,
.no-textshadow nav.primary a:active span {
    display: inline-block;
    *zoom: 1;
    *display: inline;
    background-color: transparent;
    -ms-filter: "none";
    filter: none;
}

nav.primary li.active a,
nav.primary a:focus,
nav.primary a:hover,
nav.primary a:active,
.no-cssgradients nav.primary li.active a,
.no-cssgradients nav.primary a:focus,
.no-cssgradients nav.primary a:hover,
.no-cssgradients nav.primary a:active {
  filter: none;
}
.cssgradients nav.primary li.active a,
.cssgradients nav.primary a:focus,
.cssgradients nav.primary a:hover,
.cssgradients nav.primary a:active,
nav.primary li.active a,
nav.primary a:focus,
nav.primary a:hover,
nav.primary a:active {
  color: #FFFFFF;
  background:#231F20;
  text-shadow: none;
  outline: none;
}

Answer 1

我想通了。

在我的 XP 模式下，我没有安装 Calibri 字体。所以它使用不同的字体。

我该死!