javascript - 字体大小异常变化

标签 javascript jquery html css google-chrome

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

Internet Explorer(字体大小正常)

enter image description here enter image description here

Firefox(字体大小正常)

enter image description here enter image description here

Chrome(字体大小不同)

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>

提前致谢!

最佳答案

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

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

要做的第一件事是确定将元素设置为 em 是否可以解决新选项卡上大小更改的问题。之后，您可以计算出将每个元素设置为什么。

*
{
    font-size: 20em !important;

}

关于javascript - 字体大小异常变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16199494/

上一篇：html - 输入类型文件在 Bootstrap 模式中不起作用

下一篇：html - 突破位置 :relative *without* changing structure

相关文章：

c# - JQuery勾选项CheckBoxList

javascript - Rails ajax 渲染部分

c# - 需要 RAZOR 帮助

javascript - 如果先前单击的元素和鼠标移动，则保持悬停类

javascript - 为什么react-native中默认 View 宽度是100%？为什么使用alignItems时没有默认宽度？

javascript - 我无法让切换的 classList 样式实际应用到那里

php - Highcharts 查询

javascript - 无法使用 JavaScript 更改窗口对象的属性

javascript - 为所有对象创建一个方法，js vanilla？

javascript - jquery 在子级中查找顶级表

©2024 IT工具网  联系我们