浏览器兼容性之无序列表dl

浏览器兼容性之无序列表dl

无序列表的一些特定的css属性有list-style-type,list-style-position,和list-style-image。这些属性设置了列表项目符号的类型,标记的位置,以及使用图片代替标记。这三个属性可以使用list-style进行合并缩写。

标记list-style-type,在不同的浏览器中大小不和位置的渲染也是有差异的,故很少使用。list-style-image属性可以给无序列表一个自定义的独一无二的表现,不幸的是,在IE下使用此方法添加项目编号是bug多多。一个更好的解决方法是list-style-type:none;添加backgroundimage到列表的li元素上,并相应的调整backgroundimage的位置,并设置为no-repeat。

浏览器中的差异

1、列表元素添加display:block后  

  在InternetExplorer8,Opera9,Chrome,Firefox2&3,andSafari下,添加display:block会让有序或无序列表中li元素的项目编号消失。   但在IE6和IE7下,添加display:block项目符号依旧存在  

2、列表项目添加float:left    

在IE6和IE7下,给列表项目(没有其他样式)添加float:left将会使列表项水平对齐,同时项目符号(或项目编号)消失。IE8和其他所有浏览器下,列表项会水平对齐,但是项目符号(或项目编号)仍然可见。 

当列表项浮动的时候,我们必须记住另外一个要点,就是列表容器(ul元素)在内部仅有浮动元素时会死翘翘,这在所有的浏览器下都会以相同的方式发生,添加overflow:hidden是解决此问题的方法之一。

 为了能在不同浏览器下达到大致相同的float:left效果,最好的方法是是使用display:inline。

3、IE下有“Layout”的有序列表

 在IE6和IE7下,如果有序列表中的列表项有“Layout”,则有序列表的数值将不会增加。
 hasLayout属性不能被直接设置,但是如果一个元素设置了宽高,浮动,绝对定位等待就会改变haslayout。
4、IE6&IE7下的padding及margin
  在大部分的浏览器下,为了移除项目符号或项目编号,让内容左侧对齐显示,需要设置左padding为0,但是这在IE6和IE7下并不管用,在IE6,7下需要设置左margin为0取而代之。
5、在所以浏览器下实现一致的列表样式
  为了避免在不同浏览器下处理列表样式的时候出现问题,最好的方法是使用在前面提到的CSS的重置(cssreset),cssreset几乎可以将浏览器所有默认设置差异设置为最小,并允许所有浏览器下都在同样的基础上工作。虽然某些样式下依然存在差异,但是它们不会被当作一个难点来处理了。
  另外,正如前面提到了,最好完全避免使用list-style-image属性,而以设置background代替,这是一个跨浏览器的,易于维护的无序列表的自定义符号解决方法。

时间: 2024-10-14 05:51:10

浏览器兼容性之无序列表dl的相关文章

html标签和css基础语法与浏览器兼容性等相关基础学习

<!-- table的使用 --> <h3>前端日常</h3> <form action="https://www.baidu.com"> <table border="1px" cellspacing="0px"><!--cellspacing单元格间隙--> <thead></thead><tbody> <col span=&qu

自学html-four(css初始化及html语义标签 -&gt; h标签 p标签 img标签 有序列表 无序列表 表格 超链接)

一.css初始化 现在我们来做一个简单的测试,测试步骤如下: 1.编写代码如下: 2.把改程序用不同的浏览器打开我们会发现同一份代码在不同的浏览器中的显示会有略微的差别: 360浏览器下显示效果图: 火狐浏览器下显示的效果图: 同一份代码在不同浏览器显示的效果存在差异的原因是:各浏览器对各元素的margin,border,font-size等的初始设置略有不同 解决方法:通过css强制让所有元素的属性值都一样 这里提供一段雅虎工程师css初始化代码,直接拷贝到css位置就可以了,body,div

HTML&CSS基础学习笔记13—无序列表

无序列表 有时我们的工作繁忙,杂事很多,怕忘记,就会把事情一件件列出来,防止忘记. 它们的排列顺序对于我们来说并不重要,可以随意调换,我们将它称为无序列表,HTML里用<ul>标签来表示无序列表,列表里的项目则用<li>标签来表示: 1 2 3 4 5 <ul>     <li></li>     <li></li>     ... </ul> 看一段实例代码: 对于的浏览器显示结果是这样的: 更多内容学习,请

IE浏览器兼容性模式

最近支持公司的一个内部业务管理系统,系统是基于jQuery来实现:用了2年的MVVM框架的我转向这个完全使用jQuery框架来开发的系统,真是相当不爽(相信用过MVVM框架的跟我是相同的感受):更为憋屈的是,到了这个年代,IE的亲爹微软都放弃支持IE6-10了,系统尽然还只支持使用IE浏览器(运营电脑安装都是IE8浏览器,所以大部分只管IE8),其他高级浏览器不被支持(当然这是由于系统使用了基于IE的一些插件导致). 但是话又说回来,但是在支持系统的开发过程中,经常看到X-UA-Compatib

CSS 多浏览器兼容性问题及解决方案

css的兼容性也是大家关注的热点.大家一定要注意多测试. Javascript 多浏览器兼容性问题及解决方案 兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 3.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式 4.div 的垂直居中问题: vertical-

常见的浏览器兼容性问题大汇总

常见的浏览器兼容性问题大汇总 1 ie6.0横向margin加倍 产生因素:块属性.float.有横向margin. 解决方法:display:inline: 2 ie6.0下默认有行高 解决方法:overflow:hidden;或font-size:0;或line-height:xx px: 3 在各个浏览器下img有空隙(原因是:回车.) 解决方法:让图片浮动. 4 一个父标签与几个子标签嵌套,父标签不浮动,子标签float,子标签不撑开父的高度. 解决方法:a 在子标签最后清浮动{<div

脚本的浏览器兼容性问题

1.window对象不要去掉 window.parent.location 2.firefox和ie内置的对象确实不一样,你用jquery吧这个是跨浏览器的,只需要 $("#yourID").parent()就直接可以得到了 很方便,而且jquery也比较小,只有几十k,现在浏览器这么多 不可能不用跨浏览器解决方案的. 楼主不是通过http协议访问的吧,通过file协议webkit核心(chrome和360极速模式)parent,opener不能互访,会报错 以下以 IE 代替 Int

有关CSS浏览器兼容性问题

有关CSS的浏览器兼容性问题 今天有时间,就简单总结了下CSS的浏览器兼容相关的问题,与大家共享... 1. css中的width和padding 在IE7和火狐浏览器中width宽度不包括padding,在Ie6中包括padding. 2. innerText在IE中能正常工作,但在FireFox中却不行.   需用textContent.解决方法:if(navigator.appName.indexOf("Explorer")   >   -1){        docume

怎么解决浏览器兼容性问题

怎么解决浏览器兼容性问题 所有浏览器 通用 height: 100px;IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important; 1.内外边距被统一: 不同浏览器对HTML标记所具有的内外边距属性具有不同的定义.因此如果想消除这种差距,应该在相应的CSS部分加入以下CSS代码:*{margin:0px;padding:0px;}借于此,所有标记