在IE7中滚动的文本输入背景

Question

我认为我们大多数人都知道IE7中这个恼人的bug，如果输入的文本长于文本输入的宽度，文本输入的背景图像将滚动。

Numerousquestions已被asked和blogged。

这些问题和帖子都需要一个围绕文本输入包装div。这是我无法完成的工作，因为我正在使用由CMS生成的标记。

但是，我想优雅地降低体验。对于IE7及以下版本，我很高兴不显示背景图片并仅显示颜色。

这是正在使用的CSS：

form input[type="text"], form input[type="password"]{ 
    background-image: url('bg.png'); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 

    padding-left: 4px; 
    padding-right: 4px; 

    width: 100%; 
    height: 30px; 
     border: #008296 1px solid; 
} 

我曾尝试加入background-attachment: fixed但背景图像停止在IE，火狐和Chrome的所有版本中显示！由于我只想在IE7及以下版本中使用这种行为，除了创建仅限IE7的样式表之外，我该如何去做这件事？

Answer 1

您总是可以使用IE7特定的CSS选择器筛选器来覆盖您想要的IE7样式。

要创建仅适用于IE7的类，只需将*:first-child+html放在类名前。

另一种选择是声明特定于IE的CSS规则（又称IE CSS黑客）。这将涉及在仅适用于IE7及更低版本的属性之前加上星号（*）。尽管这不是有效的CSS语法，但这并不是很受重视。

你会发现这个网站有趣对付IE和CSS黑客：http://www.javascriptkit.com/dhtmltutors/csshacks2.shtml