无法在Firefox上单击:: after

时间：2019-01-10 18:37:15

标签： javascript html css

我有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>

“全部选定”之后，有一个通过伪CSS创建的按钮（之后）。当将鼠标悬停在Chrome而不是Firefox上时，可以单击它。有什么想法吗？

Firefox版本：64.0

链接：https://codepen.io/anon/pen/zymvPj（请使用Firefox对其进行测试）。

2 个答案:

答案 0 :(得分：2)

实际上没有办法使其行为与Chrome中的行为相同。 Firefox不会将:after和:before视为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>

答案 1 :(得分：1)

字体超赞5-伪元素

免费实体版要求

  1. 将其保存在<head>标记中：
  

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

  1. In your stylesheet：
.icon::after {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.arrow::after {
  content: '\f105';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}
     

content属性需要Unicode而不是>

  1. 这两个类的名称是任意的，但请确保它们在同一标签上：
<button class='icon arrow'></button>

绝对定位

Font-Awesome（或缺少字体）不是问题，但是我不得不面对房间里的大象。无论如何，left:100%将该部分推到了按钮的边界之外，看起来Firefox好像将伪元素视为不属于按钮一样，而Chrome显然记得。解决方法很简单：删除left:100%并添加right:0

演示

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;
}

.icon::after {
  background: #FFF;
  border: 1px solid #e6e6ed;
  color: #f8971d;
  font-size: 12px;
  line-height: 2.7;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  height: calc(100% + 1px);
  right: 0;
  position: absolute;
  text-align: center;
  top: -1px;
  width: 2em;
  cursor: pointer;
}

button#groupToggle::after {
  content: '\f105';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

<button id="groupToggle" class='icon'>
  <span>All selected</span>
</button>

相关问题
最新问题