Tailwind 在 Chrome 和 Firefox 上產生奇怪的不同結果

Question

我一直在使用 SvelteKit 和 TailwindCSS 創建一個網站，主要使用 Google Chrome。 我在 Firefox 中打開網站進行更改，它產生了截然不同的結果：Chrome 上的頂部欄看起來像這樣，是我的首選外觀

而 Firefox 的頂部欄看起來像這樣：

header 組件在代碼中如下所示

<div class="grid grid-cols-7 grid-rows-1 sm:grid-rows-1 gap-y-2 mt-2 sm:mt-4 sm:pl-4 align-middle h-24 md:h-16"> <div class="lg:col-start-2 col-span-7 md:col-span-4 lg:col-span-3 flex flex-row"> <div class="h-full"> <img class="hidden sm:block h-full my-auto" src="https://dutchellie.nl/DutchEllie/proper-website-2/raw/branch/main/web/static/images/icon.png" alt="Icon" /> <div class="block sm:hidden ml-2 mt-4"> <Hamburger /> </div> </div> <div class="w-full sm:w-auto sm:pl-5 sm:my-auto text-center mx-auto sm:mx-0 pr-9 sm:pr-0"> <h1 class="text-2xl md:text-3xl h-min font-medium">Internetica Galactica 2</h1> <p class="h-min text-xs">Surviving the rewriting</p> </div> </div> <div class="hidden md:col-start-5 col-start-1 col-end-7 sm:grid grid-cols-6"> <nav class="h-full flex items-end md:col-start-4 md:col-span-2 col-span-7 gap-2 text-md"> <Button link="/" text="Home" /> <Button link="/about" text="About" /> </nav> </div> < --> <hr class="col-span-full border-slate-700" /> </ --> </div>

這里有什么區別？ 我完全不知道謝謝你的幫助

Answer 1

好的，經過一番來回，有一個解決方法。 首先，問題似乎是 header 中標題旁邊的圖像寬度異常，這將 header 文本推到了右側。 解決方案最終來自徽標是正方形的事實，因此我可以設置 aspect-square 屬性以強制它的寬度匹配它的高度。

現在徽標沒有將標題向右推，兩者的行為