jQuery CSS功能在Firefox和IE 11上的怪异行为

Question

我试图做一些非常简单的事情，当我开始调试代码时，直到看到它，我才知道出了什么问题。 我简直不敢相信，这个简单的功能在Firefox或IE 11上将不起作用，而在Chrome上将起作用。

想象一下，我在这个div元素中添加了2个CSS类。

<div id="box" class="class1 class2"></div>

其中class2具有border-top属性。

.class2 {
   border-top: 1px solid #626262;
}

现在，我想看看此box div是否具有任何border-top属性。

您认为的第一件事是：

$("#box").css("border-top")

对？ 这将返回border-top属性（如果有）。 好吧，这在Chrome上有效，并返回border-top属性...在Firefox和IE 11中返回空字符串，这怎么可能？

有什么问题的主意吗？ 或以其他方式在所有浏览器上获取它？

提前致谢。

编辑：最终做了一些对我有用的事情，与此无关。 我只是注意边框的宽度，我将宽度的值应用于0px以外的值。 更有道理，因为我有其他默认边框样式无缘无故地带有“ 0px none＃000000”。

Answer 1

根据jQuery的CSS文档：

Retrieval of shorthand CSS properties (eg, margin, background, border), although functional with some browsers, is not guaranteed. For example, if you want to retrieve the rendered border-width, use: $( elem ).css( "borderTopWidth" ), $( elem ).css( "borderBottomWidth" ), and so on.

css（）方法

因此，基本上，您必须使用原始方法来查找每种浏览器用于许多属性的内容。...或者您可以按照A. Wolff的建议进行操作，而只需检查类即可。

Answer 2

您是否尝试过搜索更原子的CSS属性（即，非零的“ border-top-width”而不是“ border-top”）？

Answer 3

您应该能够获得单值属性（例如border-top-width的计算值，但是对于多值属性（例如border-top ，浏览器，jquery和DOM API都存在差异：

 for (var properties = ['border-top', 'border-top-width'], i = 0, l = properties.length; i < l; i++) { console.log(properties[i] + ': ' + $('#box').css(properties[i])); console.log(properties[i] + ': ' + window.getComputedStyle(document.getElementById('box')).getPropertyValue(properties[i])); } 

 .class2 { border-top: 1px solid #626262; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="box" class="class1 class2">This is a test.</div>