|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
可以增加更多的用户而不需要建立独立的版本。可以一次设计,随处发布。
网页制造poluoluo文章简介:改良IE6中a与a:hover的背景撑持.
在IE6中背景属性加a与a:hover二者的伪类分离,在一般逻辑下为什么不起感化?测试这成绩存在IE6及以下扫瞄器,这成绩我常常碰到在之前一向接纳别的办法取而代之,如今找到了另外一种办理。
以导航为例,上面的代码完整切合CSS的逻辑,实际上应当是”a:hove的背景图片”分离”a.nav_1的背景定位”而得出料想的了局,但IE6却非常地只显现背景图片而没有对上背景坐标Demo(请利用IE6与IE6以上扫瞄器尴尬刁难比)。
*{margin:0;padding:0;}
.header{position:relative;width:745px;height:225px;background:url(bg.jpg)no-repeat;}
/*导航*/
#navp{position:absolute;left:0;bottom:0;width:100%;}
#nava{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#nava:hover{background:url(bg.jpg)no-repeat00;}
/*导航经由形态:IE6及以下扫瞄器不兼容,别的扫瞄器一般*/
#nava.nav_1{width:80px;background-position:0-213px;}
#nava.nav_2{width:86px;background-position:-80px-213px;}
#nava.nav_3{width:227px;background-position:-166px-213px;}
#nava.nav_4{width:92px;background-position:-393px-213px;}
#nava.nav_5{width:98px;background-position:-485px-213px;}
#nava.nav_6{width:162px;background-position:-583px-213px;}
之前我利用的办理计划是,再经由形态增加对应的选择符。这办法感到代码显得对照痴肥,而关于代码洁癖的我是对照难承受的Demo。
/*导航经由形态:之前的办理计划*/
#nava.nav_1:hover,
#nava.nav_1{width:90px;background-position:0-211px;}
#nava.nav_2:hover,
#nava.nav_2{width:86px;background-position:-80px-213px;}
#nava.nav_3:hover,
#nava.nav_3{width:227px;background-position:-166px-213px;}
#nava.nav_4:hover,
#nava.nav_4{width:92px;background-position:-393px-213px;}
#nava.nav_5:hover,
#nava.nav_5{width:98px;background-position:-485px-213px;}
#nava.nav_6:hover,
#nava.nav_6{width:162px;background-position:-583px-213px;}
实际上”a.nav_1″选择符比”a:hover”要高,但我实验增加!important时测试发明IE6却显现一般Demo。
而测试别的扫瞄器也无反作用,此次仿佛与haslayout有关了,但其发生缘故原由与了局也却让人百思不得其解
/*导航经由形态:如今的办理计划*/
#nava.nav_1{width:80px;background-position:0-211px!important;}
#nava.nav_2{width:86px;background-position:-80px-213px!important;}
#nava.nav_3{width:227px;background-position:-166px-213px!important;}
#nava.nav_4{width:92px;background-position:-393px-213px!important;}
#nava.nav_5{width:98px;background-position:-485px-213px!important;}
#nava.nav_6{width:162px;background-position:-514px-213px!important;}
ytzong供应的办理办法很不错赞~,看来不利用背景缩写仍是有它的优点。IE6在背景相加的逻辑上切实其实是有成绩,一样测试过border属性则不存在这成绩Demo。
*{margin:0;padding:0;}
.header{position:relative;width:745px;height:225px;background:url(bg.jpg)no-repeat;}
/*导航*/
#navp{position:absolute;left:0;top:180px;width:100%;}
#navpa{float:left;height:44px;overflow:hidden;line-height:200px;font-size:0;}
#navpa:hover{background-image:url(bg.jpg);background-repeat:no-repeat;}
/*导航经由形态:IE6及以下扫瞄器不兼容,别的扫瞄器一般*/
#navpa.nav_1{width:80px;background-position:0-213px;}
#navpa.nav_2{width:86px;background-position:-80px-213px;}
#navpa.nav_3{width:227px;background-position:-166px-213px;}
#navpa.nav_4{width:92px;background-position:-393px-213px;}
#navpa.nav_5{width:98px;background-position:-485px-213px;}
#navpa.nav_6{width:162px;background-position:-583px-213px;}
不晓得还没有更好的办法呢~
</p>
不管你用什么工具软件制作网页,都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼,同样内容的网页,有的人做出来有几十KB,而高手做出来只有十几KB。 |
|