display inline-block 使元素在 Firefox 中可聚焦答案

【问题标题】：display inline-block makes element focusable in Firefoxdisplay inline-block 使元素在 Firefox 中可聚焦
【发布时间】：2021-05-02 11:22:42
【问题描述】：

有谁知道为什么下面的问题只出现在 Firefox 浏览器中？以及如何解决这个问题？

当用户想要通过 Firefox 浏览器使用键盘时，. menu-button 按钮周围会出现意外行为。

如果您在. menu-button 按钮后按 Tab，则不会按预期出现下一个“测试 2”按钮，但焦点似乎消失了。如果您再按两次 TAB 键，您最终会出现“测试 2”按钮。

我们的研究表明，属性 data-email="long" 的 span 具有 css 属性 display: inline-block，这使得该 span 可聚焦。需要 [data-email="long"] 跨度上的显示内联块，以便长电子邮件在白色渐变后面挂钩。

您可以在此处找到该问题的演示（在 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>

只有按钮必须是可聚焦的，而不是跨度

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。

标签： html css firefox browser

【解决方案1】：

脏，但是：使用属性“tabindex”和正值（1 到 3）设置按钮，而按钮 #2 内的所有跨度都得到 tabindex="-1";刚刚尝试了这个 mod 并且至少在 FF85 中有效。

【讨论】：