<meta name="keywords" content="华夏棋牌,多浏览器,间距效果" />
华夏棋牌 > web前端 > css教程 > 注释

多浏览器下IE6 IE7 firefox li 间距效果第1/2页_履历交流

原创 2016-05-16 12:06:55 0 121
赞助会员专享特权
明天小雷提到一个ie5下li发生空缺行距的效果,下面来测试一下。
新建一个质朴的HTML测试文件,下面来测试ul li标签。

代码以下:

<ul>   
<li><a href="#">菜单一</a></li>   
<li><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>

测试一,界说css为以下代码,效果以下:

body{font-size:12px;margin:0}  
ul{list-style:none;margin:0;padding:0;width:120px;}  
ul li{background:green;height:20px;}  
ul li a{color:#fff;padding:0 0 0 10px;}

发现在IE5和IE5.5下左边都发生了空缺,而且在IE5下,LI之间的行距发生空缺,以下图
1048.gif


测试二,界说css为以下代码:

body{font-size:12px;margin:0}   
ul{list-style:none;margin:0;padding:0;}   
ul li{background:green;height:20px;width:120px;}   
ul li a{color:#fff;padding:0 0 0 10px;}

华夏棋牌和测试一相比,只是将width:120px;从ul的界说放置到li的界说,处置赏罚赏罚了IE5和IE5.5左边发生空缺的效果,而IE5的li之间的间距还是有,以下图:

1049.gif

测试三,界说css为以下代码,(最好写法)

body{font-size:12px;margin:0}   
ul{list-style:none;margin:0;padding:0;}   
ul li{background:green;height:20px;width:120px;vertical-align: bottom;}   
ul li a{color:#fff;padding:0 0 0 10px;}

华夏棋牌和测试二较量,在li的界说中加上vertical-align: bottom;ie5下正常,li之间的空缺行距消掉落了,取得各个浏览器的效果一样,以下图:

1050.gif

总结
1.处置赏罚赏罚li在IE5下发生空缺行距的措施:假定li界说了宽度,那么须要在li外面再界说vertical-align: bottom。
2.宽度最好不要界说在UL,界说在LI或许UL外层的DIV外面。
华夏棋牌3.誊录LI的最好要领,li外面要誊录高度和宽度,和vertical-align: bottom;(for ie5/win bug),或许在ul外面加上一层div,并界说宽度,那么在li外面不用界说宽度和vertical-align: bottom;,也显示正常(IE5下不会发生空缺行距),不太高度照样要界说一下的。

以上就是多浏览器下IE6 IE7 firefox li 间距效果第1/2页_履历交流的内容,更多相关内容请关注华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌(mbkdubai.com)!

php中文网最新课程二维码
  • 相关标签:多浏览器 间距效果
  • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
  • 相关文章


  • 实例详解css3特效之3D翻牌效果
  • 深刻明确form表单中Readonly和Disabled的差异
  • 若何用CSS3和Js制造照顾式导航条
  • 实例详解CSS3制造文字流光突变特效
  • 多浏览器下IE6 IE7 firefox li 间距效果第1/2页_履历交流
  • 网友议论

    文明上彀理性语言,请遵守 新闻议论服务协定

    我要议论

    独孤九贱(5)_ThinkPHP5视频教程

    华夏棋牌ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

    • 2017-05-16 12:03:57
    • 点击数(173543)

    独孤九贱(4)_PHP视频教程

    华夏棋牌江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

    • 2017-03-20 22:47:17
    • 点击数(169666)

    独孤九贱(1)_HTML5视频教程

    华夏棋牌《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

    • 2017-03-13 10:15:11
    • 点击数(137120)

    ThinkPHP5实战之[教授修养治理系统]

    华夏棋牌本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • 2017-07-24 16:48:56
    • 点击数(130403)

    PHP入门视频教程之一周学会PHP

    华夏棋牌一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

    • 2016-11-16 14:54:14
    • 点击数(129771)

    作者信息

    相关视频教程

  • javascript低级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 相关视频章节