Problèmes liés à Doctype pouvant affecter la hauteur de ligne et les sauts de ligne dans IE

Je semble avoir des problèmes avec la déclaration de doctypes (éventuellement) dans IE et FireFox.Problèmes liés à Doctype pouvant affecter la hauteur de ligne et les sauts de ligne dans IE

Voici le code que je vais avoir des problèmes observés dans les captures d'écran avec:

<div id="contact" style="position:absolute; left:81px; top:2440px; width:639px; "> 
<span class="contact_header">Getting in touch is easy 
</div> 
<div style="position:absolute; left:80px; top:2500px; width:320px; "> 
<br><span class="contact_title">email me:</span></br> 
<br><span class="contact_links"><a class="white" href="mailto:[email protected]?subject=Hello superallan!&body= ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[email protected]</a></span></br> 
<br><span class="contact_title">tweet me:</span></br> 
<br><span class="contact_links"><a class="white" target="_blank" href="http://twitter.com/#!/superallan">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@superallan</a></span></br> 
<br><span class="contact_title">phone me:</span></br> 
<br><span class="contact_links">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+44 (0) 7540 308 682</span></br> 
</div> 
<div style="position:absolute; left:400px; top:2500px; width:320px; "> 
<br><span class="contact_title">write to me:</span></br> 
<br><span class="contact_address">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;11 abbeyview</span></br> 
<br><span class="contact_address">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;crossford</span></br> 
<br><span class="contact_address">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fife</span></br> 
<br><span class="contact_address">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scotland</span></br> 
<br><span class="contact_address">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;united kingdom</span></br> 
</div>

Ceci est mon doctype actuel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"><html lang=en-us>

C'est le CSS pour la section:

.contact_title { 
font-family:"FairfieldLTStd55Medium", Georgia, serif; 
font-size: 18pt; 
line-height: 22pt; 
color: #FFF; 
} 

.contact_links { 
font-family:"FairfieldLTStd56MediumItalic", Georgia, serif; 
font-size: 18pt; 
line-height: 22pt; 
color: #FFF; 
} 

.contact_address { 
font-family:"FairfieldLTStd56MediumItalic", Georgia, serif; 
font-size: 18pt; 
line-height: 22pt; 
color: #FFF; 
}

Voici comment il fonctionne dans Firefox et IE. Lorsque je change le doctype en strict, il semble toujours correct dans FF mais IE augmente encore les hauteurs de ligne.

Des idées? Ou peut-être - comment le réparer juste pour IE car il fonctionne bien dans tout le reste ...

Source

2010-12-15 senîorcorbett

Je note que vous utilisez pt mesures pour vos font-size et line-height styles.

Notez que pt est destiné à être utilisé avec des pages imprimées et qu'il n'est pas rendu correctement à l'écran. Si vous voulez une taille de police précise au pixel près sur l'écran, utilisez px à la place. (Vous pouvez également utiliser em ou % pour les mesures relatives, mais il semble que vous ayez l'intention d'utiliser une mesure de taille fixe, donc px est celle).

Pour plus d'informations, consultez cette page: http://css-tricks.com/css-font-size/

Voici un extrait de la section correspondante de la page liée:

Tout comme la façon dont les pixels sont morts-précis sur les moniteurs pour-dimensionnement de la police, le point les tailles sont mort-précises sur le papier. Pour obtenir les meilleurs résultats entre les navigateurs et les plateformes lors de l'impression des pages, configurez une feuille de style d'impression et dimensionnez toutes les polices avec des tailles de point. Pour une bonne raison, la raison pour laquelle nous n'utilisons pas de tailles de points pour l'affichage à l'écran (autre que l'absurdité), c'est que les résultats du navigateur sont radicalement différents.

... qui ressemble exactement aux symptômes que vous voyez.

Espérons que cela aide.

Source

2010-12-15 17:06:23 Spudley

Problèmes liés à Doctype pouvant affecter la hauteur de ligne et les sauts de ligne dans IE

Répondre

Questions connexes