Код, подобный Facebook, выдает ошибки css/javascript

хочу добавить на свой сайт простой модуль Facebook «Мне нравится». я, используя код, сгенерированный с сайта разработчика facebook, добавил это сразу после открытия тега body:

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

кажется, он работает нормально, за исключением того, что этот код дает мне много предупреждений css/js, которые я вижу в firebug, например:

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 на этой странице, так что, может быть, это вызывает некоторые проблемы?


facebook css facebook-like
person abiku    schedule 08.09.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Эти ошибки, которые вы получаете, связаны с тем, что некоторые свойства CSS необходимо определить более чем в одной форме, чтобы обеспечить максимальную совместимость с различными браузерами.

Эти дополнения к стандартным объявлениям называются префиксами поставщиков. Для получения дополнительной информации вы можете взглянуть на эту статью: маленькая ссылка.

Например, возьмите следующий 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).

Другими словами, невозможно избежать этих ошибок, если вы хотите, чтобы кнопка «Нравится» работала в большинстве современных браузеров.

Примечание. когда браузер видит неизвестное свойство/правило, он игнорирует объявление, если ваши правила упорядочен правильно, то это безвредно.

person Chris    schedule 08.09.2012
comment
хорошо, понимаю это, но у меня также есть ошибка со свойством Top и Right в таких строках, как: .fb_dialog_close_icon{background:url(static.ak.fbcdn.net/rsrc.php/v2/yA/x/IE9JII6Z1Ys.png) без повтора прокрутки 0 0 прозрачный;_background- изображение: URL-адрес (static.ak.fbcdn.net/rsrc.php/v2/y6/x/\ 9;справа:7px\9}. Почему они используют такие значения, как top:8px\9;right:7px\9 ? странный - person abiku; 08.09.2012
comment
@abiku Я не хочу показаться грубым, но какое тебе дело? :) Это, вероятно, хаки для определенных браузеров (или также могут быть проблемы с кодировкой) - пока это работает, не беспокойтесь. Вы не можете получить безошибочную страницу с хаками, специфичными для браузера. Я уверен, что фронтенд-разработчики Facebook хорошо об этом подумали, не волнуйтесь :P - person Chris; 08.09.2012