为两种不同的浏览器使用两种不同的填充答案

【问题标题】：Use two different paddings for two different browsers为两种不同的浏览器使用两种不同的填充
【发布时间】：2013-08-09 10:53:09
【问题描述】：

我想为 Chrome 和 Firefox 添加两个不同的填充，并希望在相同的样式表中使用它。（不能单独使用）这是我想要的两种样式。

火狐浏览器

padding: 0 0 0 14px !important;

Chrome

padding: 0 0 0 0px !important;

我对样式表的了解很少，甚至不知道这是否可能。欢迎任何形式的帮助，谢谢。

更新

我的按钮代码是

<button class="buttonClass" data-dojo-type="dijit.form.Button" onclick="buttonToggle(this);" id="butid">
                            <input type="image" class="ns" onclick="buttonToggle(this);" value="" />

【问题讨论】：

不推荐使用用户代理嗅探，这是不可能的，请问您为什么需要这样做？
好吧，我有一个由 dojo 预先完成的按钮。我想为该按钮设置图像。当我根据 Chrome 设置填充时，它在 Firefox 中不可见。当我为 Firefox 使用填充时，它会在 chrome 中显示额外的空间。
尝试为不同的浏览器设置不同的 CSS 不是一个好主意。当你在 IE、Chrome、Safari 和 Firefox 中进行测试时，你最终会得到看起来不同的东西，更不用说旧版本的 IE。
你能更新你的帖子，把 html 和 css 分配给按钮吗，这些怪癖通常意味着还有另一个问题发生
如果没有 CSS，我无法弄清楚很多，这可能是盒子大小的问题，尝试将其添加到您的 css 文件并告诉我它是否有帮助button{ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

标签： css web stylesheet padding

【解决方案1】：

我没试过。但它应该像这样工作。

这里是通过 jQuery 进行浏览器检测的链接：http://api.jquery.com/jQuery.browser/

$(function() {
  if ($.browser.mozilla) {
    $('body').addClass("firefox");
  } else if ($.browser.chrome) {
    $('body').addClass("chrome");
  }
});

【讨论】：

自 jQuery 1.9 起已被删除，请不要使用此

【解决方案2】：

我通过添加它来处理 Firefox 来解决它。

    @-moz-document url-prefix(){
            #butFullScreen .ns, #butFullScreen .fs {
                padding: 0 0 0 14px;
                height:0px;
                width:0px;
}

在其他浏览器上使用时

width:14px;
height:14px;
color: transparent;

非常感谢大家的帮助。

【讨论】：