html - 内部运行时 css 干扰页面默认 CSS

Question

我需要在我的 angularjs 代码中绑定(bind) html。

<div class="preview-container" slimscroll="{height: '', color: '#00AAFF', alwaysVisible: 'true'}">
    <div ng-bind-html='previewHtml' class="preview-container"></div>
</div>

previewHtml 的值是从服务器检索的，由它自己的 css 样式组成。previewHtml 的内部 css 对主机页面的默认 css 造成干扰。

从服务器检索到的 previewHtml 内容将如下所示。

    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
    <style type="text/css">
       ...some value 
    </style>
    <table > 
        ...some value  
    </table>
    </div>

有什么办法可以避免内部/运行时css引起的这种干扰

Answer 1

确保这一点的最好方法是使用内联样式，它比 <style> 中的样式更具体。标签。

 <div style="your_preview_style: here;" slimscroll="{height: '', color: '#00AAFF', alwaysVisible: 'true'}">
    <div ng-bind-html='previewHtml' class="preview-container"></div>
 </div>

还建议在您的 css 类名称中使用前缀，例如:

appInitial-preview-container

这可能会在不使用内联样式的情况下解决您的问题。