DIV+CSS构建网站时常会出现浏览器不兼容的问题,下面整理了一些常见不兼容问题,及解决办法!

1、用!important解决IE和Mozilla的布局差别

!important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权,最重要的一点是:IE一直都不支持这个语法,而其他的浏览器都支持。因此我们就可以利用这一点来分别给IE和其他浏览器不同的样式定义,例如,我们定义这样一个样式:

.colortest{ border:20pxsolid#60A179!important; border:20pxsolid#00F; padding:30px; width:300px;}

在Mozilla中浏览时候,能够理解!important的优先级,因此显示#60A179的颜色;在IE中浏览时候,不能够理解!important的优先级,因此显示#00F的颜色。

2、解决超链接访问过后hover样式不显示的问题

改变CSS属性的排列顺序: 先后顺序标准应为:a:link—a:visited—a:hover—a:active

3、Li中内容超过长度后以省略号显示的方法

    4、margin和padding定义尺寸的缩写

    margin:3px——表示所有边都是3px;
    margin:3px

    5px—— 表示top和bottom的值是3px ,right和left的值是5px margin:3px  5px 7px——表示top的值是3,right和left的值是5,bottom的值是7 margin:3px  5px 7px 5px——四个值依次表示top,right,bottom,left;上右下左。

    5、解决IE不能正确显示透明PNG——header内加入代码

    程序代码 程序代码

    6、ul在Firefox和IE下表现不同

    使用(padding:0; margin:0; list-style:inside;)或者(padding:0; margin:0; list-style:none;)实现兼容,参考地址:http://and8.net/article.asp?id=273

    7、BOX模型在firefox和IE中的解释相差2px的解决方法

    div{margin:30px!important;margin:28px;}

    注意这两个margin的顺序一定不能写反。根据上面提到的IE并不支持!important,所以在IE下其实解释成这样:

    div{maring:30px;margin:28px}

    重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;

    8、margin的默认效果

    div里的内容,ie默认为居中,而ff默认为左对齐。使ff内容居中的方法是增加代码margin:auto;

    出之:http://blog.163.com/wangsen_315/blog/static/9461414200821310584953/

    之前找了几个不同版本的可独立运行的IE浏览器,正好拿来试试页面的兼容性问题。不试不知道,在IE6和FF中没问题的页面在IE5和IE5.5中乱成一团,一直听说IE5是WEB标准制作的一个“钉子户”,现在不得不相信了。

    既然有问题,那就找找解决的方法咯,在网上一搜,相关的文章还是不少的,觉得最直接的方法还是“IE条件注释”,很方便的就能为IE的不同版本写样式。但这样就得为每个版本写一个样式,不利于文件的优化。

    找了一些相关的CSS HACK后,觉得应该可以把IE5/IE5.5/IE6/FF的HACK写到一起的,经过测试,终于找到了一个不错的方法,下面我们来看看怎么实现:
    大家都知道用!important声明可以提升指定样式规则的应用优先权,如下面的例子:

    E1{
    background-color: red !important;
    background-color: blue;
    }

    但这样写在IE中会有个问题,看过我的《关于CSS样式表优先级》和《关于CSS样式表优先级补遗》,你会知道在IE6和FF中用! important声明可以提高优先级别,但在IE6中的!important声明并不是绝对的,它会被之后的同名属性定义所替换。也就是说在上面的例子 中,IE6所应用的是最后一个背景色的值,即“blue”;而在FF中背景色的值为“red”。根据这一点,我们就可以把FF和IE的样式分离开。
    OK ,解决了FF和IE的问题,现在来解决IE自己的问题。

    看过了嘟嘟的《绕过IE6支持IE5的别一种写法-IE也支持">"》后有感而发,使用“>”IE是否真的可以认得?我们来看个例子:

    E1{
    background-color: red;
    >background-color: blue;
    }

    在FF中得到的是背景色红色,而在IE中得到的背景色是蓝色,根据样式重定义的规则,如果浏览器可以识别“>”,则应该得到的蓝色的背景,因此可以知道 “>”只有IE可以识别,这点是很重要的哦!在后面大家就会知道了。(注:我测试过其它的一些符号,如“~”、“`”、“<”等,都只有IE可以识别,在 此为了感谢嘟嘟,推荐使用“>”)

    我们再来看个例子:

    E1{
    >background-color: black;
    >background-color : green;
    }

    这个例子在IE6中得到了黑色的背景;而在IE5.5中得到的绿色的背景;在IE5中也得到了黑色的背景。这就说明了第二句定义只有IE5.5能识别,这 是个很早就公布的HACK,可以在网上找到相关的资料,要注意的就是在属性名之后是有一个空格的。到此我们已经把FF、IE5.5、IE6分离出来了,那 IE5呢?其实现在我们只要把IE5跟IE6分开就OK了,来看看例子:

    E1{
    >background-color: red;
    }
    E1{
    >background-color: black;
    }

    这里我们又用到一个HACK,就是“E1{}”,这个定义在IE5以上的版本才能识别出来。这个例子得到的结果是,在IE5中的背景色为红色;在IE5以上版本中得到的是黑色背景。
    终于把不同版本的浏览器都分离出来了,这样我们就可以为不同的浏览器定义不同的样式了。来看个完整的例子:

    E1{
    width: 500px;
    height: 50px;
    background-color: red !important;
    background-color: blue;
    text-align:center;
    }
    E1{
    >background-color: black;
    >background-color : green;
    }

    需要注意的是,在上面例子中“background-color”定义的顺利不能改变,即FF-IE5-IE6-IE5.5。对于IE的定义在属性前要加“>”,因为“E1{}”这个HACK在FF中可以识别。也许你会想,上面的例子不是可以写成:

    E1{
    width: 500px;
    height: 50px;
    background-color: red;
    >background-color: blue;
    text-align:center;
    }
    E1{
    >background-color: black;
    >background-color : green;
    }

    这样不就又可以省下几个字节?是没错,可是HACK不是标准,如果滥用HACK,那只会离标准越来越远!

    出之:http://blog.ifeng.com/article/803775.html

    图文混排容易导致扩展框问题.

    扩展框问题

    这样排版容易导致扩展框问题.

    尽量定义宽高给定值

    * 浮动下降问题

    加上{float:left;}即可 ```

    IE6的双倍边距BUG

    解决办法是加上display:inline

    IE6下为什么图片下方有空隙产生

    解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block或者设置vertical-align属性为vertical-align:top | bottom |middle |text-bottom都可以解决.

    IE6下这两个层中间怎么有间隙

    这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left

    如何对齐文本与文本输入筐

    遇到此种问题,设置文本框的    vertical-align:middle 就可以了

    为什么FF下文本无法撑开容器的高度

    标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:

    {

    height:auto!important;

    height:200px;

    min-height:200px;

    }

    怎么样才能让层显示在FLASH之上呢

    解决的办法是给FLASH设置透明或者

    怎样使一个层垂直居中于浏览器中

    使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二.

    方法二:首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。

    但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

    需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,

    只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

    {

    width:300px;

    margin-left:auto;

    margin-right:auto;

    }

    针对firefox ie6 ie7的css样式

    现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,

    但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针

    对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。

    现在写一个CSS可以这样:

    #1 { color: #333; }

    * html #1 { color: #666; }

    *+html #1 { color: #999; }

    那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。

    页面的最小宽度

    min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,

    而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个

    放到 标签下,然后为div指定一个类:

    然后CSS这样设计:

    #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}

    第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

    属性选择器(这个不能算是兼容,是隐藏css的一个bug)

    p[id]{}div[id]{}

    这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用

    属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

    最狠的手段 - !important;

    如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.

    关于容器的包涵关系

    很多时候,尤其是容器内有平行布局,例如两、三个float的div时,宽度很容易出现问题。在IE中,外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。

    1.写两句代码来控制一个属性,区别Firefox与IE:

    background:orange; *background:green;

    //这一句代码写出来时,你用Firefox浏览,会发现背景是橙色的,而IE里却是绿色的,很简单,因为Firefox不能识别*,而IE6,IE7都可以识*,标准浏览器(如Firefox,Opera,Netscape)不能识别*;。

    2.写两句代码来控制一个属性,区别IE7与IE6:

    background:green !important;background:blue;

    //这一句代码写出来时,你用IE7浏览,会发现,写了该代码的区域背景是绿色的,如果用IE6浏览,却是蓝色的,这是因为IE7能识 别!important*,一但识别了,就执行,忽略了后面的那一句,但IE6却不能识别!important,所以前面部分跳过,直接执行了后半部份.

    3.写三句代码来控制一个属性,区别Firefox,IE7,IE6:

    background:orange;*background:green !important;*background:blue;

    //这一句会使在Firefox在,背景呈橙色,IE7中为绿色,IE6中为蓝色,道理和前面一样,Firefox不能识别*,所以后面两句都不执行,直 接执行第一句,IE7当然也能执行第一行代码,但是因为第二句,他也能识别,所以就执行了第二句代码,把前面的效果给过滤了,而最后一句,IE7是不能识 别的。IE6不能识别!imprtant,本来运行了第一句代码了,第二句不能识别,那就理所当然的执行了最后一句。

    注:IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*;IE6能识别*,但不能识别 !important,IE7能识别*,也能识别!important;FF不能识别*,但能识别!important;


    出之:http://www.5ilog.com/cgi-bin/sys/link/view.aspx/6264648.htm

    CSS 兼容要点:DOCTYPE 影响 CSS 处理

    FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

    FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

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

    FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

    div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行

    cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以

    FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格XHTML+CSS兼容性解决方案小集

    使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面。

    1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:

    div css xhtml xml Example Source Code Example Source Code [www.52css.com]
    div{margin:30px!important;margin:28px;}

    注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:

    div css xhtml xml Example Source Code Example Source Code [www.52css.com]
    div{maring:30px;margin:28px}

    重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;

    2.IE5 和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则 是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改:

    div css xhtml xml Example Source Code Example Source Code [www.52css.com]
    div{width:300px!important;width :340px;margin:0 10px 0 10px}

    关于这个是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:)

    3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义

    div css xhtml xml Example Source Code Example Source Code [www.52css.com]
    ul{margin:0;padding:0;}

    就能解决大部分问题

    4.关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为

    div css xhtml xml Example Source Code Example Source Code [www.52css.com]
    <script type="text/javascript">

    最后修改:2010 年 11 月 13 日
    如果觉得我的文章对你有用,请随意赞赏