css - min-width on button causes space to the right of it in IE -
i investigating strange behavior of css
min-width
property in internet explorer. heard bugs text alignment, using min-width
. 1 new me.
<table cellspacing="0" cellpadding="0"> <tr> <td><button>einloggen</button></td> </tr> </table>
when set min-width
of button value stretch button space right of emerges/ td
gets wider. saw behavior in ie. checked opera, ff, chrome , safari, too.
here jsfiddle showing containing example.
is known bug? , there workarounds?
there appear strange issue @ play here internet explorer 9. it's interesting versions 8 , 10 both render demo properly, without issue.
that being said, regards ie9, have found workaround seems resolve issue. success using pseudo-element ::before
fallback:
/* ie9 */ button { min-width: 200px; } /* internet explorer 9 */ button::before { content: "" \9; display: block; width: 200px; }
fiddle: http://jsfiddle.net/jnduz/21/
while works, result in wider button in internet explorer 10 (pseudo-element width + parent padding/margins). these hacks have no business in ie10, it's difficult isolate them in css alone browsers. \9
trick can isolate non-ie browsers, there's better way:
<!--[if ie 9]><html lang="en-us" class="no-js ie9"><![endif]-->
by wrapping html tag in conditional comment, can target ie alone our fix:
/* internet explorer 9 */ .ie9 button::before { content: ""; display: block; width: 200px; }
Comments
Post a Comment