Question

我有div，每个包含一个Text字段。我有高度的文本字段：25px和div与margin-top：5px; 在除IE7之外的所有浏览器中，页面呈现的div具有与文本字段相同的高度和适当的边距。但是在IE7中，它为div提供了额外的空间，因此我的页面看起来很紧张。

我尝试了各种解决方案，例如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

尝试使用IE7 hack，如下所示，

*+html .YourClassName { /*CSS rule*/ }

Answer 2

IE7和其他人将在输入div上设置自己的边框。因此，如果您不想要边框，请将边框设置为0px。

您可以这样做：

input {
   border: 0px solid silver;
}

或甚至更具体的

input[type="text"] {
   border: 0px solid silver;
}

Answer 3

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

您可以为IE7制作一个特定的值，并在您的高度上降低边框大小：

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

Answer 4

这可能是您的另一种选择。您可以使用条件css，您可以为IE7编写单独的样式。您可以访问以下链接，在那里您可以看到条件css的用法。

http://www.conditional-css.com/usage

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

4 个答案: