Question

我的网站非常简单。在某些情况下，字体大小似乎异常变化。例如，当我单击主页中的链接时，打开的新页面具有不同的字体大小。而且似乎这种行为只发生在Chrome上。请看下面的图片。对于每张图片，您可以在左侧看到主页中的字体大小，右侧可以看到单击链接打开的页面中的字体大小。

Internet Explorer（字体大小正常）

enter image description here

Firefox（字体大小确定）

enter image description here

Chrome（字体大小不同）

enter image description here

这是我的两个网页使用的CSS代码（在此之前有一个重置标准文件）：

@charset "utf-8";
/* CSS Document */

body
{
    background-color:#FFF;
    font-size:100%;
    font-family:Verdana, Geneva, sans-serif;

}

.centered
{
    margin:0 auto;
}

.centered-content
{
    text-align:center;
}
div.article-header
{

    background-image:url(../img/articleheaderback.png);
    background-position:bottom;
    background-repeat:repeat-x;
    width:100%;
    margin-bottom:10px;


}
div.article-title
{
    width:69%;
    display:inline-block;
    padding-left:1%;
    padding-bottom:10px;
}
div.article-more
{
    text-align:right;
    font-style:italic;
    display:inline-block;
    color:#690000;
    width:29%;
    padding-right:1%;
}
div.article-content
{
    width:94%;
    padding-right:3%;
    padding-left:3%;
}
div.article
{
    padding-top:10px;
    padding-bottom:10px;
    padding-left:3%;
    padding-right:3%;
    width:94%;  
}
div.section
{
    padding-top:10px;
    padding-bottom:10px;
    width:100%;
    text-align:center;
}
div.section-title
{
    text-transform:uppercase;
    width:100%;
}
div.container
{
    width:100%;
    margin:10px 0;
    padding-top:20px;
    padding-bottom:10px;
    background-color:#cbcb63;
}
div.content
{
    width:90%;
    background-color:#fff59b;
    margin:15px auto;
    padding-top:10px;
    padding-bottom:10px;
}

div#contacts
{
    width:90%;
    background-color:#fff59b;
    margin:0 auto;
}
.dark-background
{
    background-color:#1b5e5e;
}
div.header
{
    text-align:center;
    width:100%;
}
div.footer
{
    text-align:center;
}
h1
{
    font-size:1.5em;
    font-weight:bold;
    color:#690000;
}


img#logo
{
    max-width:100%;
}

li.basic
{
    padding-top:5px;
    padding-bottom:5px;
    line-height:1.5;
}

li.nav
{
    color:#5c7304;
    padding-top:25px;
    text-align:center;
    font-weight:bold;
    text-transform:uppercase;
}
li.contacts
{
    display:inline-block;
    width:25%;
}
p
{
    line-height:1.5;
}
ul.nav
{
    margin-top:10px;
    padding:0;
    list-style:none;
    width:100%;
}
ul.basic
{
    list-style-type:disc;
    list-style-position:inside;
}
ul.contacts
{
    width:100%;
    margin-top:30px;
    margin-bottom:10px;
}

这是html主页：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Responsive Site</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/princstyle.css">
<meta name="viewport" content="width=device-width, user-scalable=no, 
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<script src="js/jquery-1.9.1.min.js"></script>

<script language="javascript">
$(document).ready(function(){
    $("#section-list").hide();  

    $("#section-title").click(function(){
        $("#section-list").toggle();
    });
});
</script>

</head>

