为什么这些项目不会出现在firefox浏览器上？

Question

我有这个页面：

http://paul.dac-proiect.ro/

在Chrome中一切都很好，但在Firefox中显示。

      <div class="social" style="float:right">
               <div id="facebook"></div>
               <div id="twitter"></div>
               <div id="link"></div>
       </div>

.pozitie{position: absolute;top: 200px;left: 39;color:#f9f9f9;"}

/* IMAGINI HOVER SOCIAL MEDIA */    
#facebook {
   background-image: url("http://placehold.it/26x26");
   width:26px;
   height:26px;
   float:left;
margin-right:5px;

}
#facebook:hover {
   background-image: url("http://placehold.it/26x26");
}

#link{
   background-image: url("http://placehold.it/26x26");
   width:26px;
   height:26px;
   float:left;

}
#link:hover {
   background-image: url("http://placehold.it/26x26");
}

#twitter{
   background-image: url("http://placehold.it/26x26");
   width:26px;
   height:26px;
   float:left;
   margin-right:5px;

}
#twitter:hover {
   background-image: url("http://placehold.it/26x26");
}

<div class="social" style="float:right">
  <div id="facebook"></div>
  <div id="twitter"></div>
  <div id="link"></div>
</div>

我尝试清理缓存但没有任何改变。 有谁知道这个问题出在哪里？

Answer 1

问题是由于课程"中的额外.pozitie导致Firefox忽略后续规则。删除"，然后规则才会生效。

当前语法不正确 - 无法在Firefox中使用

＆＃13;

＆＃13;

.pozitie{position: absolute;top: 200px;left: 39;color:#f9f9f9;"}
  
/* IMAGINI HOVER SOCIAL MEDIA */

#facebook {
  background-image: url("http://placehold.it/26x26");
  width: 26px;
  height: 26px;
  float: left;
  margin-right: 5px;
}
#facebook:hover {
  background-image: url("http://placehold.it/26x26");
}
#link {
  background-image: url("http://placehold.it/26x26");
  width: 26px;
  height: 26px;
  float: left;
}
#link:hover {
  background-image: url("http://placehold.it/26x26");
}
#twitter {
  background-image: url("http://placehold.it/26x26");
  width: 26px;
  height: 26px;
  float: left;
  margin-right: 5px;
}
#twitter:hover {
  background-image: url("http://placehold.it/26x26");
}

＆＃13;

<div class="social" style="float:right">
  <div id="facebook"></div>
  <div id="twitter"></div>
  <div id="link"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

新的正确语法 - 适用于Firefox：

＆＃13;

＆＃13;

/* IMAGINI HOVER SOCIAL MEDIA */

#facebook {
  background-image: url("http://placehold.it/26x26");
  width: 26px;
  height: 26px;
  float: left;
  margin-right: 5px;
}
#facebook:hover {
  background-image: url("http://placehold.it/26x26");
}
#link {
  background-image: url("http://placehold.it/26x26");
  width: 26px;
  height: 26px;
  float: left;
}
#link:hover {
  background-image: url("http://placehold.it/26x26");
}
#twitter {
  background-image: url("http://placehold.it/26x26");
  width: 26px;
  height: 26px;
  float: left;
  margin-right: 5px;
}
#twitter:hover {
  background-image: url("http://placehold.it/26x26");
}

＆＃13;

<div class="social" style="float:right">
  <div id="facebook"></div>
  <div id="twitter"></div>
  <div id="link"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

W3C验证器指出这一行是一个问题：https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fpaul.dac-proiect.ro%2Fwp-content%2Fthemes%2Fwpbootstrap%2Fstyle.css&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

Answer 2

注意：这仅适用于运行广告拦截器

这是您的命名约定，因此您使用的是某个广告拦截器。我正在使用adguard并阻止.social类

#ad_global_below_navbar, img[width="88"][height="31"], #fb-root, #fb_groups, #flickr_badge_source, #flickr_badge_uber_wrapper, #odklocs0, #odklocs1, #vk_auth, #vk_donate, #vk_group, #vk_groups, #vk_like, #vk_poll, #vk_share, #vkshare0, .DiggThisButton, .addthis_toolbox, .btn-social, .google-buzz-button, .odkl-share-oc, .odkl-share-oc-fc, .odkl-share_button, .share-menu, .share-panel, .social, .social-links, .vk-like, .vk_share_button, a.mrc__plugin_like_button, a.mrc__plugin_recommendations, a.mrc__plugin_share_friends, a.mrc__share, a.odkl-klass, a.odkl-klass-s, a.odkl-klass-stat, a[href="http://del.icio.us/post"], a[href="http://twitter.com/share"] {
  display: none!important;
}

从检查代码开始，您的css样式似乎没有应用于firefox中的#facebook ID