代码之家  ›  专栏  ›  技术社区  ›  FKEinternet

字体大小大于CSS中的设置

  •  0
  • FKEinternet  · 技术社区  · 8 年前

    当我将字体大小设置为特定像素高度时,计算出的字体大小是我在CSS中设置的大小的1.333倍。但是,如果我将字体大小设置为百分比,则使用正确的大小。这种情况发生在 每一个

    下面是一个简化的问题示例:

    <?xml version="1.0"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>TocMenu Test</title>
        <link href="/style/styles.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            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;
            }
        </style>
    </head>
    <body>
    <ul id="menuRoot" class="tocMenuOpen tocRoot">
        <li>
            <p class="glueDown">
                <span class="tocBtn" id="menuHome_bn"><img src="/graphics/imgOpen.gif" alt="menu state indicator" /></span>
                <a href="//L5Development.com" class="tocLevel1 tocLink" title="The L5 Development Group - A For-Profit Private Enterprise Space Exploration and Development Program">Home</a>
            </p>
            <ul id="menuHome" class="tocMenuOpen tocMenu1">
                <li>
                    <p class="glueDown">
                        <span class="tocBtnNot">&nbsp;</span>
                        <a href="/TodaysNews.php" class="tocLevel2 tocLink" title="News about The L5 Development Group, space travel, space business, and related issues">Today's&nbsp;News</a>
                    </p>
                </li>
            </ul>
        </li>
    </ul>
    </body></html>
    

    如果我改变 tocLevel1 tocLevel2 font-size 从像素高度到CSS注释中显示的百分比值,页面工作正常。

    每一个 浏览器决定使用比CSS中设置的字体大三分之一的字体 字体大小 值设置为特定高度?

    1 回复  |  直到 8 年前
        1
  •  1
  •   Tim Fountain    8 年前

    你在混音 px pt (点)字体大小。14像素的120%将为16.8 二甲苯 ,但您已将单位指定为点,这些点不是同一事物,并且更大。

    我建议坚持使用一个单位,以便相对容易地调整。(或者使用绝对测量值作为基准尺寸,其他所有测量值均使用相对测量值。)