Jquery in Firefox not reporting border-bottom-width property correctly

Question

I'm programmatically changing the border-bottom-width using JQuery, which works fine. However, when reading the property back using JQuery I get inconsistent results cross-browser. For instance,

<td style="border-bottom: 30px solid rgb(199, 72, 72); line-height: 1px; font-size: 1px;">

When interrogated via Jquery using:

$('#element1').find('td').css('border-bottom-width');

In Chrome (version 33.0.1750.154 m) returns 30px, but in Firefox (version 28.0) and IE11 returns 15px.

Demonstrated in a fiddle here: http://jsfiddle.net/ceepster/tC9an/

The border width renders correctly in the browser

Anyone got any thoughts as to why this is and any workarounds I can use to get this reporting reliably cross-browser?

Answer 1

As @Allyanora, I'm trying to describe why it might be happening:

As different browsers apply display property for the td element differently, you need to apply the display property with block value. See the following picture for clear view:

working fiddle