字體大小異常變化

我對我的非常簡單的網站有問題。看起來字體大小在某些情況下異常變化。例如，當我點擊主頁上的鏈接時，打開的新頁面具有不同的字體大小。而且這種行爲似乎只發生在Chrome上。請看下面的圖片。對於每張圖片，在左側可以看到主頁中的字體大小，右側可以看到單擊鏈接打開的頁面中的字體大小。字體大小異常變化

的Internet Explorer（字體大小確定）

enter image description here

火狐（字體大小確定）

enter image description here

鉻（字體大小是不同的）

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>

謝謝提前！

來源

2013-04-24 superpuccio

如果你在'％'中定義字體。它將是動態的，並且傾向於使用不同的_browser，分辨率等進行更改._ – 2013-04-24 18:29:17

你有什麼擴展名？ Chrome非常兼容...... – 2013-04-24 18:29:39

@MohammadAdil這並不能解釋爲什麼在某些頁面中，其他字體的字體不同。 – 2013-04-24 18:29:59

首先，你確定第二頁是在相同的縮放級別？

我會認爲問題是使用％而不是em。

要做的第一件事是確定設置em元素是否修復了新選項卡上尺寸更改的問題。之後，你可以計算出每個元素的設置。在百分比

* 
{ 
    font-size: 20em !important; 

}

來源

2013-04-24 19:06:23 Wayneio

是的，解決方案是正確的，謝謝！ – superpuccio 2013-04-24 19:58:39

1-字體尺寸基於基準計算的。
2-字體大小是繼承的。

對於您的情況，您尚未定義參考，因此這些元素的瀏覽器的默認字體大小爲父是計算的基礎。

不同的瀏覽器對同一個元素可以有不同的默認字體大小。

這就是您看到區別的原因。

您可以在正文上設置字體大小，然後將百分比用於其他任何內容。

來源

2013-04-24 19:29:23 Arbel

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/

來源

2014-02-19 09:24:47 PeteAUK

字體大小異常變化

回答

相關問題