小部件CSS与网站CSS冲突

我为我的网站构建一个小部件，并在加载时动态添加CSS，但问题与主机网站CSS文件冲突。下面的代码是我的小部件已CSS文件安装在装载：小部件CSS与网站CSS冲突

function main() { 
    jQuery(document).ready(function($) { 
    /******* Load CSS *******/ 
    var css_link = $("<link>", { 
      rel: "stylesheet", 
      type: "text/css", 
      href: "http://example.com/widget/green.css" 
     }); 
     css_link.appendTo('head'); 
     var txt; 
     txt='<div id="wrapper">'; 
     txt=txt+'<ul class="tabs">'; 
     txt=txt+'<li id="fixtures_tab"><a href="#fixtures">Hepsi</a></li>'; 
     txt=txt+'<li id="live_tab"><a href="#live">Canlı</a></li>'; 
     txt=txt+'<li id="finished_tab"><a href="#finished">Bitmiş</a></li>'; 
     txt=txt+'<li id="program_tab"><a href="#program">Başlamamış</a></li>'; 
     txt=txt+'<li id="postpond_tab"><a href="#postpond">Ertelenen</a></li>'; 
     txt=txt+'<li id="selected_tab"><a id="f" href="#fav">Oyunlarım (0)</a></li>'; 
     txt=txt+'</ul>'; 
     txt=txt+'<div class="tab-container">'; 
     txt=txt+'<div id="fixtures" class="tab-content"><script type="text/javascript">get_All_Today_Matches();</script></div>'; 
     txt=txt+'<div id="live" class="tab-content"><script type="text/javascript"></script></div>'; 
     txt=txt+'<div id="finished" class="tab-content"><script type="text/javascript"></script></div>'; 
     txt=txt+'<div id="program" class="tab-content"><script type="text/javascript"></script></div>'; 
     txt=txt+'<div id="postpond" class="tab-content"><script type="text/javascript"></script></div>'; 
     txt=txt+'<div id="fav" class="tab-content"><script type="text/javascript"></script></div>'; 
     txt=txt+'</div>'; 
     txt=txt+'</div>'; 
     $('#widget-container').html(txt); 
    }); 
}

我想知道有没有什么办法来隔离部件我的CSS？

由主函数被调用的匿名函数（实现隔离）

PS的方式：我用CSS重置，但它仍然同样的问题。

来源

2013-04-20 unique_programmer

搜索命名空间。另一种解决方案可能是将你的小部件嵌入到iframe中。 – 2013-04-20 11:07:25

对不起，IFrame不适合我。 – 2013-04-20 11:16:31

您可以做的唯一事情就是查看影响代码的页面上的所有样式，并抵消嵌入式CSS文件中的这些样式。因此，如果主机页面显示字体大小：20像素，但您想要16像素，请在您的CSS中执行此操作，或在主机页面之后放置！重要标志。您也可以使用非稳定的Shadow-DOM：http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/ – 2013-04-20 11:38:53

您可以命名空间的所有CSS。这将避免你不得不与普通CSS类名的问题，如container或wrapper，例如：

.my-amazing-widget--tab-container { 
    height: 100px; 
}

如果你所有的CSS被命名空间像上面，它是不太可能，该网站将在有你的窗口小部件名称他们的CSS。

我会避免使用类似!important这样的声明作为另一个用户在他们的评论中提出的建议 - 如果您覆盖了一个常见的类，那么您的样式最终会对网站的样式产生负面影响。

我也会避免像导入CSS重置到您的小部件的任何全局声明。 CSS重设覆盖元素，如body，div等，这可能会对主机网站的CSS产生负面影响。

您将需要更新所有相关的HTML以使用命名空间。对于像这样的问题，CSS命名空间是最好的方法，并且是开发要嵌入其他网站和应用程序的小部件时的最佳实践。

来源

2015-06-08 23:11:42 Tina

小部件CSS与网站CSS冲突

回答

相关问题