Firefox和Chrome的不同背景位置

Question

我在div中使用图像作为背景，我想为Firefox和Chrome使用不同的位置。

我想将这个用于Mozila：

background-position: left -14px bottom -1px !important;

我想将这个用于Chrome：

background-position: left -14px bottom -2px !important;

有可能吗？请指教我..

Answer 1

您可以使用FF和Chrome的特定选择器：

定位Chrome：

@media screen and (-webkit-min-device-pixel-ratio:0) {
   .yourElement {
     background-position: left -14px bottom -2px !important;
   }
}

目标FF：

@-moz-document url-prefix() { 
  .yourElement {
    background-position: left -14px bottom -1px !important;
  }
}

这比使用用户代理更好。

Answer 2

首先：在编码之前尝试重置CSS？

我不认为它们在Chrome和Firefox之间是不同的像素事物（但不是IE）

Soloution：在自定义CSS

之前添加CSS重置样式表

示例： http://necolas.github.io/normalize.css/

重新检查你的位置agian

祝你好运！

Answer 3

检查浏览器是否为Chrome的代码：

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

和firefox：

var FIREFOX = /Firefox/i.test(navigator.userAgent);