La raison pour laquelle li inside-block n'est pas valide dans IE11

Récemment, je faisais une liste de balises de page Web, qui ne nécessitaient aucun saut de ligne. Au début, je pensais que ce serait plus facile, et j'ai fini d'écrire le code en quelques secondes et j'ai réussi le test dans les navigateurs Firefox et Chrome. Cependant, quand je l'ai regardé dans IE11, c'était inattendu. Je n'ai pas obtenu l'effet escompté, li inside-block n'est pas valide dans IE11 ! Je change toujours de ligne !

li inside-block est toujours enveloppé dans IE11 ?

li inside-block s'enroule toujours dans IE11 ! Pourquoi ça ne marche pas ? Le code doit-il encore pirater IE11 ? Mais j’ai vu que la méthode d’écriture sur les sites Web d’autres personnes ne pirate pas IE11.

En fait, le code est assez simple et il atteint pleinement les résultats attendus dans les navigateurs Chrome et Firefox.

Le code CSS de base est le suivant :

ul li{
    display:inline-block;
    padding:3px 4px 3px 4px;
    margin:3px 3px 3px 0px;
}

Utilisez display:inline-block pour définir la liste li sans sauts de ligne.

Le code HTML de base est le suivant :

<ul>
    <li>tag1</li>
    <li>tag2</li>
    <li>tag3</li>
</ul>

Le résultat devrait être comme ceci :

Utiliser display:inline- block pour le définir li Liste sans sauts de ligne

au lieu de comme ceci :

Sans display:inline-block li Liste avec sauts de ligne

dans le code HTML de la page Web de Jingdong J'ai trouvé la raison pour laquelle IE11 n'est pas valide

Le problème ci-dessus m'a dérangé pendant plusieurs jours. J'ai une fois abandonné la méthode de code répertoriée dans li et adopté la méthode d'écriture de div , mais je l'étais. Je ne veux toujours pas le faire, car la méthode d'écriture de li est la bonne et le code est plus concis.

Aujourd'hui, je parcourais les téléphones mobiles sur JD.com, et la liste de balises dans la colonne latérale m'a attiré en regardant le code source html de sa page Web, j'ai découvert qu'elle était également implémentée en utilisant l'énumération li. et display:inline-block.

Liste de balises de JD

Je suis déterminé à trouver le code de la liste de balises qui est également applicable à IE11 à partir de cette page Web de JD.com.

Je ne peux plus attendre, agissez maintenant.

Créez un nouveau fichier HTML dans l'environnement de débogage construit localement, copiez le code source HTML de la page Web JD.com, puis utilisez la "méthode d'exclusion" pour supprimer progressivement le code jusqu'à ce que seul le DIV répertorié par ceci la balise est laissée.

Après une période de travail de suppression de code, le code restant deviendra de moins en moins important et la réponse devrait devenir de plus en plus claire.

Le travail acharné a payé, et nous avons enfin trouvé la réponse ! Le problème qui me tracasse depuis plusieurs jours est enfin résolu !

Il s'avère que cette phrase doit être ajoutée à la page Web

 :

Cette phrase signifie que cette page Web n'utilise pas l'affichage de compatibilité IE.

L'affichage de compatibilité IE utilise des versions inférieures des navigateurs IE pour afficher les pages Web afin d'éviter toute confusion dans la mise en page des pages Web. Mais nous comprenons maintenant que l'affichage de compatibilité effacera certains styles et rendra certaines zones de la page Web invisibles. n'atteint pas les résultats escomptés. Par conséquent, lors de la conception d'une page Web, nous devons indiquer au navigateur IE de ne pas utiliser la vue de compatibilité pour afficher cette page Web.

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!