Text too high within textbox only in IE

问题

The textboxes in my HTML forms have a height of 30px, and the entered text appears in the vertical center of the textboxes, just as I want in every browser - except IE.

I've checked it in Chrome, FF and Opera. IE8 shows the entered text higher than the center which looks really bad. I tried playing around with the padding, margin and line-height, but cannot get the text to budge from the top edge.

Any suggestions on what CSS property do I need to edit to center the text? I could add it as a IE specific style, if needed.

The website in question is lazydragonbooks.com. Two forms immediately visible are the 'Register' and 'Login' forms.

Chrome

IE 8

回答1:

Well, messing with IE8 developer tools I found that setting padding-bottom: 0; and padding-top: 10px; aligned the text correctly.

You would have to use a conditional statement to avoid messing up proper browsers. I would recommend using a separate stylesheet:

<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8.css">
<![endif]-->

Within ie8.css..

   input[type="text"] {
            padding-top: 10px;
            padding-bottom: 0;
    }

This is of course specific to an input with the set height that you are using.

回答2:

you can use margin or padding like this for IE

*padding-top:/*px*/;
*margin:/*px*/;

来源：https://stackoverflow.com/questions/9482418/text-too-high-within-textbox-only-in-ie