zoukankan      html  css  js  c++  java
  • 浏览器兼容性之无序列表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代替,这是一个跨浏览器的,易于维护的无序列表的自定义符号解决方法。

  • 相关阅读:
    leetcode:Power of Two
    求二进制中1的个数
    leetcode:Contains Duplicate和Contains Duplicate II
    leetcode:Summary Ranges
    leetcode Database1(三)
    c++作业:使用函数调用的方法,实现求两个整数中大的数的程序。
    Java制作桌面弹球下载版 使用如鹏游戏引擎制作 包含2个精灵球同时弹动
    Java动画 重力弹球 如鹏游戏引擎 精灵 设计一个小球加速落地又减速弹起并反复直到停止的Java程序
    为什么方差的分母有时是n,有时是n-1 源于总体方差和样本方差的不同
    计算机应用第三次作业:自动开机自动关机 常用DOS命令 关于文件文件夹
  • 原文地址:https://www.cnblogs.com/yddlvo/p/4679029.html
Copyright © 2011-2022 走看看