在網頁開發中，為了保持代碼片段的原始格式（包括縮進和空格），我們通常會使用white-space: pre css屬性。然而，Safari瀏覽器在某些情況下會對該屬性的處理存在兼容性問題，導致代碼顯示錯亂。本文將分析此問題并提供解決方案。
問題描述：
當使用white-space: pre渲染代碼高亮片段時，Safari瀏覽器可能出現兼容性問題。例如，以下代碼：
< script > import { definecomponent } from '#imports' ; 預期輸出應與以下代碼一致： ```javascript import { definecomponent } from '#imports';
然而，在Safari瀏覽器中，’#imports’可能會發生換行。經測試發現，當文本內容被標簽包裹時，white-space: pre屬性失效。而使用簡單的
標簽則不會出現此問題。
解決方案：
為了解決Safari瀏覽器下的兼容性問題，建議使用更全面的white-space屬性設置，并結合word-wrap屬性：
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'); /* Older Mozilla */ }
這段CSS代碼提供了對不同瀏覽器的兼容性支持，確保代碼能夠正確顯示縮進和空格，即使文本內容被標簽包裹。word-wrap: break-word;屬性允許長單詞或文本自動換行，避免因過長而導致布局問題。 請注意，-moz-binding 通常用于較舊的Mozilla瀏覽器，現代瀏覽器可能不需要此行代碼。 如果仍然存在問題，請檢查是否存在其他CSS樣式沖突。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
