gpt4 book ai didi

javascript - 字体大小异常变化

转载 作者:太空狗 更新时间:2023-10-29 15:50:52 24 4
gpt4 key购买 nike

我的非常简单的网站有问题。在某些情况下,字体大小似乎异常变化。例如,当我点击主页中的链接时,打开的新页面的字体大小不同。而且似乎这种行为只发生在 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com