jQuery - css('border-width') 在 Firefox 上返回为空字符串，但在 Chrome 上不返回 [重复]答案

【问题标题】：jQuery - css('border-width') returning as an empty string on Firefox but not on Chrome [duplicate]jQuery - css('border-width') 在 Firefox 上返回为空字符串，但在 Chrome 上不返回 [重复]
【发布时间】：2013-06-15 02:01:32
【问题描述】：

我正在尝试使用我的 jQuery/CSS 调试跨浏览器问题。

我正在尝试获取类的边框宽度。类在 CSS 中设置如下：

.mod_button {
    position: relative;
    color: #fff;
    border-color: #06253e;
    border-width: 1px;
    border-style: solid;
}

在 jQuery 中，我试图像这样获得边框宽度：

var bWidth = $('.mod_button').css('border-width');

这似乎在 Chrome 中作为“1px”字符串正确返回。但是，在 Firefox 中，它总是以空字符串“”的形式返回。我已经在 Chrome 和 Firefox 的开发者工具中通过 JS 调试器检查了这些结果。

我一直在努力调试这个问题，但似乎找不到任何简明的答案。也许这里的社区可以给我一个线索，告诉我如何解决这个问题。

谢谢！

【问题讨论】：

你到底想做什么？我建议使用.hasClass() 之类的方法，而不是直接查看css。每个浏览器都有不同的默认设置和 css 实现。
你试过var bWidth = $('.mod_button').css("border-left-width");吗？或您需要的任何边框
我创建了一个演示，这是真的：jsfiddle.net/d93nL
小提琴 FTW：jsfiddle.net/hkbLs/1

标签： jquery css firefox

【解决方案1】：

诸如“border”、“background”甚至“border-width”之类的属性都是简写。它们不受支持。相反，请使用更具体的属性：“border-top-width”、“border-bottom-width”。

以下行应该适用于所有浏览器：

var bWidth = $('.mod-button').css('border-top-width');

【讨论】：

谢谢！这似乎奏效了。对于类似/重复的问题，我们深表歉意。
哇，这对我有帮助，试图让我的 css('border-color ').. 在 chrome 中它有效，在 Firefox 中我得到一个空字符串！？ .. 现在尝试了 'border-top-color' 并且效果很好.. 干得好。