css中字的大小,字体大小大于CSS中设置的大小

当我将字体大小设置为特定像素高度时，计算出的字体大小是我在CSS中设置的大小的1.333倍。但是，如果我将字体大小设置为百分比，则使用正确的大小。这种情况发生在我尝试的每个浏览器中，包括Firefox 3.6.28，Firefox 53.0.3(32位和64位)，Internet Exploiter，Safari，Chrome和Opera。 / p>

以下是问题的缩减示例：

TocMenu Test

body

{ background:#000000 url('/graphics/l5-back-eso1213a-2K.jpg') repeat fixed;

color:#ffffe8;

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:14px;

font-weight:normal;

}

img

{ border:0;

margin:0;

padding:0;

}

#menuRoot *

{ min-width:0;/* peek-a-boo bug fix for IE7 */

position:relative;/* peek-a-boo bug fix for IE6 */

}

#menuRoot img

{ padding:3px;

}

.tocRoot

{ padding:0;

}

.tocLevel1

{ font-size:16.8pt; /* 120% */

font-weight:bold;

margin-top:9px;

}

.tocLevel2

{ font-size:15.4pt; /* 110% */

font-weight:bold;

margin-top:6px;

}

.tocMenuOpen

{ background:none;

color:#ffff66;

list-style:none;

}

.tocMenu1

{ padding-left:30px;

}

.tocLink, a.tocLink

{ color:#99ff99;

text-decoration:none;

}

.tocBtn, .tocBtnNot

{ display:inline-block;

text-align:left;

vertical-align:text-top;

width:14px;

}

• 

  Home

  • Today's News

如果我将tocLevel1和tocLevel2 font-size值从像素高度更改为CSS注释中显示的百分比值，则页面可正常工作。

为什么每个浏览器决定使用比font-size值设置为特定高度时CSS中设置大三分之一的字体大小？