jQuery - css（'border-width'）在Firefox上返回为空字符串，但Chrome上没有返回

本文介绍了jQuery - css（'border-width'）在Firefox上返回为空字符串，但Chrome上没有返回的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图用我的jQuery / CSS调试跨浏览器问题。

I'm trying to debug a cross browser issue with my jQuery/CSS.

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

I'm attempting to get the border width of a class. The class is set in CSS like so:

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

在jQuery中，我试图获取边框宽度如下： / p>

In jQuery, I am attempting to get the border-width like so:

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

这似乎在Chrome中以字符串1px正常返回。但是，在Firefox中它总是返回一个空字符串。我已经在Chrome和Firefox的开发人员工具中逐步检查了这些结果。

This seems to return properly as a string of "1px" in Chrome. However, in Firefox it always returns as an empty string "". I've checked these results stepping through the JS debuggers in the developer tools on both Chrome and Firefox.

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

I've been going nuts trying to debug this issue and I can't seem to find any concise answers. Perhaps the community here can give me a clue as to how I can fix this issue.

谢谢！

推荐答案

诸如border，background甚至border-width的属性都是简写的。它们不受支持。而是使用更具体的属性：border-top-width，border-bottom-width。

Properties such as "border", "background", and even "border-width" are shorthand. They are not supported. Instead, use more specific properties: "border-top-width", "border-bottom-width".

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

The following line should work in all browsers:

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