文本在文本框中仅在IE中过高 [英] Text too high within textbox only in IE

问题描述

我的HTML表单中的文本框的高度为30像素，输入的文本显示在文本框的垂直中心，就像我想在每个浏览器中 - 除了IE。

我已经在Chrome，FF和Opera检查过了。 IE8显示输入的文本高于中心，看起来真的很糟糕。我试着用填充，边缘和线高度玩，但不能让文本从顶部边缘。

有关CSS属性的任何建议，我需要编辑以使文本居中吗？

有问题的网站是 lazydragonbooks.com 。可立即显示的两种表单是注册和登录表单。

Chrome

>

IE 8

解决方案

好吧，搞砸IE8开发工具我发现

使用条件语句来避免混乱正确的浏览器。我建议使用单独的样式表：

 <！ -  [if IE 8]> 
< link rel =stylesheettype =text / csshref =ie8.css> 
<！[endif]  - > 
  

在ie8.css中。

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

这当然是特定于具有设置高度的输入。

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

解决方案

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.

这篇关于文本在文本框中仅在IE中过高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！