5
मुझे अपनी बहुत ही सरल वेबसाइट के साथ समस्या है। ऐसा लगता है कि कुछ मामलों में फ़ॉन्ट आकार असामान्य रूप से बदलता है। उदाहरण के लिए, जब मैं मुखपृष्ठ पर किसी लिंक पर क्लिक करता हूं, तो खोला गया नया पृष्ठ एक अलग फ़ॉन्ट आकार होता है। और ऐसा लगता है कि यह व्यवहार केवल क्रोम पर होता है। कृपया नीचे दी गई तस्वीरें देखें। प्रत्येक तस्वीर के लिए, बाईं ओर आप होमपेज में फ़ॉन्ट आकार देख सकते हैं और दाईं ओर आप लिंक पर क्लिक करके खोले गए पेज में फ़ॉन्ट आकार देख सकते हैं।फ़ॉन्ट का आकार असामान्य रूप से बदलता है
इंटरनेट एक्सप्लोरर (फ़ॉन्ट आकार ठीक)
फ़ायरफ़ॉक्स (फ़ॉन्ट आकार ठीक)
क्रोम (फ़ॉन्ट आकार अलग है)
यह दो वेब पृष्ठों द्वारा इस्तेमाल किया मेरी सीएसएस कोड (इस से पहले वहाँ एक रीसेट मानक फ़ाइल है) है:
<!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>
धन्यवाद:
@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;
}
यह एचटीएमएल होमपेज पर है अग्रिम रूप से!
यदि आप '%' में फ़ॉन्ट को परिभाषित करते हैं। यह गतिशील और विभिन्न _browser, संकल्प आदि के साथ बदलने के लिए प्रवण होगा .._ –
आपके पास कौन से एक्सटेंशन हैं? क्रोम बहुत अनुपालनशील है ... –
@ मोहम्मदएडिल यह समझाएगा कि क्यों कुछ पृष्ठों में फ़ॉन्ट दूसरों में अलग है, हालांकि। –