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上做过了,能通过!

  • 相关阅读:
    uva 147 Dollars
    hdu 2069 Coin Change(完全背包)
    hdu 1708 Fibonacci String
    hdu 1568 Fibonacci
    hdu 1316 How Many Fibs?
    poj 1958 Strange Towers of Hanoi
    poj 3601Tower of Hanoi
    poj 3572 Hanoi Tower
    poj 1920 Towers of Hanoi
    筛选法——素数打表
  • 原文地址:https://www.cnblogs.com/doyourself/p/2812250.html
Copyright © 2011-2022 走看看