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

问题描述

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

当用户想要在 Firefox 浏览器中使用键盘时，. menu-button按钮周围会发生意外行为。

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

我们的研究表明，具有 data-email="long" 属性的跨度具有 css 属性 display: inline-block，这使得该跨度可聚焦。需要 [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>

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

标签： htmlcssfirefoxbrowser

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

问题描述

解决方案

推荐阅读