zoukankan      html  css  js  c++  java
  • IE与FireFox的CSS默认设置的不同

    这是一个开发记录,以后会一直更新的。
    首先不同的是各个元素的margin和padding的不同:
    咱们就都给它设置成

    margin:0;
    padding:0;

    第二个不同:
    背景图片的background-attachment的不同

    IE默认是fixed,而FireFox默认是scroll;

    一下从其他地方总结来的:

    Firefox和IE对某些css样式的认定有不少区别


    ul和ol的默认padding值是不一样的,在Firefox中,padding-left默认值为40px左右,而IE中为0,一般设置ul{margin:0;padding:0;}就能解决大部分问题。


    并列排列的多个元素(图片或者链接)的代码中的空格和回车会造成元素之间的间隙,而在firefox中和IE中显示是不一样的,IE显示空格(约8px)、firefox显示空格(约4px)。

    对不规范代码的兼容情况不同,IE中漏掉的关闭符号对显示不造成影响,而firefox中就会形成错乱的布局。

    firefox对于宽高尺寸的严格解析会造成与设置不匹配(超出)的图片或表格将原设置div撑大。

    未定义id的div,在IE中会与div属性中的其他设置有关,而在firefox中的位置会于div在文件中位置有关,紧随前一个div出现。

    设置为float的div在ie下设置的margin会加倍的,特别是margin-left,这是ie6的一个bug。解决的方法是在这个div里面加上display:inline;

    如果是动态地添加内容,高度最好不要定义。浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。(似乎有时候不会自动往下撑开,不知道具体怎么回事)

    FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行。IE里设置text-align:center,就居中了,但在FF中不行。所以一般两个都要设置。

    FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个height 和 width

    FF对于"!important"会自动优先解析,然而IE则会忽略.如下
    .tabd{
    background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
    background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */
    }

    FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。

     2、针对firefox ie6 ie7的css样式
    现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,
    但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针
    对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。
    现在写一个CSS可以这样:

    #1 { color: #333; } /* Moz */
    * html #1 { color: #666; } /* IE6 */
    *+html #1 { color: #999; } /* IE7 */
    那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。

    3、firefox下多层嵌套时内层设置了浮动外层设置背景时背景不显示
    这主要是内层设置浮动后外层高度在firefox下变为0,所以应该在外层与内层间再嵌一层,设置浮动和宽
    度,然后给这个层设置背景(听说还有其他方法,感觉还是这方法好使)

    4、属性选择器(这个不能算是兼容,是隐藏css的一个bug
    p[id]{}div[id]{}
    这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
    属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

    5、嵌套DIV:父DIV的高度不能根据子DIV自动变化的解决方案

    <div id="parent">
    <div id="content"> </div>
    </div>

    当Content内容多时,即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。 解决方案

    <div id="parent">
    <div id="content"></div>
    <div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
    </div>

    在层的最下方产生一个高度为1的空格,可解除这个问题

     转载自:http://zhtphoenix.javaeye.com/blog/262595



  • 相关阅读:
    Java实现 LeetCode 792 自定义字符串排序(暴力)
    Java实现 LeetCode 792 自定义字符串排序(暴力)
    asp.net session对象的持久化
    Java实现 LeetCode 791 自定义字符串排序(桶排序)
    Java实现 LeetCode 791 自定义字符串排序(桶排序)
    Java实现 LeetCode 791 自定义字符串排序(桶排序)
    Java实现 LeetCode 790 多米诺和托米诺平铺(递推)
    Java实现 LeetCode 790 多米诺和托米诺平铺(递推)
    Java实现 LeetCode 790 多米诺和托米诺平铺(递推)
    小白也能看懂的约瑟夫环问题
  • 原文地址:https://www.cnblogs.com/GeeWu/p/1212325.html
Copyright © 2011-2022 走看看