Un des problèmes pour un développeur est d'avoir un rendu uniforme entre tous les navigateurs. 

Malheureusement, tous n'utilisent pas le même moteur de rendu et ont souvent de petites différences. 

Aujourd'hui je vais vous parler des sup et des sub. 

C'est quoi un sup et un sub ? 

Pour les personnes qui ne connaissent pas ces expressions, ce sont les équivalents de supérieurs et inférieurs en langage html. Les balises sont <sup> et <sub>. 

Le problème de ces balises

Le problème principal est le rendu sous Internet Explorer (IE). 

En effet, l'interlignage ne prend pas en compte ces balises et rends l'interlignage plus grand lorsque celles-ci sont intégrées dans le texte. 

J'ai trouvé, à force de recherche et de tests, 2 solutions à ce problème. 

2 solutions s'offrent à vous 

La première, réduire l'interlignage pour ces 2 balises via la propriété css line-height. 

Il suffit de régler ce line-height à 0.8 em comme ceci : 

sup, sub {
line-height: .8em;
}

La seconde solution est d'utiliser la propriété css vertical-align qui vous permettra de placer les éléments, soit en "baseline" ou en "top" : 

sub {vertical-align:baseline;} 
sup {vertical-align:top;}