IE7中的文本输入背景滚动 [英] Text input background scrolling in IE7

问题描述

我想我们大多数人都知道IE7中的这个烦人的bug，如果输入的文本长于文本输入的宽度，文本输入的背景图像就会滚动.

I think most of us know about this annoying bug in IE7 where the background image of a text input will scroll if the text entered is longer than the width of the text input.

众多问题已这些问题和所有问题都需要一个问题，才能在文本输入周围包裹一个 div .这是我无法完成的工作，因为我正在使用CMS生成的标记.

Those questions and post all require one to wrap a div around the text input. This is something that I cannot do as I am working with markup generated by a CMS.

但是，我想优雅地降低体验.对于IE7及以下版本，我很满意不显示背景图像而只显示颜色.

However, I would like to gracefully degrade the experience. For IE7 and below, I am happy with not displaying the background image and just displaying a color.

这是正在使用的css:

This is the css being used:

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，firefox和chrome中都不再显示！由于我只希望IE7及以下版本的这种行为，除了创建仅IE7样式表之外，我该如何做?

I have tried adding background-attachment: fixed but the background-image ceases to be shown in all versions of IE, firefox and chrome! Since I only want this behaviour for IE7 and below, how can I go about doing this besides creating an IE7 only stylesheet?

推荐答案

您始终可以使用特定于IE7的CSS选择器过滤器来覆盖所需的IE7样式.

You could always use an IE7 specific CSS selector filter to override your desired styles for IE7.

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

To make a class that applies only to IE7, simply put *:first-child+html in front of your classname.

另一个选择是声明特定于IE的CSS规则(也称为IE CSS hacks).这将涉及在仅适用于IE7及更低版本的属性之前放置一个星号( * ).由于它不是有效的CSS语法，因此并未受到高度重视.

Another option is to declare CSS rules that are specific to IE (aka IE CSS hacks). This would involve putting an asterisk (*) before the attribute that is only to apply for IE7 and below. This isn't as highly regarded though since it is not valid CSS syntax.

您可能会发现此站点对于处理IE和CSS黑客很有趣: http://www.javascriptkit.com/dhtmltutors/csshacks2.shtml

You may find this site interesting for dealing with IE and CSS hacks: http://www.javascriptkit.com/dhtmltutors/csshacks2.shtml

这篇关于IE7中的文本输入背景滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！