Bug 11688 – Inline !important CSS behaves wrong, specifically: <hr> margins

• Component: CSS
• Status: RESOLVED DUPLICATE

[Alexei Svitkine]

In all modern browsers, except Safari (tested with 10.4.8's shipping version, and nightly WebKit r17840), the following will display some amount of margin around a <hr> tag:

<hr style="margin:7 0 7 0 !important; margin:0">

This acts in two ways. For browsers that understand !important, it applies the first margin, for everything else it applies the second styling. It appears that Safari handles !important incorrectly when it is inline.

This produces the following results: Opera, Firefox, etc all render it with the !important margin, meaning a top and bottom margin of 7px. WinIE renders it with the other margin of 0px, but since its default hr comes with non-compliant padding, it looks the same as Opera and Firefox.

Only in Safari, it behaves differently. That is, a 0px margin is applied, and therefore there is no margin at all around the <hr> because Safari doesn't have an extra implicit border on <hr> like WinIE.

This behaviour should be addressed to support inline !important, and therefore behave like Firefox and Opera.

[Alexei Svitkine]

Created attachment 11622 [details]
Test case

[Matt Lilek]

*** This bug has been marked as a duplicate of 4128 ***