I have a <span> text element that has a relative position and a child <span> that has an absolute position with a colored background, but it doesn't seem to be working properly on the Firefox browser. I am using Tailwind CSS ^2.2 and here is the HTML code snippet:
<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">
The premier
<span class="relative px-0.5 whitespace-nowrap z-10">Spanish<span class="absolute inset-y-0 rounded-sm -left-1 -right-1 bg-blue-50" style="z-index:-1;"></span></span>
immersion school of
<span class="relative px-0.5 whitespace-nowrap z-10"> Los Angeles <span class="absolute inset-y-0 rounded-sm -left-1 -right-1 bg-red-100" style="z-index:-1;"></span></span>
</h1>
Here is a screenshot of result in Chrome:
And here is a screenshot of result in Firefox:
As you can see the background over "Los Angeles" isnt applied properly.
I also created a Tailwind Play component here: https://play.tailwindcss.com/zCdDLVtjAE. You can open it in the different browsers to see the difference. What is causing this difference and what do you think I can change to make it consistent across the different browsers?
CodePudding user response：
Although, not sure of the exact cause but it's due to the extra leading space in the " Los Angeles". If you change it to "Los Angeles" then it works fine.
<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">
The premier
<span class="relative px-0.5 whitespace-nowrap z-10">Spanish<span class="absolute inset-y-0 rounded-sm -left-1 -right-1 bg-blue-50" style="z-index:-1;"></span></span>
immersion school of
<span class="relative px-0.5 whitespace-nowrap z-10">Los Angeles <span class="absolute inset-y-0 rounded-sm -left-1 -right-1 bg-red-100" style="z-index:-1;"></span></span>
</h1>