zoukankan      html  css  js  c++  java
  • 前端兼容笔记div中ul

    ul列表对象也是容易在IE与Mozilla/Firefox之中发生问题的对象,主要原因源自Firefox对ul对象的默认值设置造成的。
    <div id="layout">
    <ul>
    <li>CSS网站导航</li>
    <li>高级背景控制</li>
    <li>列表元素使用</li>
    </ul>
    </div>
    css编码:
    #layout {
    border:1px solid #333;
    }
    ul {
    list-style:none;
    padding-left:0px;
    }
    当前的代码非常简单,仅仅去除了ul的列表圆点,看一下在两个浏览器中预览效果。标准状态下两个浏览器的显示都很正常,关键在于我们对ul接下来的设置,使用ul对象考虑到排版问题肯定需要设置margin元素,为了让ul放置到合适位置对css进行修改:
    ul {
    list-style:none;
    margin-left:0px;
    }
    预览效果后发现,IE中的ul已经与div靠齐了,而Firefox中的ul却丝毫不动?这是为什么呢?不妨把样式表修改一下再看看:
    ul {
    list-style:none;
    padding-left:0px;
    }
    这次把margin-left替换成了padding-left,再来看看预览效果。而这次的效果又刚好相反,Firefox实现了靠左,而IE下却没有任何效果。
    解决方案

    通过这两个代码的对比,相信大家应该能理出头绪了。在IE与Firefox中,对一部分对象有默认的属性,如h1~h6这些对象,它们本身就带有大字号、加粗样式以及一些边距效果,ul也是如此,如同不加任何属性时的预览效果一样,ul对象默认情况下是有边距的。
    但是通过这两个例子我们能够知道,在IE中ul的默认边距是margin造成的,而在Firefox中,ul的默认边距是padding造成的,因此当我们单独定义margin与padding时,都不能够在两个浏览器中达到同样效果,这就是ul在不同浏览器下表现不同问题所在。
    当然也可以使用hack方法,在IE下设置margin-left:0px;在Firefox下设置margin-left:20px;左右,这样实现了二者相同,这可以是一种解决方案,不是核心解决方案。建议是,在设计带有ul对象的网页时,使用标签选择符,先统一ul边距。例如在css里的顶部的位置加入以下代码:
    ul {
    padding:0px;
    margin:0px;
    }
    这样页面中的所有ul对象,都没有了margin及padding值,当需要针对某一个ul进行margin或padding操作时,由于它们都已经由该代码设置为0px了,所以再进行margin或padding时,都从0开始进行计算,就不会再出现表现不同的状况了。

    小弟我在火狐,和ie6上做过了,能通过!

  • 相关阅读:
    ios初学者之Tableview的增删移
    ios初学者之在真机上调试应用程序
    androud 自定义属性
    在使用androidStudio中所遇到的错误
    用ticons指令结合ImageMagickDisplay工具批量生成Android适应图片
    android 处理302地址
    Android获取屏幕长宽
    自定义的屏幕适配方法
    android小技巧和注意事项
    redis哨兵&codis
  • 原文地址:https://www.cnblogs.com/doyourself/p/2812250.html
Copyright © 2011-2022 走看看