某些CSS属性未在iframe中应用

Question

首先，让我通过说我不尝试将其他CSS应用于父文档中iframe的内容作为开头。我在一个完美工作的文档时遇到问题，当在iframe中显示该文档时，样式会中断。我之所以这么说，是因为每当我在Google上搜索此问题时，我就知道了。

我有一个HTML文档，该文档可以正常工作，并且在浏览器中单独查看时也可以完美显示，但是我需要在iframe中显示此内容。问题在于，似乎是在随机选择并选择要应用的CSS属性。

例如，如果您检查下面链接的小提琴并检查iframe中的列表项之一，则可以看到li标签设置了border-bottom。但是，如果您查看代码中的.service ul li选择器，则会看到实际上有一个border-left和border-right也被忽略了。这只是发生的许多怪异事件之一。如果您仔细检查文档，将会看到更多的情况。

我从未见过这样的事情，这根本没有意义。我可以从检查器中实际看到元素，其中来自同一选择器的某些CSS属性正在工作，而有些则被忽略。该文档可以在iframe外部毫无问题地显示。

fiddle

顺便说一句，代码是从数据字符串而不是URL加载的，因为它是从ejs模板呈现的，并且不在公共路线上提供，我也不希望这样做。但是，这应该无关紧要。

Answer 1

css中的井号“＃”符号冲突。将您的十六进制颜色切换为红色可解决您的提琴问题。您将不得不想出另一种添加颜色的方法，而不会在属性内的iframe html代码内引入不需要的字符。