jquery - CSS :after not working properly in FireFox

Question

我知道这个问题之前已经被问过，但建议的 workaround在 Firefox 中无法正常工作，尽管在 Chrome 和 IE 中同样可以完美工作。 “+”和“-”符号似乎落在标题下方，理想情况下应该位于标题顶部的中间。下面是 fiddle :

http://jsfiddle.net/7tg188u5/1/

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

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

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