hover 在 ie 中使用失效问题
2014-05-26 19:00
357 查看
ie下的 fiter属性会导致hover效果失效
修改前
修改后
修改前
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>剑灵 </title> <style> div,p,li,ul,dl,dt,dd,input,textarea,fieldset{margin:0;padding:0;} ul,li{ list-style:none;} a{outline:none;} body{background:#000;margin:0;padding:0;} .page_wrap{width:739px;height:564px; background:#000 url("jianling.png") no-repeat; position:relative;} .page_wrap .page_navi{width:620px;height:38px;display:block; position:absolute; top:170px; left:61px; border-bottom:1px solid red;background-color:#010101; _background-color:#111; filter:alpha(opacity=80); border-right:1px solid red;} .page_wrap .page_navi li{ width:122px; height:38px; float:left;} .page_wrap .page_navi a{width:120px; height:35px; color:#fff; display:block;text-align:center;font-size:13px; text-decoration:none;float:left; border:1px solid red;border-bottom:3px solid #000; border-right:0; line-height:35px;} .page_wrap .page_navi a:hover{color:red;border-bottom-color:red;} .page_wrap .page_adv{width:620px;height:320px;position:absolute; left:61px;top:208px; display:inline-block; color:#999; } </style> </head> <body> <div class="page_wrap"> <div class="page_navi" id="page_navi"> <ul> <li class="nomarginleft"><a href="#" >官方网站</a></li> <li><a href="#">注册帐号</a></li> <li><a href="#">新手指南</a></li> <li><a href="#">官方客服</a></li> <li><a href="#">游戏充值</a></li> </ul> </div> <div class="page_adv"> 填充区 </div> </div> </body> </html>
修改后
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>剑灵</title> <style> div,p,li,ul,dl,dt,dd,input,textarea,fieldset{margin:0;padding:0;} ul,li{ list-style:none;} a{outline:none;} body{background:#000;margin:0;padding:0;} .page_wrap{width:739px;height:564px; background:#000 url("jianling.png") no-repeat; position:relative;} .page_wrap .page_navi{width:620px;height:38px;display:block; position:absolute; top:170px; left:61px; border-bottom:1px solid red;background-color:#010101; _background-color:#111; border-right:1px solid red;} .page_wrap .page_navi li{ width:122px; height:38px; float:left;} .page_wrap .page_navi a{width:120px; height:35px; color:#fff; display:block;text-align:center;font-size:13px; text-decoration:none;float:left; border:1px solid red;border-bottom:3px solid #000; border-right:0; line-height:35px;} .page_wrap .page_navi a:hover{color:red;border-bottom-color:red;} .page_wrap .page_adv{width:620px;height:320px;position:absolute; left:61px;top:208px; display:inline-block; color:#999; } </style> </head> <body> <div class="page_wrap"> <div class="page_navi" id="page_navi"> <ul> <li class="nomarginleft"><a href="#" >官方网站</a></li> <li><a href="#">注册帐号</a></li> <li><a href="#">新手指南</a></li> <li><a href="#">官方客服</a></li> <li><a href="#">游戏充值</a></li> </ul> </div> <div class="page_adv"> 填充区 </div> </div> </body> </html>
相关文章推荐
- hover 在 ie 中使用失效问题
- IE下a:hover样式失效问题
- IE7下解决A标签使用padding宽度自适应 padding失效的问题
- IE 7 下a:hover失效的问题
- IE下使用jquery失效的问题(转载)
- ie7下使用white-space:nowrap时padding-right失效问题记录
- dojo中使用style之后css中的hover失效问题
- IE中使用jquery的fadeIn()失效的问题
- IE中伪类hover的使用及BUG
- 【转自 技术.人生】[ajax]FireFox和IE下使用ajax的一些小问题总结
- IE中伪类:hover的使用及BUG
- CSS使用中文注释后造成CSS失效的问题
- vista sp1 使用迅雷后ie问题(解决方法)
- 【转载】IE中Iframe跨站引用时,框架内程序不能使用cookies问题解决
- IE中伪类:hover的使用及BUG (1)
- event在IE和FF中使用时的兼容问题
- IE中使用setAttribute方法设置属性的问题
- 在ie及firefox下DOM使用问题!
- jquery.history插件在ie中失效的问题
- IE Developer Toolbar 点击失效的问题