Text input background scrolling in IE7

问题

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.

Numerous questions have been asked and blogged.

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.

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.

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;
}

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?

回答1:

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

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

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.

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

来源：https://stackoverflow.com/questions/9124290/text-input-background-scrolling-in-ie7

标签

css

internet-explorer-7