兼容性处理要点
1、DOCTYPE 影响 CSS 处理
2、FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
3、FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
4、div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行
5、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:
div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反,!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:
div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;
浏览器差异
1、ul和ol列表缩进问题
消除ul、ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效,padding属性对FireFox有效。
[注]经验证,在IE中,设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点,设置padding对样式没有影响;在 Firefox 中,设置margin:0px仅仅可以去除上下的空白,设置padding:0px后仅仅可以去掉左右缩进,还必须设置list- style:none才 能去除列表编号或圆点。也就是说,在IE中仅仅设置margin:0px即可达到最终效果,而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。
2、CSS透明问题
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。
[注] 最好两个都写,并将opacity属性放在下面。
3、CSS圆角问题
IE:ie7以下版本不支持圆角。
FF: -moz-border-radius:4px,或者-moz-border-radius-topleft:4px;-moz- border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz- border- radius- bottomright:4px;。
[注] 圆角问题是CSS中的经典问题,建议使用JQuery框架集来设置圆角,让这些复杂的问题留给别人去想吧。不过jQuery的圆角只看到支持整个区域的圆角,没有支持边框的圆角,不过这个边框的圆角可以通过一些简单的手段来实现,下次有机会介绍下。
4、cursor:hand VS cursor:pointer
问题说明:firefox不支持hand,但ie支持pointer ,两者都是手形指示。
解决方法:统一使用pointer。
5、字体大小定义不同
对字体大小small的定义不同,Firefox中为13px,而IE中为16px,差别挺大。
解决方法:使用指定的字体大小如14px。
并列排列的多个元素(图片或者链接)的div和div之间,代码中的空格和回车在firefox中都会被忽略,而IE中却默认显示为空格(约3px)。
6、CSS双线凹凸边框
IE:border:2px outset;。
FF: -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;
浏览器bug
1、IE的双边距bug
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案:在这个div里面加上display:inline;
例如:
<#div id=”imfloat”>
相应的css为
以下为引用的内容:
关于CSS中的问题实在太多了,甚至同样的CSS定义在不同的页面标准中的显示效果都是不一样的。一个合乎发展的建议是,页面采用标准XHTML标准编写,较少使用table,CSS定义尽量依照标准DOM,同时兼顾IE、Firefox、Opera等主流浏览器。很多情况下,FF和 Opera的CSS解释标准更贴近CSS标准,也更具有规范性。
2、IE选择符空格BUG
今天在给博客的段落样式设置首字符样式的时候发现,原来一个空格也可以使样式失效。
请看以下代码:
<p>对于世界而言,你是一个人;但是对于某个人,你是他的整个世界。纵然伤心,也不要愁眉不展,因为你不知是谁会爱上你的笑容。</p>
</body>
</html>
[/code]
这段代码对<p>的首字符样式定义在IE6上看是没有效果的(IE7没测试),而在p:first-letter和{font-size:300%}加上空格,也就是p:first-letter {font-size:300%}后,显示就正常了。但是同样的代码,在FireFox下看是正常的。按道理说,p:first-letter{font-size:300%}的写法是没错的。那么问题出在哪里呢?答案是伪类中的连字符”-”。IE有个BUG,在处理伪类时,如果伪类的名称中带有连字符”-”,伪类名称后面就得跟一个空格,不然样式的定义就无效。而在FF中,加不加空格都可以正常处理。
相关推荐
CSS 多浏览器兼容性问题及解决方案一、document.formName.item(”itemName”) 问题 问题说明:IE下,可以使用 document.formName.item(”itemName”) 或 document.formName.elements [“elementName”];Firefox 下...
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的...
为什么会有浏览器兼容性问题? 还不是因为浏览器厂商太多了! Chrome,Frirefox,Safari,Edge,IE6,IE7,IE8,IE9…360安全浏览器,qq浏览器,世界之窗,TT,搜狗,opera,maxthon(傲游)…… 关键是不同厂商,...
4种方案解决CSS浏览器兼容性问题 为什么会有浏览器兼容性问题? 还不是因为浏览器厂商太多了! Chrome,Frirefox,Safari,Edge,IE6,IE7,IE8,IE9…360安全浏览器,qq浏览器,世界之窗,TT,搜狗,opera,maxthon...
对于web2.0的过度,请尽量用...解决方案是在这个div里面加上display:inline; 例如: ”imfloat”> 相应的css为 #IamFloat { float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ }
浏览器兼容报告。css和js的浏览器兼容问题总结。
最全的CSS浏览器兼容问题 CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写...
谷歌、火狐及-webkit-内核的浏览器均支持该属性(css3),IE不支持该属性,所以在IE中,会自动降级,表格无固定列,可滑动的形式。 Edge浏览器在1703之后的版本使用了chromium内核,对css3的属性支持较好,也支持...
对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE...解决方案是在这个div里面加上display:inline; 例如: 复制代码代码如下: <#div id=”imfloat”> 相
本文总结一些常用的Css中的浏览器兼容性问题及解决方案
web开发人员必看书籍,包含了css的基础以及高级应用知识和浏览器的兼容性问题的解决方案。
这里总结了浏览器兼容性碰到的问题以及解决方案,特别是针对IE6这个开发人员噩梦,是非常值得想要从事开发人员的人看的
从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-...
一般解决方案都是安装集成工具包:multipleIE、IEtester、IE-Collections。 但multipleIE只集成了包括IE6以下的版本;IEtester最近几个版本兼容性不是太好;IE-Collections也是兼容问题比较多,有时会打不开页面。...
Nice只重置掉可能产生问题的样式(body、form的默认margin等),并且解决了一些可能产生的兼容性问题,保留和坚持部分浏览器的基础样式,解决部分潜在的问题,提升细节体验。Nice会一直围绕3点开发: 1. 统一的基础...
在本文中,我们会揭开你在开发web应用是可能会遇到的12个最常见的CSS问题的javascript解决方案。 1. 自动匹配高度 自从我们抛弃了基于Table的页面布局后,创建同等高度栏目或内容盒子的视觉效果已然是一个挑战。 ...
解决浏览器兼容问题和开发功能性导航结构的技巧 通过CSS编码定制Web站点的方法 如何创建HTML Email模板和基本HTML表格布局,以及CSS在文中所起的作用 网格和布局对设计的重要性 本书读者对象 本书针对...