您好,欢迎来到jQuery吧!QQ群:193687763(钱端开发)

jQuery吧-Write Less, Do More | 注重前端开发

首页 > CSS > CSS2教程 > 正文

IE6下 多一只猪 和 文字重叠

2012-12-05 04:12:46 作者:天外飞仙 人气:3132 Views

浏览器兼容对咱从事WEB前端开发是个不小的麻烦,尤其是坑爹的IE6,快进坟墓了,还得出来折腾人。

IE6下 多一只猪 和 文字重叠
多好多猪啊 纠结

部分错误代码

<ul class="help"> <li style="margin-left:0"> <p>新手上路</p> <span>购物流程</span> <span>常见问题</span> <span>订单状态</span> <span>积分政策</span> </li> <li> <p>支付方式</p> <span>发票制度</span> <span>货到付款</span> <span>在线支付</span> <span>银行汇款</span> <span>邮政汇款</span> </li> <li> <p>配送方式</p> <span>配送范围</span> <span>商品验收与签收</span> <span>特快快递EMS</span> </li></ul>

css代码

 .help{width:100%;float:left} .help li{width:138px;float:left;margin-left:10px;_margin-left:5px;display:inline;font-size:16px;font-weight:bolder;text-align:right;} .help li p{width:100%;height:30px;float:left;background:#f15a22;color:#fff;line-height:30px;padding-right:5px;} .help li span{width:100%;height:28px;float:left;color:#222;line-height:28px;padding-right:5px;}

修改上述代码 中的..help li span去掉浮动增加个display:block

这样讨厌的那些猪们一一消失。

可是问题有接着来了,在谷歌浏览器中 文字重叠了。。。。

可谓是一波未平一波又起啊,浏览器兼容头大。

IE6下 多一只猪 和 文字重叠

一般之前遇到是解决的方案是 清楚浮动就行

根据上面文字重叠的位置 在p和span之间加个

<div style="clear:both"></div>

这样bug就少了。。。。。

链接:http://www.jqueryba.com/1008.html(转载时请注明本文出处及文章链接)
分类:CSS2教程

jQuery吧-Write Less, Do More | 注重前端开发

jQuery吧-Write Less, Do More | 注重前端开发

Copyright © 2013 jqueryba.com, All Rights Reserved.奔跑在阿里云

免责声明:本站所有内容来源于互联网。如果本站部分内容侵犯您的权益,请您告知,站长会立即处理 苏ICP备12059471号

站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!