css - Facebook 喜欢的代码给出了 css/javascript 错误

Question

想在我的网站上添加简单的 facebook“赞”模块。我正在使用从 Facebook 开发者网站生成的代码在打开正文标签后立即添加:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/pl_PL/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

然后在页面内:

<div class="fb-like" data-href="my site url here" data-send="false" data-width="550" data-show-faces="false"></div>

它似乎工作正常，除了这段代码给了我很多我在 Firebug 中看到的 css/js 警告，比如:

unknown property „-moz-border-radius”, unknown property: "moz-outline-style.3",[],function(a,b,c,d,e,f){(function(){var g={}.toString,h,i,j,k=e.exports={},l...

这样的错误有很多。

你知道如何解决这个问题吗？整个页面似乎工作正常，但我不喜欢在我的页面上出现此类问题。我也在这个页面中使用 jquery，所以这可能会导致一些问题吗？

Answer 1

你得到的这些错误是因为有一些 CSS 属性需要以不止一种形式定义，以最大限度地兼容不同的浏览器。

这些添加到标准声明中的内容称为供应商前缀。有关更多信息，您可能想看看这篇文章:little link .

例如，采用以下 CSS:

.roundcorners {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

-moz-border-radius 适用于旧版本的 Firefox，新版本支持 border-radius。 -webkit-border-radius 适用于支持 WebKit 的浏览器(Chrome、Safari)。

换句话说，只要您希望点赞按钮在大多数现代浏览器中正常工作，就无法避免出现这些错误。

注意:当浏览器看到未知的属性/规则时，它会忽略声明，所以只要您的规则是 ordered properly , 那么这是无害的。