Espace blanc: PRE ne fait pas que la mise en évidence du code soit incohérente. Comment le résoudre?

Code de navigateur Safari mettant en évidence les problèmes et solutions de compatibilité

Dans le développement Web, afin de conserver le format d'origine de l'extrait de code (y compris l'indentation et les espaces), nous utilisons généralement <code>white-space: pre CSS. Cependant, dans certains cas, les navigateurs Safari ont des problèmes de compatibilité avec le traitement de cette propriété, ce qui fait apparaître le code. Cet article analyse ce problème et fournit des solutions.

Description du problème:

Lors du rendu du code des fragments à grande échelle à l'aide de <code>white-space: pre , le navigateur Safari peut rencontrer des problèmes de compatibilité. Par exemple, le code suivant:

 <code class="html"> import { definecomponent } from '#imports' ;预期输出应与以下代码一致： ```javascript import { definecomponent } from '#imports';</code>

Cependant, dans le navigateur Safari, des pauses de ligne peuvent se produire avec <code>'#imports' . Après les tests, il a été constaté que lorsque le contenu texte était<code><code>标签包裹时， <code>white-space: pre属性失效。而使用简单的<code>

标签则不会出现此问题。

Solution:

Afin de résoudre le problème de compatibilité sous le navigateur Safari, il est recommandé d'utiliser un paramètre d'attribut <code>white-space plus complet et de combiner <code>word-wrap :

 pre {
  Espace blanc: pré-wrap; / * Css3 * /
  Espace blanc: -moz-prre-wap; / * Mozilla (depuis 1999) * /
  Espace blanc: -pre-wrap; / * Opéra 4-6 * /
  Espace blanc: -o-pre-wap; / * Opéra 7 * /
  Word-Wrap: Break-Word; / * Internet Explorer 5.5 * /
  -moz-linding: url ('./ wordwrap.xml # wordwrap'); / * Plus ancienne Mozilla * /
}

Ce code CSS fournit une prise en charge de compatibilité pour différents navigateurs, garantissant que le code peut afficher correctement les retraits et les espaces, même si le contenu texte est<code><code>标签包裹。 <code>word-wrap: break-word;属性允许长单词或文本自动换行，避免因过长而导致布局问题。 请注意， <code>-moz-binding通常用于较旧的Mozilla浏览器，现代浏览器可能不需要此行代码。 如果仍然存在问题，请检查是否存在其他CSS样式冲突。

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!