<body>
    <!-- container contains HEADER + NAV + CONTENT-->
    <div class="container">

        <!-- header -->
        <div class="header">
            <img id="logo" alt="Logo: Matteo Puccinelli profile" src="img/logoridim.png"> 
        </div>

        <!-- sections -->
        <div class="content">
            <!-- Article: sections -->
            <div class="section">
                <div id="section-title" class="section-title">
                    <h1>
                        Sections
                    </h1>
                </div>
                <div id="section-list">
                    <ul class="nav">
                        <li class="nav"><a href="prova.html">Home</a></li>
                        <li class="nav"><a href="#personaldata">Dati personali</a></li>
                        <li class="nav"><a href="#work">Esperienze lavorative</a></li>
                        <li class="nav"><a href="#education">Educazione</a></li>
                        <li class="nav"><a href="#passions">Passioni</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- content -->
        <div class="content">
            <!-- Article: personal data -->
            <div id="personaldata" class="article">
                <div class="article-header">
                    <div class="article-title">
                        <h1>
                            Dati personali
                        </h1>
                    </div>
                </div>
                <div class="article-content">
                    <ul class="basic">
                        <li class="basic">Data di nascita: 18-01-1987</li>
                        <li class="basic">Luogo di nascita: Lucca</li>
                        <li class="basic">Nazionalità: italiana</li>
                        <li class="basic">Residenza: [privata]</li>
                    </ul>
                </div>
            </div>

            <!-- Article: work experiences -->
            <div id="work" class="article">
                <div class="article-header">
                    <div class="article-title">
                        <h1>
                            Esperienze lavorative
                        </h1>
                    </div><!--
                 --><div class="article-more">
                        <a href="work.html">+ more</a>  
                    </div>
                </div>
                <div class="article-content">
                    <ul class="basic">
                        <li class="basic">(dal 2011) Redattore per il portale <a href="http://www.libro-mania.com/" target="_blank">Libro-Mania</a>.</li>
                        <li class="basic">(dal 2007) Lavori occasionali.</li>
                        <li class="basic">(2011-2012) Tirocinio formativo presso l'azienda <a href="http://www.intecs.it/" target="_blank">Intecs SpA</a>.</li>
                    </ul>
                </div>
            </div>

            <!-- Article: education -->
            <div id="education" class="article">
                <div class="article-header">
                    <div class="article-title">
                        <h1>
                            Educazione
                        </h1>
                    </div><!--
                 --><div class="article-more">
                        <a href="education.html">+ more</a> 
                    </div>
                </div>
                <div class="article-content">
                    <ul class="basic">
                        <li class="basic">(dal 2012) Laurea di secondo livello in Scienze Informatiche, facoltà di Scienze matematiche, fisiche e naturali di Pisa.</li>
                        <li class="basic">(2012) Laurea in Scienze Informatiche, facoltà di Scienze matematiche, fisiche e naturali di Pisa. Votazione 106/110.</li>
                        <li class="basic">(2007) Diploma di perito industriale capotecnico all'istituto industriale E. Fermi di Lucca con specializzazione Informatica. Votazione 100/100.</li>
                    </ul>
                </div>
            </div>

            <!-- Article: passions -->
            <div id="passions" class="article">
                <div class="article-header">
                    <div class="article-title">
                        <h1>
                            Passioni e Hobby
                        </h1>
                    </div><!--
                 --><div class="article-more">
                        <a href="passions.html">+ more</a>  
                    </div>
                </div>
                <div class="article-content">
                    <p>
                        prova
                    </p>
                </div>
            </div>

        </div> <!--content end -->
    </div> <!-- container end -->

    <!-- footer -->
    <div class="footer centered-content">
        <ul class="contacts">
            <li class="contacts"><img alt="facebook social icon" src="img/fbsmall.png"></li><!--
         --><li class="contacts"><img alt="twitter social icon" src="img/twittersmall.png"></li><!--
         --><li class="contacts"><img alt="feed RSS" src="img/rsssmall.png"></li><!--
         --><li class="contacts"><img alt="feed RSS" src="img/mail.png"></li>
        </ul>
        <p title="copyright" style="margin-top:15px; margin-bottom:15px;">
            Copyright 2013 Matteo Puccinelli
        </p>  
    </div>

</body>
</html>

提前谢谢！

Answer 1

首先，您确定第二页处于相同的缩放级别吗？

我会认为问题是使用％而不是em。

要做的第一件事是确定设置元素是否修复了新标签上尺寸更改的问题。之后，您可以计算出将每个元素设置为的em。

*
{
    font-size: 20em !important;

}

Answer 2

1 - 字体大小（以百分比表示）是根据参考值计算的。
2 - 字体大小是继承的。

在您的情况下，您尚未定义引用，因此这些元素的父的浏览器默认字体大小是计算的基础。

不同的浏览器可以为同一元素使用不同的默认字体大小。

这就是你看到差异的原因。

您可以在正文上设置字体大小，然后将百分比用于其他任何内容。

Answer 3

em和％几乎是一样的 - 2em = 200％。对于大多数可以覆盖的事物，每个浏览器都有一个默认的字体大小。使用* with！important是一种非常粗暴的做事方式，因为如果你想随后覆盖任何内容，你将不得不使用！important。

您最理想的做法是使用：

html, body, table {
    font-size: 13px;
}

此外，您可以执行此操作，而不是使用空白页脚导航之间的空格：

.footer ul {
    font-size: 1px;
}
.footer li {
    font-size: 13px;
}

http://jsfiddle.net/hDLry/

字体大小异常变化

3 个答案: