IE7 strange background-position behavior_问答_开发者

IE7 strange background-position behavior

开发者 https://www.devze.com 2023-01-30 02:47 出处：网络

I have two labels with the same class. It is my css of this class: .req开发者_高级运维uired { background-image:url(/img/required.png);

I have two labels with the same class. It is my css of this class:

.req开发者_高级运维uired
{
    background-image:url(/img/required.png);
    background-position: right;
    background-repeat:no-repeat;
    padding-right:10px;
}

In all browsers two elements has red star in right-top. But in IE 7 only first element has this star. What I am doing wrong? Please help me.

@Alexander.Plutov: Using a required.png which I borrowed for the exercise, the following code sample seems to work fine (I just condensed your CSS rules to the shorthand version):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style type="text/css">
.required
{
    background: url(img/required.png) no-repeat right top;
    padding-right: 15px;
}
</style>
</head>

<body>

<form action="4430474.htm" method="post">
    <div>
        <label for="field1" class="required">Field 1:</label>
        <input type="text" name="field1" id="field1" size="40" />
    </div>
    <div>
        <label for="field2" class="required">Field 2:</label>
        <input type="text" name="field2" id="field2" size="40" />
    </div>
</form>

</body>
</html>

Do you perhaps employ any float or position rules for anything in your form? These are usually the things that misbehave in IE6/7.

Not sure if this would change anything, but have you tried