Question

我有下一个代码：

<div class="form_field">
<input type="text" />
</div>

样式

.form_field { height:22px; border:1px solid #B7AB8C; background:#FFFFEA; padding:0 5px; line-height:22px; }
.form_field input[type="text"] { width:100%; border:none; border:0; border-color: transparent; margin:0; padding:0; height:22px; line-height:22px; }

在IE7中，我无法删除输入字段周围的边框。

有什么想法？

对我自己的最佳决定，我确定为字段“输入”设置了一个类，推荐为“tylerdurden”。

我将此字段的下一个属性添加为“background：transparent; vertical-align：top;”。

但我无法覆盖字段“input”的属性line-height。有什么想法？（：

补充：我删除了容器.form_field的属性“height” - 帮助垂直对齐文本。

Answer 1

对于IE7，您必须为输入元素添加一个类名，或者以不同的方式选择它，因为IE＆lt; 8不支持属性选择器。

但是这个css应该使用正确的选择器：

.form_field input
{
  border:0
}

但请注意，将border-color: transparent;与border: none;一起使用会通过删除边框尺寸来影响输入的框模型。这将改变输入与周围元素的关系，如垂直定位。

Answer 2

这是因为输入[type =“text”]的以下代码在IE7或以下版本中是未知的。

.form_field input[type="text"] { width:100%; border:none; border:0; border-color: transparent; margin:0; padding:0; height:22px; line-height:22px; }

注意：仅当指定了！DOCTYPE时，IE7和IE8才支持属性选择器。 IE6及更低版本不支持属性选择。

您可能希望将其添加到html的顶部。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Answer 3

CSS选择器中的"text"周围不需要引号。而不是所有border条素，只需自己border: 0;（或者如果你想彻底border: 0px none transparent，那就太过分了）

Answer 4

将课程提供给文本字段;

.form_field .textInput
{
    border:none;
}

然后在你的HTML中;

<div class="form_field">
    <input type="text" class="textInput" />
</div>

Answer 5

试试这个

<!--[if IE]>
<style type="text/css">
.form_field input{
  filter:chroma(color=#000000);
  border:none;
}
</style>
<![endif]-->

Answer 6

似乎IE7并不想要＆＃34; none＆＃34;价值，＆＃34; 0＆＃34;似乎工作。

删除IE7中输入字段周围的边框

6 个答案: