方向:rtl不能在IE11上工作

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 ...任何关于如何修复或者我做错了什么的想法？

任何帮助都会被贬低,谢谢

Answer 1

你没有做错什么,所以不用担心.这只是IE,虽然它知道方向:rtl,忘记将它应用到:之前.

使其工作的一种方法是制作跨度rtl 的容器,以便整个跨度(包括其:之前)被反转.所以给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及更高版本).