CSS Sprite Compatibility in Firefox
I have a div element that uses the css classes below. Basically, I'm creating a sprite image link that changes on hover.
.home {
background: url('images/home.png') 0 0;
width: 150px;
height: 188px;
border: none;
}
.home:hover {
background-position: -150px 0;
}
When I tested it with different browsers, it seemed to work well with most browsers except for some versions of Firefox. On hover, it doesn't switch the img position. As I read from w3c for this to work in Firefox, the "background-attachment" property to "fixed". I did this and added the property 开发者_JAVA技巧to both classes and still didn't work. When I added the property, the image was centered, and whatever was not within the specified width and height were cut off.
This is a guess without seeing the problem, but sometimes using the background shorthand can be buggy in FF:
try :
.home {
backround-image: url('images/home.png');
background-position: 0 0;
height: 188px;
border: none;
}
.home:hover {
background-position: -150px 0;
}
You have to have no-repeat for background image. Firefox works fine with background-position but background-position-x and background-position-y wont work. I don't know what you are willing to do for which element, but it should work on block elements only. If it's not a block element, display: block is required
.home {
background: url('images/home.png') no-repeat 0 0;
width: 150px;
height: 188px;
border: none;
display: block;
}
Oops, it looks like I forgot to add the DOCTYPE tag at the beginning at the file, which contributed to the thing not working in FF.
Added
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
and it worked!
background-position: 0px 0px;
background-position: -150px 0px;
加载中,请稍侯......
精彩评论