IE11样式背景颜色

Question

我在 IE11 中遇到了一个奇怪的问题（在 Chrome 和 Edge 中正常工作），在某些情况下，背景颜色会隐藏其上方的文本。由于一些限制（公司计算机），无法使用企业模式或更新所有用户到 Win10，也无法修复 HTML，因为它是从公司外部的 Outlook 生成的。我正在尝试查找是否存在 IE11 的更新来解决这个问题。

<p style="direction: rtl;">
  <span dir="LTR" style="color: black; background-color: yellow;">Why Am I Yellow</span>
</p>

如果有人能够帮忙找到解决方法，或者甚至是一个可以在IE11上运行的版本，将不胜感激。

- Barakonda

---

如果您能为IE和其他浏览器添加截图，将有助于其他人理解问题。 - Nisarg Shah

Answer 1

将inline-block设置为样式似乎可以解决在我的IE11浏览器（版本11.0.9600.19267）上的问题。

<p style="direction: rtl;">
  <span dir="LTR" style="color: black; background-color: yellow; display: inline-block;">Why Am I Yellow</span>
</p>

- Temani Afif

---

我通过在“span”中添加style="direction: rtl;成功解决了这个问题。只是好奇哪一个更合适。 - Nik

@Nik，我很好奇为什么它最初不能工作。 - Temani Afif

如果我从 span 中删除 dir="LTR" 属性，它可以在不更改/添加任何 CSS 的情况下正常工作。 - Nik

谢谢您的回复，但正如我所说，我无法修改HTML，并且问题源于p和span之间的相反方向。通过删除其中一个或将两者的方向更改为RTL或LTR中的任何一个，问题将得到解决。不幸的是，我需要一个不改变HTML的解决方案，因为我无法控制它。 - Barakonda

@Barakonda，你连一行小的CSS代码都加不了吗？我没有改动HTML，只是添加了一行CSS代码，你可以将其链接到外部。 - Temani Afif

@TemaniAfif我在问题中添加的HTML是最简化版本，以复制该问题，真正的HTML是来自外部（用户生成）的Outlook邮件的一部分，我们将其显示在我们的系统的Web界面上，即使我想使用CSS修复它也是不可能的，因为没有硬编码格式的HTML，我对此束手无策。事实上，我们已经发现了其他六个出现此问题的案例，每个案例中有问题文本的层次结构都不同，而且由于法律法规的变化，甚至禁止修改CSS。 - Barakonda

Answer 2

根据您在问题中提到的，HTML是从您组织外部的Outlook生成的，因此无法修改HTML。

我在IE 11中尝试使用您的代码进行测试，并成功复现了该问题。

我知道您的用户无法使用企业模式。如果他们可以手动将此站点添加到兼容性视图中，则可以解决此问题。

请查看以下测试结果。

- Deepak-MSFT

---

谢谢回复，我会尝试这个方法并检查是否会影响网站的其他部分。无论结果如何，我都会回复的。 - Barakonda

遗憾的是，兼容性设置没有破坏网站，但也没有解决问题。可能是因为它在大量框架和内联框架中。如果您有其他解决方案，将不胜感激。 - Barakonda

我们需要能够复现问题的确切代码，才能尝试测试并提出更准确的解决方案，以帮助解决您的问题。 - Deepak-MSFT

HTML是在Outlook中编写的邮件的一部分，其中包含混合RTL（主）和LTR（子）语言，在某些情况下会出现这种情况，因此我们无法影响/获取有问题的代码。这就是为什么我想通过调整IE11来找到解决方法，因为我们绝对没有办法解决问题的根源。此外，该邮件是从公司外部接收的，我们无法强制执行任何规定，因此唯一的选择是在IE方面进行修复。 - Barakonda

正如您在上次评论中所说，“在某些情况下会发生这种情况”。由于我们不了解那个特定的情况，我们无法复现它。即使我们尝试使用rtl（主）和ltr（子）语言的混合，也不行。如果您能够张贴一些示例代码，那会更好。 - Deepak-MSFT