问题
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?
回答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
来源：https://stackoverflow.com/questions/22934782/jquery-in-firefox-not-reporting-border-bottom-width-property-correctly