CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下。对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明。 CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行 2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 例如: <#div id=”imfloat”> 相应的css为 #imfloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/} 3.浮动ie产生的双倍距离 #box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略} 这里细说一下block与inline两个元素:block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素); #box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table; 4 IE与宽度和高度的问题 IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。 比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样: #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;} 5.页面的最小宽度 min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个<div> 放到 <body> 标签下,然后为div指定一个类,然后CSS这样设计: #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );} 第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。 6.DIV浮动IE文本产生3象素的bug 左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距. #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //这句是关键}

</div>

</div>

7.IE捉迷藏的问题 当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。 有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。 解决办法:对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。 8.float的div闭合;清除浮动;自适应高度 ①例如:<#div id=”floatA” ><#div id=”floatB” ><#div id=”NOTfloatC” >这里的NOTfloatC并不希望继续平移,而是希望往下排。(其中floatA、floatB的属性已经设置为float:left;) 这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 <#div class=”clear”>这个div一定要注意位置,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。并且将clear这种样式定义为为如下即可: .clear{ clear:both;} ②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应,要在wrapper里面加上overflow:hidden; 当包含float的box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。 例如某一个wrapper如下定义: .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;} ③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:

</div>

</div>

</div>

比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成 float,所以我们应该这样解决

</div>

</div>

</div>

再嵌入一个float left而宽度是100%的DIV解决之 ④万能float 闭合(非常重要!) 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽. /* Clear Fix */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */ 或者这样设置:.hackbox{ display:table; //将对象作为块元素级的表格显示} 9.高度不适应 高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或paddign 时。 例: #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

p对象中的内容</p>

解决技巧:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。 10 .IE6下为什么图片下有空隙产生 解决这个BUG的技巧也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为vertical-align:top   bottom  middle  text-bottom 都可以解决. 11.如何对齐文本与文本输入框 加上 vertical-align:middle; 12.web标准中定义id与class有什么区别吗 一.web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他. 二.属性的优先级问题 ID 的优先级要高于class,看上面的例子 三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单. 13. LI中内容超过长度后以省略号显示的技巧 此技巧适用与IE与OP浏览器 14.为什么web标准中IE无法设置滚动条颜色了 解决办法是将body换成html </style> 15.为什么无法定义1px左右高度的容器 IE6下这个问题是因为默认的行高造成的,解决的技巧也有很多,例如:overflow:hidden   zoom:0.08   line-height:1px 16.怎么样才能让层显示在FLASH之上呢 解决的办法是给FLASH设置透明 17.怎样使一个层垂直居中于浏览器中 这里我们使用百分比绝对定位,与外补丁负值的技巧,负值的大小为其自身宽度高度除以二 4. 游标手指cursor cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以 5.UL的padding与margin ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题 6. FORM标签 这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后面就不会为这个头疼了. 7. BOX模型解释不一致问题 在FF和IE中的BOX模型解释不一致导致相差2px解决技巧:div{margin:30px!important;margin:28px;} 注意这两个margin的顺序一定不能写反, important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样: div{maring:30px;margin:28px}重复定义的话按照最后一个来执行,所以不可以只写margin:xx px!important;#box{ width:600px; //for ie6.0- w/idth:500px; //for ff+ie6.0} #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-} 8.属性选择器(这个不能算是兼容,是隐藏css的一个bug) p[id]{}div[id]{} 这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的. 9.最狠的手段 - !important 如果实在没有办法解决一些细节问题,可以用这个技巧.FF对于”!important”会自动优先解析,然而IE则会忽略.如下 .tabd1{ 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 */} 值得注意的是,一定要将xxxx !important 这句放置在另一句之上,上面已经提过 10.IE,FF的默认值问题 或许你一直在抱怨为什么要专门为IE和FF写不同的CSS,为什么IE这样让人头疼,然后一边写css,一边咒骂那个可恶的M$ IE.其实对于css的标准支持方面,IE并没有我们想象的那么可恶,关键在于IE和FF的默认值不一样而已,掌握了这个技巧,你会发现写出兼容FF和 IE的css并不是那么困难,或许对于简单的css,你完全可以不用”!important”这个东西了。 我们都知道,浏览器在显示网页的时候,都会根据网页的css样式表来决定如何显示,但是我们在样式表中未必会将所有的元素都进行了具体的描述,当然也没有必要那么做,所以对于那些没有描述的属性,浏览器将采用内置默认的方式来进行显示,譬如文字,如果你没有在css中指定颜色,那么浏览器将采用黑色或者系统颜色来显示,div或者其他元素的背景,如果在css中没有被指定,浏览器则将其设置为白色或者透明,等等其他未定义的样式均如此。所以有很多东西出现 FF和IE显示不一样的根本原因在于它们的默认显示不一样,而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定,因此对于这点也就别去怪罪IE了。 11.为什么FF下文本无法撑开容器的高度 标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min- height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义: { height:auto!important; height:200px; min-height:200px; } 12.FireFox下如何使连续长字段自动换行 众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入 的技巧来解决

aaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> /* intLen){ strTemp+=strContent.substr(0,intLen)+" "; strContent=strContent.substr(intLen,strContent.length); } strTemp+=" "+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord("ff", 37); /* ]]>*/ 13.为什么IE6下容器的宽度和FF解释不同呢

让FireFox与IE兼容</div> 问题的差别在于容器的整体宽度有没有将边框(border)的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢?大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、standards mode的相关知识,请参考相关资料。 IE6,IE7,FF IE7.0出来了,对CSS的支持又有新问题。浏览器多了,网Bpx; /*For IE7 & IE6*/ _height:20px; /*For IE6*/ 注意顺序。 这样也属于CSS HACK,不过没有上面这样简洁。 #example { color: #333; } /* Moz */ * html #example { color: #666; } /* IE6 */ *+html #example { color: #999; } /* IE7 */ 第二种,是使用IE专用的条件注释 第三种,css filter的办法,以下为经典从国外网站翻译过来的。. 新建一个css样式如下: #item { width: 200px; height: 200px; background: red; } 新建一个div,并使用前面定义的css的样式:

some text here</div> 在body表现这里加入lang属性,中文为zh: 现在对div元素再定义一个样式: *:lang(en) #item{ background:green !important; } 这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了 ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式: #item:empty { background: green !important } :empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。 对IE6和FF的兼容可以考虑以前的!important 个人比较喜欢用第一种,简洁,兼容性比较好 转载:http://www.webbise.com/post/63.html

兼容IE与FF浏览器的CSS技巧总结相关推荐

  1. 兼容低版本IE浏览器的一些技巧分享

    前言: 近期工作中,突然被要求改别人的代码,其中有一项就是兼容IE低版本浏览器,所以优雅降级吧. 我相信兼容低版本IE是许多前端开发的噩梦,尤其是改别人写的代码,更是痛不欲生. 本文将介绍一些本人兼容 ...

  2. DIV CSS兼容性解决IE6/IE7/FF浏览器的通用方法完美兼容

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 ...

  3. CSS兼容IE6,IE7,FF的技巧

    一.CSS HACK 以下两种方法几乎能解决现今所有HACK.翻阅很多资料,已测试可以使用. 1, !important 随着IE7对!important的支持, !important 方法现在只针对 ...

  4. DIV CSS完美兼容IE6/IE7/FF的通用方法

    关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HA ...

  5. 解决不同浏览器的css兼容问题

    在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 ...

  6. div+css 布局下兼容IE6 IE7 FF常见问题

    div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF) height: 100px; IE6 专用 _height: 100px; I ...

  7. CSS完美兼容IE6/IE7/FF的通用方法 ~!!!

    http://www.w3pop.com/learn/view/p/2/o/0/doc/css_hack_ie67_ff/ CSS完美兼容IE6/IE7/FF的通用方法 作者:w3pop.com 翻译 ...

  8. html4.0.1兼容ie7,CSS 完美兼容IE6/IE7/FF的通用hack方法

    CSS 完美兼容IE6/IE7/FF的通用hack方法 发布时间:2009-03-20 00:27:16   作者:佚名   我要评论 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. ...

  9. html label标签 ie6,IE6 IE7 IE8三大浏览器的CSS兼容速查表

    IE每个新版本的推出,就不可避免地在IE的各个主要版本之间产生兼容问题,尽管IE8推出已有时日,使用IE6的用户仍然相当可观.本文以速查手册的形式介绍CSS(2.1和3)在IE6,IE7,IE8三个版 ...

