button styling in IE
I noticed that IE sometimes has ve开发者_如何学Pythonry large padding around button text. It seems to be proportional to the amount of text the button has. This makes for very ugly buttons.
I am hesitant to make buttons with fixed width because of internationalization issues. Same goes for percent widths.
How has people dealt with this short of styling DIVs like buttons?
Here is a fix that works for me:
<!--[if IE]>
<style type="text/css">
input {
overflow: visible;
padding-left:2px;
padding-right:2px;
}
</style>
<![endif]-->
This makes the trick:
input[type='button'], input[type='submit'] { overflow: visible; }
/* add above also your desired button padding if you want. */
FYI:
- If you want you don't have to use IE conditonal comment because this CSS does not disturb the way buttons are displaied on other browsers.
- On IE7 works, but IE6 does not support
[type='...']selectors, therefore it's going to ignore this style. For IE6 the only way aroud this is to apply a class to every button and add the same CSS{ overflow: visible; }for such class. - IE8 does not need this anymore because they finally fixed this one.
I never noticed this until your posted this question - but you're right. The amount of padding on the button seems to be a "percentage" of the length of text, which means it gets much wider when you add more text to the button.
If it is just buttons you want to adjust the behaviour on, this works:
input[type='button'] {
overflow: visible;
}
You don't need to make this conditional as it doesn't affect the button display in other browsers. You could change the rule to be "submit" as well as "button" too. This removes the automatic psuedo-padding entirely and allows you to add your own style rules.
I would adjust the padding of the buttons through CSS.
input {
padding: 0; }
Removing the padding will restrict the button size to fit the contents.
Make sure you add this doctype to the top of your page and it won't do that anymore:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
You can read up on what this does here: http://www.w3.org/TR/xhtml1/ but basically it tells the page what sort of HTML you want to use.
加载中,请稍侯......
精彩评论