Pourquoi mon affichage en bloc en ligne ne fonctionne-t-il pas dans IE8 ?-tutoriel CSS-php.cn

Pourquoi mon affichage en bloc en ligne ne fonctionne-t-il pas dans IE8 ?

Patricia Arquette

Libérer： 2024-10-29 21:35:02

original

745 Les gens l'ont consulté

Why Is My Inline-Block Display Not Working in IE8?

IE8 : Dépannage des problèmes de blocage d'affichage en ligne

Dans le domaine du développement Web, aspirer à obtenir une présentation visuelle spécifique pose un défi courant pour les programmeurs. Un aspect de ce processus consiste à garantir l'alignement correct des éléments, en particulier dans divers environnements de navigateur. Une méthode de positionnement d'élément qui suscite souvent de la frustration parmi les développeurs est l'affichage en bloc en ligne.

Problème :

Considérez l'extrait de code suivant :

<style type="text/css" media="all">
  span, ul, ul li {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0;
    list-style: none;
  }   
</style>

<span>i would want</span>
<ul>
  <li>this</li>
  <li>on</li>
  <li>one line.</li>
</ul>

Copier après la connexion

Le résultat souhaité dans IE8 est d'aligner les éléments en ligne. Cependant, malgré la prétendue prise en charge du bloc en ligne par IE8, les tentatives pour parvenir à cet alignement se sont révélées infructueuses.

Solution :

Étonnamment, le coupable ne réside peut-être pas dans le bloc en ligne -block déclaration elle-même. Au lieu de cela, un doctype manquant empêche probablement le comportement d'affichage correct dans IE8. Pour résoudre ce problème, ajoutez simplement la déclaration doctype suivante comme première ligne HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Copier après la connexion

Explication :

La déclaration doctype demande au navigateur de fonctionner dans un mode spécifique, assurant la compatibilité avec la spécification HTML spécifiée. Sans doctype, IE8 peut recourir à son mode de compatibilité par défaut, ce qui pourrait rendre l'affichage du bloc en ligne incorrect. En définissant explicitement le mode de rendu à l'aide du doctype, nous remplaçons ce comportement et activons l'alignement de bloc en ligne souhaité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!