最新文章

  1. 人脸识别百亿蓝海之下,还需解决两方面问题
  2. 基于spring boot的统一异常处理
  3. 机器人学习--从路径规划侧面看栅格地图
  4. iPhone 14系列升级巨大:两款Pro版或将配置4800万像素镜头
  5. 在url中传递参数(方法二)
  6. 《CCNA学习指南:数据中心(640-911)》——2.5 考试要点
  7. 美赛只用matlab够,美赛思路
  8. java复习快速导航
  9. 渗透测试工具之——初识burp
  10. php 点击电话号码直接拨打,在网站上为手机用户提供”点击拨打电话”功能
  11. 10.30系统进程及服务控制,前后台调用,kill,进程信号,top进程动态监控,系统控制systemctl,ssh服务和认证,用户登陆审计
  12. matlab水下机器人,水下机器人路径控制与仿真
  13. 把Word或Excel表格插入CAD中直接编辑的方法
  14. 云服务器系统一键安装,云服务器一键安装系统
  15. MySQL数据库——MySQL数据表添加字段(三种方式)
  16. 青龙面板拉京东库(7月12号更新)
  17. 蓝牙耳机主动降噪的基础知识介绍
  18. python学习笔记3(字符串)
  19. 一入魔兽深似海,回首已是中年人
  20. 分享 :如何成为一个合格的数据架构师?

热门文章

  1. 121. Best Time to Buy and Sell Stock买卖股票的最佳时机
  2. nginx 配置 https http
  3. 蓝桥杯ACM简单题-煤球计数 2020-12-22
  4. 日常一记(9)--excel将一列数据用逗号隔开转为一行
  5. jwt实现一个帐号只能同时在一个设备(端)登录的思路
  6. error: possibly undefined macro: AC_PROG_LIBTOOL问题解决
  7. 头歌-信息安全技术-Spectre侧信道攻击过程验证
  8. PathFinder机甲大师电控组问题总结
  9. 2022黑龙江最新八大员之(安全员)模拟试题题库及答案
  10. Linux网络编程3——多进/线程并发服务器