使用:锚元素之后的伪元素 - 浏览器差异

Question

我有一个<a>元素,之后我想>使用:after伪元素显示一个符号.

该<a>元素的内容是动态的,因此它的宽度变化,有时内容事件跨越了几行(因为该<a>元素是内<div>谁的宽度是固定的).

我希望>水平位置从最长行的末尾开始.也就是说,当我给它right:0;规则时,它应该在元素的最右边(垂直位置现在无关紧要):

这就是它在FF中的表现方式,但在Chrome和IE中,它>出现在最短行的末尾:

我想知道是什么原因导致了浏览器之间的差异,但更重要的是,我想所有的浏览器表现得像FF -放置:after在最长行的末尾.那可能吗？

我把上面的代码放在dabblet上

Answer 1

这是因为默认情况下您的a元素设置为显示inline,并且Firefox处理inline元素内的定位与Chrome和IE略有不同.

要在Chrome和IE中修复此问题(同时保留Firefox中的外观),只需为您的a元素inline-block显示:

a {
    position:relative;
    display:inline-block;
}

修改了Dabblet演示.