：在伪不考虑方向（rtl）之后？ (火狐)答案

【问题标题】：:after pseudo not taking direction (rtl) in consideration? (Firefox)：在伪不考虑方向（rtl）之后？ (火狐)
【发布时间】：2012-01-03 11:01:40
【问题描述】：

我有这个 css 在每个外部链接后放置一个图标：

a[target="_blank"]:after {
    background: url("images/external_icon.png") 0 0 no-repeat;
    border: 0 none;
    content: "";
    padding: 0 14px 0 0;
}

如果我改为改为:before，图标将出现在链接前面。到目前为止，一切顺利。

但在我从右到左的网站版本中，使用direction: rtl; 时，图标仍然出现在元素的右侧，而不是“翻转”到另一侧。更改为 :before 仍会使图标出现在元素的右侧。

这是一个已知的 FF 错误吗？还有其他解决方案吗？（在 Chrome 中运行良好）

【问题讨论】：

标签： css firefox right-to-left

【解决方案1】：

好的，所以我找到了解决方案。改为内联块。

display: inline-block;
height: 13px;
width: 13px;

简单的解决方案，但并非总是那么容易。

我仍然觉得问题中的 css 可能是浏览器错误？

【讨论】：

你可以查看他们的 Bugzilla (bugzilla.mozilla.org) 看看你是否能找到关于这个错误的任何信息。如果你没有找到它，你应该归档它。 bugzilla.mozilla.org/enter_bug.cgi

【解决方案2】：

Firefox 的行为似乎是正确的：:after 的呈现应该与在a[target="_blank"] 末尾插入这些样式的空范围的呈现相同。如果您尝试这样做，您会在 Chrome 和 Firefox 中获得相同的行为，并且它与 :after 的 Firefox 行为相匹配。

不过，您可能需要提交 WebKit 错误。

【讨论】：