方向：rtl 在 IE11 上不起作用答案

【问题标题】：direction: rtl not working on IE11方向：rtl 在 IE11 上不起作用
【发布时间】：2015-08-13 00:06:25
【问题描述】：

我已经根据this question设置了邮件混淆

CSS：

.e-mail:before {
    content: attr(data-website) "\0040" attr(data-user);
    unicode-bidi: bidi-override;
    direction: rtl;
}

HTML：

<span class="e-mail" data-user="otcatnoc" data-website="moc.shtopurg">

但它在 IE 11 上不起作用...关于如何修复它或我做错了什么的任何想法？

任何帮助将不胜感激，谢谢

【问题讨论】：

“它在 IE 11 上不起作用”是什么意思？
我试过你的代码，但它在 IE11 上不起作用。如果这是一个错误或有意来自 MS，我不会感到惊讶。如果是 IE（我猜是任何版本），我会使用图像来保护您的电子邮件。

标签： css html twitter-bootstrap obfuscation

【解决方案1】：

你没有做错任何事，所以不用担心。只是IE虽然知道direction:rtl，却忘记将它应用到:before。

使其工作的一种方法是制作 span rtl 的 container，这样整个 span，包括它的 :before，都会被反转。所以给 p 一个 id 并应用样式。

#mailbox {
  direction: rtl;
  unicode-bidi: bidi-override;
  text-align: left;
}
.e-mail:before {
  content: attr(data-website)"\0040" attr(data-user);
}

<p id="mailbox">
  <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
  <span class="e-mail" data-user="otcatnoc" data-website="moc.shtopurg"></span>
</p>

适用于我测试过的所有浏览器（FF 3.6 及更高版本、Chrome 20 及更高版本、IE8 及更高版本）。

【讨论】：