火狐浏览器中如何去掉顶部的虚线

发布于 2025-01-11 18:15:58 字数 3847 浏览 4 评论 0原文

我的应用程序中有一个简单的导航栏 chrome safari 勇敢中没有什么特别的,

nav ul li a 

很好 但在 Firefox 中我有一个丑陋的 单击链接时的顶部虚线

Dotted Bar

有办法摆脱它吗?

我尝试过:

a::-moz-focus-inner {
  border: 0;
}

它不起作用:(

svelteKit 应用程序中的代码

<header
    class="sticky top-0 z-50 h-[50px] flex justify-start items-center px-3 md:px-9 lg:px-10 3xl:px-28 pt-5 bg-white/0"
>
    <a class="block" href="/"
        ><figure><img src="/images/logo.png" alt="Myapp" width="110" height="25" /></figure>
        <!--<Brand>-->
        <h1 class="hidden">Myapp</h1></a
    >
    <nav class="ml-auto hidden lg:block">
        <ul class="flex gap-4">
            <li
                class="grow-0 py-[7px] px-[9px] shadow-sm rounded-xl uppercase tracking-tight backdrop-opacity-[40px] transition ease-in-out duration-300 bg-white/90"
            >
                <a class="custom" sveltekit:prefetch="" href="/one">One</a>
            </li>
            <li
                class="grow-0 py-[7px] px-[9px] shadow-sm rounded-xl uppercase tracking-tight backdrop-opacity-[40px] transition ease-in-out duration-300 bg-black/90 text-white"
            >
                <a class="custom" sveltekit:prefetch="" href="/two">Two</a>
            </li>
            <li
                class="grow-0 py-[7px] px-[9px] shadow-sm rounded-xl uppercase tracking-tight backdrop-opacity-[40px] transition ease-in-out duration-300 bg-white/90"
            >
                <a class="custom" sveltekit:prefetch="" href="/three">Three</a>
            </li>
            <li
                class="grow-0 py-[7px] px-[9px] shadow-sm rounded-xl uppercase tracking-tight backdrop-opacity-[40px] transition ease-in-out duration-300 bg-white/90"
            >
                <a class="custom" sveltekit:prefetch="" href="/four">Four</a>
            </li>
            <li
                class="grow-0 py-[7px] px-[9px] shadow-sm rounded-xl uppercase tracking-tight backdrop-opacity-[40px] transition ease-in-out duration-300 bg-white/90"
            >
                <a class="custom" sveltekit:prefetch="" href="/five">Five</a>
            </li>
            <li class="pl-[85px]">
                <div
                    class="flex justify-center items-center w-[38px] h-[38px] shadow-sm rounded-xl bg-white/90"
                >
                    <svg
                        width="12"
                        height="12"
                        viewBox="0 0 12 12"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                        >stuff of svg</svg
                    >
                </div>
                <!--<NavSearch>-->
            </li>
            <li
                class="flex justify-center items-center shadow-sm rounded-xl uppercase tracking-tight bg-white/90"
            >
                <div class="my-app-login">
                    <button
                        class="wallet-adapter-button wallet-adapter-button-trigger"
                        style="justify-content: center;"
                    >
                        Select Wallet
                    </button><!--<WalletButton>-->
                    <!--<WalletMultiButton>-->
                </div>
                <!--<Login>-->
            </li>
        </ul>
        <!--<Nav>-->
    </nav>
</header>

I've got a simple navbar in my app
nothing special

nav ul li a 

in chrome safari brave it is fine
but in firefox I've got an ugly
top dotted bar when I click a link

Dotted Bar

Is there a way to get rid of it?

I've tried with:

a::-moz-focus-inner {
  border: 0;
}

it doesn't work :(

CODE in a svelteKit application

<header
    class="sticky top-0 z-50 h-[50px] flex justify-start items-center px-3 md:px-9 lg:px-10 3xl:px-28 pt-5 bg-white/0"
>
    <a class="block" href="/"
        ><figure><img src="/images/logo.png" alt="Myapp" width="110" height="25" /></figure>
        <!--<Brand>-->
        <h1 class="hidden">Myapp</h1></a
    >
    <nav class="ml-auto hidden lg:block">
        <ul class="flex gap-4">
            <li
                class="grow-0 py-[7px] px-[9px] shadow-sm rounded-xl uppercase tracking-tight backdrop-opacity-[40px] transition ease-in-out duration-300 bg-white/90"
            >
                <a class="custom" sveltekit:prefetch="" href="/one">One</a>
            </li>
            <li
                class="grow-0 py-[7px] px-[9px] shadow-sm rounded-xl uppercase tracking-tight backdrop-opacity-[40px] transition ease-in-out duration-300 bg-black/90 text-white"
            >
                <a class="custom" sveltekit:prefetch="" href="/two">Two</a>
            </li>
            <li
                class="grow-0 py-[7px] px-[9px] shadow-sm rounded-xl uppercase tracking-tight backdrop-opacity-[40px] transition ease-in-out duration-300 bg-white/90"
            >
                <a class="custom" sveltekit:prefetch="" href="/three">Three</a>
            </li>
            <li
                class="grow-0 py-[7px] px-[9px] shadow-sm rounded-xl uppercase tracking-tight backdrop-opacity-[40px] transition ease-in-out duration-300 bg-white/90"
            >
                <a class="custom" sveltekit:prefetch="" href="/four">Four</a>
            </li>
            <li
                class="grow-0 py-[7px] px-[9px] shadow-sm rounded-xl uppercase tracking-tight backdrop-opacity-[40px] transition ease-in-out duration-300 bg-white/90"
            >
                <a class="custom" sveltekit:prefetch="" href="/five">Five</a>
            </li>
            <li class="pl-[85px]">
                <div
                    class="flex justify-center items-center w-[38px] h-[38px] shadow-sm rounded-xl bg-white/90"
                >
                    <svg
                        width="12"
                        height="12"
                        viewBox="0 0 12 12"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                        >stuff of svg</svg
                    >
                </div>
                <!--<NavSearch>-->
            </li>
            <li
                class="flex justify-center items-center shadow-sm rounded-xl uppercase tracking-tight bg-white/90"
            >
                <div class="my-app-login">
                    <button
                        class="wallet-adapter-button wallet-adapter-button-trigger"
                        style="justify-content: center;"
                    >
                        Select Wallet
                    </button><!--<WalletButton>-->
                    <!--<WalletMultiButton>-->
                </div>
                <!--<Login>-->
            </li>
        </ul>
        <!--<Nav>-->
    </nav>
</header>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文