IE搜索输入默认值

Question

我遇到了一点浏览器兼容性问题 我有一个搜索输入字段<input type="search">
而在Chrome中，高度正如我想要的那样（30px），
IE中的高度总是2px（32px）

继承人的css代码：

.search_field{
    width: 80%;
    height: 30px;
    border: solid;
    border-width: 1px;
    border-color: #eeeeee;
    margin: 5px 0 5px 0;
    padding: 0px;
}
.search_field:focus{
    outline-width: 1px;
    outline-style: solid;
    outline-color: #919191;
} 

HTML：

<li>
    <b>Search</b><span style="float: right; font-size: 10px;">Advanced Search</span><br>
    <input type="search" class="search_field">
    <input type="submit" value="Search" class="search_input">
</li>

除了那些我已经尝试改变的IE默认值之外还有吗？

谢谢！

Answer 1

  

除了我已经尝试过的那些之外，还有其他IE默认值吗？   改变？

您可以使用IE Developer工具轻松检查元素样式属性。 只需按 F12 键并检查输入搜索字段。

单击屏幕底部的“开发人员工具栏”窗口内的箭头按钮，将光标放在元素上，然后单击该元素，选择需要检查的元素

Answer 2

我认为，这是因为您正在添加边框。所以，从顶部1px和从底部1px ，这样它比它多2px。尝试修复一次。

即使这不起作用，那么你可以添加一些css hacks，如：

_height : 28px;  /* IE 6 */
*height: 28px; /* IE 7 */

注意：请记住这些不是有效的CSS。我的意思是，当你验证它时，它不会。参考：http://www.javascriptkit.com/dhtmltutors/csshacks3.shtml

Answer 3

按照@Passerby的建议在评论中添加以下CSS代码：

.search_field { box-sizing: border-box; }

原因是否则height属性指定内容宽度，不包括填充和边框，并且上方和下方的1px边框因此使总高度为30 + 1 + 1像素。 box-sizing属性可用于覆盖此属性。

可以说IE（和Firefox）在这里做的是正确的，因为HTML5 CR在关于form field rendering的部分中说，在“标准模式”中，input元素带有{{ 1}}具有正常的CSS大小调整，而在Chrome中，它在浏览器样式表中有type=search。