为mozilla浏览器编写特定的css代码

Question

我编写的CSS代码如下

  div.itemFacebookButton {float:right;margin:-9px 0 0 0;}

但是在Mozilla中，facebook like按钮与其他社交按钮对齐。 当我将margin-14px放入时，所有按钮都在Mozilla中排成一行，但它会干扰Chrome中的对齐。

然后我决定为Mozilla编写特定的代码。以下是我尝试但它不起作用。我的代码出了什么问题。

 -moz-div.itemFacebookButton { float:right; margin:-14px 0 0 0; !important; }

Answer 1

div.itemFacebookButton { float:right; margin:-9px 0 0 0; } 

@-moz-document url-prefix() {  
   div.itemFacebookButton { float:right; margin:-14px 0 0 0; }
}

Answer 2

没有-moz-div选择器，但有other Gecko-specific CSS (pseudo) selectors。您可以将它们与普通选择器组合以创建特定于Mozilla的规则，因为如果浏览器包含至少一个不受其支持的选择器（这是CSS错误处理和部分实现的标准行为），则浏览器会忽略整个规则。例如，您可以像

一样编写选择器

:moz-any-link, div.itemFacebookButton {float:right;margin:-14px 0 0 0; !important;}

但可能更好的解决方案是检查导致浏览器不一致的按钮样式并重写/简化它，这样就不必使用浏览器特定的黑客攻击。