編集
この疑問は解決！
何か変なことして。
私は使用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/
編集
font-size は 2em なので、20px にする必要があります。開発者ツール (18px) を使用して IE8 で 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;
}
</p>