ul在Firefox和IE下的不同表现的解决方法

所属分类: 网络编程 / CSS/HTML 阅读数: 343
收藏 0 赞 0 分享
最近做了个oblog的系统模板,其中涉及到了ul,所以就整理出了这篇文章+这张大图。
  ul是一个很常用的标签,但是因为它在Firefox和IE下的不同表现,让人觉得它是个很难以控制的标签。
  ul在Firefox下有个padding值, 却没有margin值;而在IE下正好相反,ul有个margin值, 却没有padding值。【下图中的第二第三例的对照可以看出】
  在Firefox下,ul的list-style默认是处于内容的外边缘的。当然可以通过css可以将list-style置为内容的内边缘。
  通过权衡得到适合两个浏览器的设置:padding:0; margin:0; list-style:inside;。还可以将ul设置为padding:0; margin:0; list-style:none;,然后给li添加背景图片,也是很不错的选择。

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

更多精彩内容其他人还在看

应用WEB标准实例:列表页面的制作

应用WEB标准实例:列表页面的制作
收藏 0 赞 0 分享

用CSS构建iframe效果代码

用CSS构建iframe效果代码
收藏 0 赞 0 分享

用CSS给图片打标的方法

用CSS给图片打标的方法
收藏 0 赞 0 分享

用css动态生成闪字的代码

用css动态生成闪字的代码
收藏 0 赞 0 分享

用滑动门技术设计按钮的图文教程

用滑动门技术设计按钮的图文教程
收藏 0 赞 0 分享

用div+css解决出现水平滚动条问题

用div+css解决出现水平滚动条问题
收藏 0 赞 0 分享

ul在Firefox和IE下的不同表现的解决方法

ul在Firefox和IE下的不同表现的解决方法
收藏 0 赞 0 分享

如何实现多风格选择 样式实时切换

如何实现多风格选择 样式实时切换
收藏 0 赞 0 分享

用css实现隐藏文本框

用css实现隐藏文本框
收藏 0 赞 0 分享

css实现行间距效果

css实现行间距效果
收藏 0 赞 0 分享
查看更多