Remove the add-on in the IE button

Question

There are many buttons on my website. When viewed in Chrome, the width of the button simply fits into the text of the dynamic button, but in IE I see that extra indentation is created both on the left and on the right ...

Will there be any CSS rule that can allow me to pick up this add-on? Thanks.

Answer 1

You can use reset css as this avoids browser inconsistency.

Please refer to http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/

Visit http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/ for reset.css

Answer 2

Maybe a little late, but when I searched SO for the same issue today, I found this question . Obviously, this is not a real addition (in a sense, it cannot be disabled on padding:0px ), but rather one of those strange oddities that we all love so much about IE. (Note how the fake bar fills with the text length of the O_o button). Fortunately, there is a simple solution as described here .

Basically you add an overflow:visible; button overflow:visible; to the button (I don't need the extra width:auto; as described here). Don’t ask - it’s absolutely not what you might think it should be done, but okay ... This is IE Land and the rules are different. Just note that this does not seem to work when your buttons are inside a table cell.

I think CSS reset could solve this because someone has already included this in some global declaration. Just adding this answer to shed some light on how and why.

Never give up, people - our children will see a world without IE quirks ... Hopefully.

Answer 3

It was possible to avoid an additional interval in IE with an additional display of the operator: block; in CSS:

 .menu button{ display:block; width:100%; padding:0; } 

Note that I did not use width: auto, because in my case it was not an option - the buttons are empty, the width is taken from the parent div.