我有一個<span>文本元素，它有一個相對位置和一個子<span>，它有一個絕對位置和一個彩色背景，但它似乎在Firefox瀏覽器上不能正常作業。我使用的是Tailwind CSS ^2.2，以下是HTML代碼片段：
< h1 class="max-w-md mx-auto mt-1 text-blue-900 block text-[2rem] tracking-tight font-bold sm。 text-5xl lg:text-4xl xl:text-5xl leading-snug sm:leading-snug lg:leading-snug xl:leading-snug">/span>
首選
<span class=" relative px-0. 5 whitespace-nowrap z-10">西班牙文< span class="absolute inset-y-0 rounded-sm -left-1 -right-1 bg-blue-50"/span> style="z-index: -1;"></span></span>
浸入式學校的
<span class=" relative px-0. 5 whitespace-nowrap z-10">洛杉磯 < span class="absolute inset-y-0 rounded-sm -left-1 -right-1 bg-red-100" style="Z-index: -1;"></span></span>
</h1>
下面是Chrome瀏覽器中的結果截圖：
這里是Firefox的結果截圖：
正如你所看到的，"洛杉磯 "的背景沒有被正確應用。
我還在這里創建了一個Tailwind Play組件。https://play.tailwindcss.com/zCdDLVtjAE。 你可以在不同的瀏覽器中打開它，看看有什么不同。是什么導致了這種差異，你認為我可以做些什么來使它在不同的瀏覽器中保持一致？
uj5u.com熱心網友回復：
雖然，不確定確切的原因，但這是由于 "Los Angeles "中多余的前導空格。如果你把它改為 "Los Angeles"，那么它就可以正常作業。
。< h1 class="max-w-md mx-auto mt-1 text-blue-900 block text-[2rem] tracking-tight font-bold sm。 text-5xl lg:text-4xl xl:text-5xl leading-snug sm:leading-snug lg:leading-snug xl:leading-snug">/span>
首選
<span class=" relative px-0. 5 whitespace-nowrap z-10">西班牙文< span class="absolute inset-y-0 rounded-sm -left-1 -right-1 bg-blue-50"/span> style="z-index: -1;"></span></span>
浸入式學校的
<span class=" relative px-0. 5 whitespace-nowrap z-10">洛杉磯 < span class="absolute inset-y-0 rounded-sm -left-1 -right-1 bg-red-100" style="z-index: -1;"></span></span>
</h1>/span>演示 :https://play.tailwindcss.com/zCdDLVtjAE
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/311299.html
標籤：