html - 如何在 IE7 中删除 DIV 上的 1px 额外边框？

Question

我让每个 div 都包含一个文本字段。我有高度的文本字段:25px 和 margin-top:5px 的 div；在 IE7 以外的所有浏览器中，页面呈现的 div 具有与文本字段相同的高度和适当的边距。但是在 IE7 中，它在垂直方向上为 div 提供了额外的空间，因此我的页面看起来被拉伸(stretch)了。

我尝试过各种解决方案，例如 display:none、clear:both、padding:0、margin:0。我也在所有浏览器中比较了盒子模型，在 IE7 中只有它在 div 元素上显示额外的高度。

是否有任何 CSS 技巧可以解决这个 IE7 问题？谢谢。

Sample code :- 
HTML : 
<div>
<input class="myInput"  type="text" />
</div>
<div>
<input class="myInput"  type="text" />
</div>

CSS:

.myInput{
    border: 1px solid #336699; color: #666666; font-size: 10px; font-weight: normal; height: 13px; font: arial; padding: 5px;
}

.ie7 div{ padding:0 margin:0;}

这将使我的文本字段的总高度达到 25px。封闭的 div 没有任何样式。我在 IE7 中尝试过 css hacks

Answer 1

我猜是因为在现代浏览器中有一些 <input>类型具有属性 box-sizing:border-box或者您已在某处设置该属性；这使得 height不随边框值增加，但在 IE7 中不支持该属性。

你可以为 IE7 做一个特定的 value hack 并降低你的高度折扣边框大小:

.yourinput {
  box-sizing:border-box;
  border: 1px solid gray;
  height:25px;
  *height:23px; /*real height - border size*/
}