I have a big problem to make my site comp. with older browsers.
I use label+input text on many parts of my site. Somewhere IE7 did not show the background of the label.
The css of the label for login:
label[for="login"] {
-moz-border-radius:5px 0 0 5px;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
background:url(moduletable_header_color.png) repeat-x left bottom;
border-bottom:#b3aba4 1px solid;
border-left:#b3aba4 1px solid;
border-radius:5px 0 0 5px;
border-right:#b3aba4 1px solid;
border-top:#b3aba4 1px solid;
color:#fff;
display:block;
float:left;
font-family:'TitilliumText22LMedium';
font-size:12px;
font-weight:bold;
height:25px;
line-height:25px;
margin:0;
padding-bottom:0;
padding-left:10px;
padding-right:10px;
padding-top:0;
text-shadow:1px 1px 0 black;
width:140px;
}
I use this same code an other page for an other label:
.formField label {
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
background:url(moduletable_header_color.png) repeat-x left bottom;
border-bottom:#b3aba4 1px solid;
border-left:#b3aba4 1px solid;
border-radius:5px 0 0 5px;
border-right:#b3aba4 1px solid;
border-top:#b3aba4 1px solid;
color:#fff;
display:block;
float:left;
font-family:'TitilliumText22LMedium';
font-size:12px;
font-weight:bold;
height:25px;
line-height:25px;
margin:0;
padding-bottom:0;
padding-left:10px;
padding-right:10px;
padding-top:0;
text-shadow:1px 1px 0 black;
width:140px;
}
And the 2nd is work we开发者_如何学Cll. The first work well on other browsers. What should be wrong? Im pullin out my hair..
I hope, IE7 won't support Attribute selectors (label[for="login"]). When I check with w3c it will work if we put doctype. Here is the example:-
http://www.w3schools.com/css/tryit.asp?filename=trycss_attselector_value
More details Here
http://www.w3schools.com/css/css_attribute_selectors.asp
Yes, it is not supporting [for="login"]
To make it work in IE7 and compliant browsers, use this selector:
label[for="login"], label[htmlFor="login"]
For details on this IE7 bug, see: http://reference.sitepoint.com/css/attributeselector#compatibilitysection
IE7 doesn't let you select labels with the 'for' attribute. Other attributes work, but trying to select an element either of these ways won't work:
label[for=test],
label[for] {
/* THIS CODE WILL BE IGNORED */
}
You'll have to select the element another way, such as with an ID or a class instead.
IE7 also has problems using attributes for the selections of other elements. For example, trying to do table th[cellpadding=0]
as a selector won't work either.
精彩评论