CSS：在 FireFox 中无法正常工作后答案

【问题标题】：CSS :after not working properly in FireFoxCSS：在 FireFox 中无法正常工作后
【发布时间】：2015-08-11 15:31:30
【问题描述】：

我知道之前有人问过这个问题，但建议的 workaround 在 Firefox 中对我不起作用，尽管在 Chrome 和 IE 中同样适用。 “+”和“-”符号似乎落在标题下方，理想情况下应该在标题顶部的中间。下面是小提琴：

#accordion [aria-selected="false"] .panel-title a:after{
    font-family: 'Glyphicons Halflings';
    content: "\2b";
    float: right;
    color: red !important;
    font-size: 1em; line-height: 1.5em;
    position: relative;
    display:inline-block;
}
#accordion  [aria-selected="true"] .panel-title a:after{
    font-family: 'Glyphicons Halflings';
    content: "\2212";
    float: right;
    color: red !important;
    font-size: 1em; line-height: 1.5em;
    position: relative;
    display:inline-block;
}

【问题讨论】：

我在 Firefox 中，看到右侧显示的加号/减号，究竟是什么问题，它们没有在栏中浮动？
@Brian，是的，这些应该在右上方的中间。
这对我来说似乎是正确的行为，基于 float:right 通常对布局所做的事情。使用:before 可能会更好：jsfiddle.net/7tg188u5/3。
这工作得很好。我以前做过，并且 :before 为我工作，但我错过了这次。无论如何，谢谢你。您可以将此添加为答案，以便我将其标记为已接受吗？

标签： jquery html css

【解决方案1】：

#accordion .panel-heading .panel-title {
    position: relative;   /* <<< New rule */
}
#accordion [aria-selected="false"] .panel-title a:after{
font-family: 'Glyphicons Halflings';
    content: "\2b";
    float: right;
    color: red !important;
    font-size: 1em; line-height: 1.5em;
    position: absolute;   /* <<< New rule */
    right: 0; top: 0;     /* <<< New rule */
    display:inline-block;
}
#accordion  [aria-selected="true"] .panel-title a:after{
    font-family: 'Glyphicons Halflings';
    content: "\2212";
    float: right;
    color: red !important;
    font-size: 1em; line-height: 1.5em;
    position: absolute; /* <<< New rule */
    right: 0; top: 0;   /* <<< New rule */
    display:inline-block;
}

注意上面指示调整行的 cmets，这是正确使用您链接的“解决方法”。您最有可能需要调整右/行高，因为这确实将它们逼近角落，但这应该可以正常工作。

【讨论】：

【解决方案2】：

试试这个：

.accordion-toggle {
    width: 100%;
    display: block;
    position:relative;
}
#accordion [aria-selected="false"] .panel-title a:after{
    font-family: 'Glyphicons Halflings';
    content: "\2b";
    right:10px;
    color: red !important;
    font-size: 1em; line-height: 1.5em;
    position: absolute;
    display:inline-block;
}
#accordion  [aria-selected="true"] .panel-title a:after{
    font-family: 'Glyphicons Halflings';
    content: "\2212";
    right:10px;
    color: red !important;
    font-size: 1em; line-height: 1.5em;
    position: absolute;
    display:inline-block;
}
.padding0
{
    padding:0px;
}

这是更新后的jfiddle

【讨论】：