IE6下的背景图片不对齐的解决方法

发布时间：2018-10-01 20:14 所属栏目：30 来源：站长网

导读：问题：我仿淘宝上的..IE6图标和ie8,ff对不齐..搞了我一个下午了 !doctype htmlhtmlheadstyle type=text/css*{margin:0;padding:0;}ul{list-style:none;}a{text-decoration:none;color:#000;}a:hover{text-decoration:underline;}body{font-size:12px;font

IE6下的背景图片不对齐的解决方法 问题：

我仿淘宝上的..IE6图标和ie8,ff对不齐..搞了我一个下午了

<!doctype html> <html> <head> <style type="text/css"> *{margin:0;padding:0;} ul{list-style:none;} a{text-decoration:none;color:#000;} a:hover{text-decoration:underline;} body{font-size:12px;font-family:tahoma,Arial,"<b>微软雅黑</b>";line-height:1.5} #page,#header,#content,#footer{margin-left:auto;margin-right:auto;} #top-page{width:100%;height:25px;background:#eee;position:absolute;top:0;left:0;border-bottom:1px solid #ccc;} .w950{width:950px;} #header{position:relative;z-index:10;padding-top:25px;} .site-nav{position:absolute;top:0;left:0;height:25px;width:100%;} .site-nav .site-info{float:left;line-height:25px;} .site-nav .quick-link{float:right;} .site-nav .quick-link li{float:left;height:25px;line-height:25px;padding:0 8px 0 24px;margin-left:-1px;background-position:-166px -320px;} .site-nav .quick-link .mytaobao{position:relative;padding-right:16px;background-position:-999em 0;} .site-nav .quick-link .mytaobao s{background-position:-149px -352px;} .site-nav .quick-link .mytaobao b, .site-nav .quick-link .help b{background-position:-143px -297px;height:4px;width:7px;position:absolute;margin:10px 0px 0 5px;font-size:0;} .site-nav .quick-link .cart s{background-position:-149px -326px;} .site-nav .quick-link .favorite s{background-position:-149px -365px;} .site-nav .quick-link .forum{padding-left:8px;} .site-nav .quick-link .help s{background-position:-149px -339px;} .site-nav .quick-link li s{position:absolute;margin:6px 0 0 -15px;width:15px;height:12px;font-size:0;cursor:pointer;} .site-nav .quick-link li , .site-nav .quick-link li s,.site-nav .quick-link li b{background:transparent url(http://img07.taobaocdn.com/tps/i7/T1FihsXmNkXXXXXXXX-167-510.png) no-repeat scroll -999em 0;} </style> </head> <body> <div id="top-page"></div> <div id="page" class="w950"> <div id="header"> <div class="site-nav"> <p class="site-info"> 您好,欢迎来淘宝! <a href="">[请登录]</a> <a href="">[免费注册]</a> </p> <ul class="quick-link"> <li class="mytaobao"><a href=""><s></s>我的淘宝<b></b></a></li> <li class="cart"><a href=""><s></s>购物车</a></li> <li class="favorite"><a href=""><s></s>收藏夹</a></li> <li class="forum"><a href="">社区</a></li> <li class="help"><a href=""><s></s>帮助<b></b></a></li> </ul> </div> </div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

回答：

把这几句样式添加到尾部：
绝对定位布局，最好不用margin来控制四个方向边距，而用left，top，right，bottom这几个属性。
Copy to Clipboard引用的内容：[www.veryhuo.com] .site-nav .quick-link li{position:relative;padding-right:20px;border:solid 1px red;}
.site-nav .quick-link li s{margin:0;left:8px;top:6px;}
.site-nav .quick-link .mytaobao b, .site-nav .quick-link .help b{margin:0;right:8px;top:10px;}
.site-nav .quick-link .mytaobao b{right:4px;}
另外给元素加边框，可以一定程度上加快解决问题的速度。

（编辑：ASP站长网）