我有一个 HTML 和 CSS 代码,它在 Chrome 上运行良好。但是,在 Firefox 上,行为有所不同。
button#groupToggle {
background: 0 0;
border: 1px solid #e6e6ed;
color: #222;
float: none;
margin: 0 0 0 6px;
min-width: 200px;
padding: 8px 10px;
position: relative;
text-align: left;
cursor: pointer;
}
button#groupToggle::after {
background: #FFF;
border: 1px solid #e6e6ed;
color: #f8971d;
content: '>';
display: inline-block;
font: 900 12px/2.1 'Font Awesome 5 Free';
height: calc(100% + 1px);
left: 100%;
position: absolute;
text-align: center;
top: -1px;
width: 2em;
cursor: pointer;
border: ;
}
<button id="groupToggle">
<span>All selected</span>
</button>
在All Selected之后,有一个按钮是通过伪CSS创建的(after)。在 Chrome 上悬停时可以单击它,但在 Firefox 上不能单击。有什么想法吗?
火狐版本:64.0
链接:https://codepen.io/anon/pen/zymvPj (请使用Firefox进行测试)。
最佳答案
实际上没有办法让它的行为方式与在 Chrome 中一样。 :after
和 :before
不会被 Firefox 视为 DOM 元素。但是,您可以稍微作弊。改变所有浏览器的行为。这是我的解决方案建议,看起来和您想要的一样。
button#groupToggle {
background: 0 0;
border: 1px solid #e6e6ed;
color: #222;
float: none;
margin: 0 0 0 6px;
min-width: 224px;
/* increased by 24px (after width) */
padding: 8px 10px;
position: relative;
text-align: left;
cursor: pointer;
z-index: 0;
}
button#groupToggle::after {
background: #FFF;
border: 1px solid #e6e6ed;
color: #f8971d;
content: '>';
display: inline-block;
font: 900 12px/2.1 'Font Awesome 5 Free';
height: calc(100% + 1px);
position: absolute;
text-align: center;
top: -1px;
width: 2em;
position: absolute;
cursor: pointer;
border: ;
right: -1px;
/* -1px to neutralize border */
}
/* ONLY TO SHOW IT WORKING */
button#groupToggle:focus {
outline: red solid 10px;
-moz-outline: red solid 10px
}
<button id="groupToggle">
<span>All selected</span>
</button>
关于javascript - 无法在 Firefox 上点击::之后,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54134954/