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

Question

我有一个问题，我不明白。

在一个域上我得到了代码:

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

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;
}

<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>

工作完美。看起来像:

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

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

如何定义只有列表(表格)的li和ul会被css命令修改，而不是整个站点的uls和lis？希望有人能帮助我。非常感谢。

Answer 1

当您说不同的“域”时，您的意思是像“site1.com”和“site2.com”吗？如果是，请确保您包含的脚本支持跨域请求 (CORS)。

您看到 box-sizing 样式被划掉的原因是因为 chrome 支持无前缀属性，所以它忽略了 vendor 前缀属性。

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