有人知道为什么以下问题只出现在Firefox浏览器吗?如何解决这个问题?
当用户想在Firefox浏览器中使用键盘时，. menu-button按钮周围出现意外行为。
如果你在. menu-button按钮后按tab键，你不会像预期的那样在下一个"测试2"按钮上出现，但焦点似乎消失了。如果你再按TAB键两次，你最终会看到' test 2 '按钮。
我们的研究表明，带有data-email="long"属性的span有CSS属性display: inline-block，使这个span可聚焦。[data-email="long"] span上的display inline-block是需要的，这样长电子邮件就可以在白色渐变后面挂起来。
你可以在这里找到这个问题的演示(在Firefox中测试):
/* base */
html, body {
padding: 20px;
}
ul {
display: flex;
list-style: none
}
li {
position: relative;
}
button {
margin: 10px;
}
.menu-button {
display: inline-block;
position: relative;
color: #003082;
cursor: pointer;
font-weight: 700;
line-height: 1.5625rem;
width: 85px;
text-align: left;
&:focus {
&::after {
content: '';
display: block;
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 4px;
border: 1px solid blue;
box-shadow: 0 0 0 1px #0063d3, 0 2px 28px rgba(#000, 0.1);
}
outline: none;
}
}
.menu-button-text {
margin-right: 0;
&::before {
content: "";
height: 2.1875rem;
width: 2.1875rem;
position: absolute;
left: -3px;
top: -4px;
}
}
[data-email=long] {
display: inline-block;
width: 68px;
overflow-x: hidden;
vertical-align: top;
&::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 3rem;
height: 100%;
z-index: 1;
opacity: 1;
background: linear-gradient(90deg,hsla(0,0%,100%,0),#fff 90%);
}
}
/* utils */
.unbutton {
border: none;
background: none;
padding: 0;
}
.alt {
position: absolute;
-webkit-clip-path: polygon(0 0,0 0,0 0,0 0);
clip-path: polygon(0 0,0 0,0 0,0 0);
width: 1px;
height: 1rem;
margin: 0;
overflow: hidden;
white-space: nowrap;
}<ul>
<li>
<button>
test 1
</button>
</li>
<li>
<button class="unbutton menu-button">
<span class="alt">logged in with:</span>
<span class="menu-button-text menu-button-text--full">
<span class="h-acc-visible-l" data-email="long" >test@test.com</span>
</span>
</button>
</li>
<li>
<button>
test 2
</button>
</li>
</ul>只有按钮是可聚焦的，而不是span(s)
Dirty, but:用属性"tabindex"和正值(1到3)，而所有的跨度在按钮#2内得到tabindex="-1";刚刚尝试了这个mod，至少在FF85中工作。