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

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -