HTML tag influant sur la hauteur de ligne, comment faire pour qu’il soit conforme ?

Question

HTML tag influant sur la hauteur de ligne, comment faire pour qu’il soit conforme ?

Demandé el 7 de Octobre, 2009: Quand la question a-t-elle été
38963 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Si j'ai un  balise dans un multi-ligne,  balise, la ligne de l'exposant, il a un plus grand espacement des lignes au-dessus de lui que les autres lignes, indépendamment de ce que la hauteur de la ligne que j'ai mis sur l' .

Edit pour les précisions: je ne veux pas dire que j'ai beaucoup d' s, chaque qui est sur une seule ligne. J'ai un seul  avec suffisamment de contenu en elle à cause d'habillage sur plusieurs lignes. Quelque part (n'importe où) dans le texte, il peut y avoir un  ou . Cela affecte la hauteur de la ligne de la ligne par l'ajout d'espace supplémentaire au-dessus/en-dessous. Si j'ai mis une plus grande hauteur de la ligne sur l'  cela ne fait aucune différence pour le problème. La hauteur de la ligne est augmenté, mais l'espacement supplémentaire reste.

Comment puis-je le rendre compatible - c'est à dire toutes les lignes ont le même espacement s'ils contiennent un  ou pas?

Vos solutions doivent être cross-browser (IE 6+, FF, safari, opera, chrome)

Merci

Andrew

Demandé el 7 de Octobre, 2009 par Andrew Bullock

Answer 1

5 Réponses

Answer 2

186voto

bobince Points 270740

la hauteur de la ligne ne le corriger, mais vous pourriez avoir à faire de manière assez large: sur mes paramètres, j'ai pour augmenter la hauteur de la ligne à environ 1,8 avant l'  n'interfère plus avec elle, mais cela peut varier de la police à la police.

Une approche possible pour obtenir des réponses cohérentes de la hauteur de ligne est de définir vos propres exposant style au lieu de la valeur par défaut vertical-align: super. Si vous utilisez top il ne sera pas ajouter quoi que ce soit à la zone de ligne, mais vous pourriez avoir à réduire la taille de police supplémentaires pour le rendre apte à:

sup { vertical-align: top; font-size: 0.6em; }

Un autre hack vous pourriez faire est d'essayer d'utiliser le positionnement pour déplacer vers le haut un peu, sans affecter la zone de ligne:

sup { vertical-align: top; position: relative; top: -0.5em; }

Bien sûr, cela risque de s'écraser dans la ligne ci-dessus si vous n'avez pas assez de hauteur de la ligne.

Répondu el 7 de Octobre, 2009 par bobince (270740 Points )

Answer 3

104voto

Richard Le Poidevin Points 1097

<pre><code></code><code></code>de la hauteur de la ligne 0. @Scott a dit d’utiliser normal, mais cela ne fonctionne pas toujours.n’avez pas à changer la hauteur de ligne du texte pour s’adapter au texte exposant environnant. J’ai testé IE7 + et les autres principaux navigateurs.</pre>

Répondu el 6 de Juillet, 2011 par Richard Le Poidevin (1097 Points )

Answer 4

8voto

PiTheNumber Points 8264

J’ai eu le même problème, et non des réponses donnés a fonctionné. Mais j’ai trouvé un git commit avec une solution qui a fonctionné pour moi :

Répondu el 18 de Mars, 2013 par PiTheNumber (8264 Points )

Answer 5

3voto

Milingu Kilu Points 61

Gardez-le simple :

[taille de la police dépend de votre type individuel-visage]

Répondu el 15 de Avril, 2013 par Milingu Kilu (61 Points )

Answer 6

0voto

pavium Points 7845

Pour que toutes les lignes plus haut, pour le même aspect que la ligne de l'exposant, de définir un plus grand line-height pour l'ensemble du paragraphe

<p style='line-height:150%'>

ou n'importe quelle valeur donne l'effet que vous désirez.

Il peut sembler étrange, mais c'est la façon dont vous avez décrit vos exigences.

EDIT: afin d'effectuer toutes les lignes ont le même aspect , lorsque l'un a besoin de plus d'espace vertical que les autres, TOUTES les lignes du paragraphe devra être plus grand.

Cela, comme je l'ai dit, ne peut pas une solution intéressante. Peut-être quelque chose qui peut être fait avec une durée de rendre juste le texte avec le sous/exposant les petits, hormis cela, je ne crois pas ce que vous voulez peut être atteint. Mais j'aimerais voir quelqu'un d'autre solution.

EDIT2: d'ailleurs, j'en ai essayé un petit fichier html contenant

<html>
<head>
<title>line-height</title>
<style>
p {
    line-height : 1.5em;
    width : 25em;
}
</style>
</head>
<body>
<p>Mary had a little lamb, its fleece<sup>1</sup> was white as snow, 
and everywhere that Mary went, the lamb<sub>2</sub> was sure to go.
</p>
</body>
</html>

Et les lignes sont toutes de la même hauteur dans FF3.0.14 et Konqueror (je ne peux pas parler pour les autres navigateurs)

Répondu el 7 de Octobre, 2009 par pavium (7845 Points )

HTML <sup></sup> tag influant sur la hauteur de ligne, comment faire pour qu’il soit conforme ?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by: