火狐浏览器中如何去掉顶部的虚线
我的应用程序中有一个简单的导航栏 chrome safari 勇敢中没有什么特别的,
nav ul li a
很好 但在 Firefox 中我有一个丑陋的 单击链接时的顶部虚线
有办法摆脱它吗?
我尝试过:
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
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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论