CSS Sprites制作导航悬浮高亮各方案比较

只使用一张CSS Sprites图片,制作导航菜单背景,鼠标悬浮高亮(其实就是切换背景图)。

由于各浏览器目前对“background-position-x”这种“不规范”的css属性支持程度不一,于是派生出多种实现方案。


方案一:


使用单背景图,背景图x,y坐标分开设定

不支持Firfox、Opera。可统一设定某一坐标,坐标变化时易于维护

有n个元素项时,所需样式规则数一般为:n + 2

HTML XML Browser Scripting

方案二:


使用单背景图,背景图x,y坐标同时设定

全浏览器兼容。无法统一设定某一坐标,坐标变化时不便维护

有n个元素项时,所需样式规则数一般为:n * 2

HTML XML Browser Scripting

方案三:


使用CSS3多背景图

不兼容IE8及更早版本。可统一切换要显示的背景图,但写法繁琐,坐标变化时不便维护

有n个元素项时,所需样式规则数一般为:n + 2

HTML XML Browser Scripting

方案四:方案一、三结合版


结合使用单背景图和多背景图

全浏览器兼容。看似完美的兼容性解决方案,实际上写法繁琐,容易出错

有n个元素项时,所需样式规则数一般为:n + 2

HTML XML Browser Scripting

方案五:其实不是改变背景图片的坐标,而是改变内嵌元素的相对位置


使用内嵌的元素展示背景图

全浏览器兼容。可统一设定某一坐标,坐标变化时易于维护

有n个元素项时,所需样式规则数一般为:n + 2

HTML XML Browser Scripting

方案六:最简方案!

使用至少两张CSS Sprites图片,坐标一次定型,常态和高亮状态分别使用不同的图片。

此方案唯一的缺点就是要多出一张图片。

代码略。


测试环境:

Windows XP

IE 6~8

Firefox 3.6

Firefox 10.0.2

Chrome 17

Safari 5.1

Opera 11.61

你可能感兴趣的:(css,class,浏览器,url,float,firefox,HTML,CSS)