如何让我的输入字段在浏览器中看起来相同？

我有一个带有两个输入字段的登录页面。在Chrome，Firefox和IE10中，它们看起来不错，但在IE 7,8,9中，它们太薄了。这是字段的HTML和类。如何让我的输入字段在浏览器中看起来相同？

HTML：

<div class="login-input"> 
<input data-val="true" data-val-required="Username is required." id="Username" name="Username" type="text" value=""> 
</div>

CSS：

.login-input input 
{ 
width: 250px; 
height: 14px; 
}

这是它的外观在Chrome，火狐，IE10（正确的样子） http://i.imgur.com/6swf7.png

这是它的外观在IE 7,8,9（不正确的外观） http://i.imgur.com/ltzdG.png

谢谢！

来源

2013-01-10 Jonathan

我在我的网站上遇到同样的问题。我通过为IE加载不同的样式表来解决它。请参阅http://stackoverflow.com/questions/3541982/apply-css-rules-if-browser-is-ie – Bart

尝试设置填充值。 – dezman

重置css文件有时用于具有“起始一致性”点，使基本相同 - 例如，1em的默认值因浏览器而异。 –

你是否尝试设置填充值？

来源

2013-01-10 15:36:22

我刚刚删除了高度属性，并在输入字段的顶部和底部添加了填充，看起来好多了。谢谢！ – Jonathan

你可以试试box-sizing到border-box，但是对于ie7有no support。

input { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box; 
}

来源

2013-01-10 15:38:19 tborychowski

除了高度以外，还使用行高。

.login-input input 
{ 
    width: 250px; 
    height: 14px; 
    line-height: 14px; 
}

来源

2013-01-10 15:38:48

如何让我的输入字段在浏览器中看起来相同？

回答

相关问题