在Chrome和Firefox上产生奇怪的不同结果的顺风

Question

我一直在创建一个使用SvelteKit和TailwindCSS的网站，主要使用Google。我打开了火狐的网站进行修改，它产生了截然不同的结果！Chrome上的顶部栏看起来像这样，是我最喜欢的外观：

​

尽管Firefox的顶部栏如下所示：

​

头组件在代码中如下所示

<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

好吧，经过一段时间的反复，有一个解决方案。首先，问题似乎是标题标题旁边的图像有一个不正常的宽度，它将标题文本推到右边。解决方案最终来自这样的事实，标志是方形的，所以我可以设置方面-平方属性，以强制它的宽度，以匹配它的高度。

现在徽标没有把标题推到右边，两个人表现得很好