html - 为什么这些元素没有出现在 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 中工作:

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

新的正确语法 - 将在 Firefox 中工作:

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

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