Safari浏览器下代码高亮时white-space: pre失效如何解决？

Safari浏览器代码高亮：white-space: pre属性兼容性问题及解决方案

在网页开发中，white-space: pre 属性用于保留代码的格式，包括空格和换行符。然而，在Safari浏览器中，尤其当代码被其他标签嵌套时，该属性可能会失效，导致代码格式错乱。本文分析此问题并提供解决方案。

问题描述：

经过代码高亮处理的HTML代码片段，使用了 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">&lt;/code&gt; 和 &lt;code&gt;&lt;code&gt;&lt;/code&gt; 标签。为了保持代码原样，开发者使用了 &lt;code&gt;pre code { white-space: pre; }&lt;/code&gt; 样式。但在Safari浏览器中，部分被标签包裹的文本（例如 &lt;code&gt;#imports&lt;/code&gt;）仍然发生换行，造成代码格式混乱。测试表明，只有 &lt;code&gt;&lt;div&gt;&lt;/code&gt; 元素直接包含文本时，&lt;code&gt;white-space: pre&lt;/code&gt; 才有效；一旦文本被嵌套在其他标签内，该属性便失效。&lt;/p&gt; &lt;p&gt;&lt;strong&gt;问题分析：&lt;/strong&gt;&lt;/p&gt; &lt;div class=&quot;aritcle_card&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/ai/735&quot;&gt; &lt;img src=&quot;https://img.php.cn/upload/ai_manual/001/246/273/68b6cdbf48df2598.png&quot; alt=&quot;代码小浣熊&quot;&gt; &lt;/a&gt; &lt;div class=&quot;aritcle_card_info&quot;&gt; &lt;a href=&quot;/ai/735&quot;&gt;代码小浣熊&lt;/a&gt; &lt;p&gt;代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节&lt;/p&gt; &lt;div class=&quot;&quot;&gt; &lt;img src=&quot;/static/images/card_xiazai.png&quot; alt=&quot;代码小浣熊&quot;&gt; &lt;span&gt;51&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;a href=&quot;/ai/735&quot; class=&quot;aritcle_card_btn&quot;&gt; &lt;span&gt;查看详情&lt;/span&gt; &lt;img src=&quot;/static/images/cardxiayige-3.png&quot; alt=&quot;代码小浣熊&quot;&gt; &lt;/a&gt; &lt;/div&gt; &lt;p&gt;Safari浏览器对 &lt;code&gt;white-space: pre&lt;/code&gt; 属性的解析，在标签嵌套情况下存在差异。该属性旨在保留所有空格和换行符，但Safari可能将标签内的文本视为独立文本块，从而进行换行。&lt;/p&gt; &lt;p&gt;&lt;strong&gt;解决方案：&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;为了解决Safari浏览器中 &lt;code&gt;white-space: pre&lt;/code&gt; 失效的问题，建议使用更兼容的属性组合：&lt;/p&gt; &lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;pre { white-space: pre-wrap; /* CSS3 */ white-space: -moz-pre-wrap; /* Mozilla (since 1999) */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ -moz-binding: url('./wordwrap.xml#wordwrap'); /* Mozilla (enhanced compatibility) */ }</pre>

以上就是Safari浏览器下代码高亮时white-space: pre失效如何解决？的详细内容，更多请关注php中文网其它相关文章！