Question

我已经创建了一个在文档顶部有一个元素的应用程序。在这个元素之后我有另一个div。

当我按下位于元素1中的按钮时，网站html内容被加载到第二个div中，将所有脚本和css注入文档本身。

问题是当这些css干扰我的元素1 css时。 F.e：网站加载一个改变身体边缘的css：

body{margin:0 8px!important}

如何在元素1上动态回避此效果？

我做不到：

#element1{
    margin: 0 -8px;
}

元素因为它不是动态的，任何其他网站都可以使用其他参数。

还有其他办法吗？

Answer 1

在这种情况下有两种可能的解决方案（我知道）：

第一个选项 - 使用iframe

在第二个div中有一个iframe元素，您可以将另一个HTML网站加载到iframe中。这样，脚本和CSS不会应用于主网站，换句话说：iframe中竞争HTML的脚本和CSS仅限于iframe。

<html>
  <body>
    <div class='element'>
      <div><iframe><!--this is where other website fills in --> </iframe></div> 
    </div>     
  </body>
</html>

第二个选项 - 使用CSS优先级规则

根据CSS规则，HTML文档中最后引用的文件将具有最高优先级。因此，您的HTML必须如下所示：

<html>
  <body>
    <div class='element'>
      <div> <!--this is where other website fills in --> </div> 
    </div>
  <!-- your custom CSS goes here.-->
  </body>
</html>

从技术上讲，将自定义CSS放在HTML中的层次结构下方的任何位置都可以。

注意：如果页面包含大量其他HTML，则将CSS添加到底部可能会影响UI。由于CSS在底部引用，因此HTML将首先加载，而不会显示任何样式丑陋直到加载CSS。您可以做的只有那些应该覆盖其他网站样式的CSS并将它们放在不同的文件中，并在底部引用这个新文件，并将您的常规文件放在顶部部分本身。

我如何从身体后续加载的CSS继承？

1 个答案: