不同网站上的列表看起来不同

Question

我遇到了问题，我不明白。

在一个域名上我得到了代码：

＆＃13;

＆＃13;

$(document).ready(function() {
    $('#example2 ul').click(function() {
        var href = $(this).find("a").attr("href");
        if(href) {
    	    alert(href);
    	    return false;
    	    window.location = href;
       }
    });
});

＆＃13;

table#example2 {
	border-collapse: collapse;	
}
ul:nth-child(even) {
    background-color: #f1f1f1;
}
ul:nth-child(odd) {
background-color: #fff;
}
#example2 ul:hover {
	background-color: #ccc;
}
#example2 li {
  display: inline;
  padding-top: 3px;
  padding-right: 5px;
  padding-left: -30px;
  list-style-type: none;
}
#example2 ul:hover {
	cursor: pointer;
}
#example2 ul {
    list-style:none;
    padding-left:0;
    margin-left: -40px;
}

＆＃13;

<div style="overflow:auto;height:150px;border: 2px solid grey;">
  <ul id="example2" style="width:100%">
      <ul>
        <li style="padding-left:10px"><a href="http://www.w3schools.com">AAAAAAAA</a></li>
        <li>BBBBBBBBBBB</li>
        <li>CCCCCC</li>
      </ul>
      <ul>
        <li style="padding-left:10px"><a href="http://www.w3schools.com">AAAAAAAA</a></li>
        <li>BBBBBBBBBBB</li>
        <li>CCCCCC</li>
      </ul>
      <ul>
        <li style="padding-left:10px"><a href="http://www.w3schools.com">AAAAAAAA</a></li>
        <li>BBBBBBBBBBB</li>
        <li>CCCCCC</li>
      </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

完美的作品。看起来像：

但如果我现在想在另一个域上使用它 - 我复制并粘贴它 - 但它不起作用。甚至没有悬停效应。 它看起来像这样：

想问题是什么？似乎我的css要求被“用户代理样式表”覆盖。 这是什么意思，我该如何解决？

如何定义只有列表（表）的li和ul将被css命令而不是整个站点的uls和lis修改？希望有人能给我带来好处。非常感谢你。

Answer 1

当你说不同的“域名”时，你的意思是“site1.com”和“site2.com”，如果是这样，请确保你所包含的脚本支持跨域请求（CORS）。

您看到box-sizing样式划掉的原因是因为chrome支持无前缀属性，因此忽略了供应商前缀属性。

如果您遇到浏览器页面看起来不同的问题，请在自定义css之前插入重置或规范化样式表，这将使所有样式在不同浏览器中相同。最受欢迎的资源之一是https://github.com/necolas/normalize.css/。此外，使用W3C验证器确保您的HTML有效，某些浏览器将优雅地处理无效代码，其他浏览器则不会。