CSS兼容火狐与IE:解决常见兼容问题与技巧
在CSS编写过程中,确保代码在火狐(Firefox)和Internet Explorer(IE)两大主流浏览器之间的兼容性至关重要。本文将针对火狐和IE的差异性,提供一些关键的兼容性技巧和解决方案。 首先,由于早期版本的IE存在较多的不兼容性,特别是CSS语法上的问题,确保遵循标准的CSS语法是基础。例如,IE6及以下版本对`vertical-align`属性在某些情况下处理不当,可能需要调整元素的`line-height`来配合。同时,对于浮动元素(如`float`),IE需要额外设置`margin-top`,如`#imfloat`示例中的10px,而Firefox则可能不需要或有不同要求。 其次,IE对`display`属性的处理也有所差异。比如,`display: inline`在IE中可能会自动添加额外的空间,而Firefox则保持紧凑。为避免这类问题,可以为IE单独定义样式,如`#box`的`display`属性设置。 在布局方面,块级元素和行内元素的行为在不同浏览器中有所不同。IE倾向于更严格的布局规则,而Firefox更为灵活。因此,明确元素的`display`类型(如`block`、`inline`)对于兼容性非常重要。此外,IE对`min-width`和`min-height`的支持不足,可能需要使用`expression`或者JavaScript来实现动态宽度和高度的最小限制。 最后,IE特有的bug会影响元素的位置和尺寸。例如,对`float`元素的偏移计算问题,以及在设置了百分比宽度后可能出现的问题。解决这类bug通常需要细致地测试和调整CSS代码。 为了实现火狐和IE浏览器的兼容,开发者需要熟悉这两者的特点和差异,确保CSS语法的标准化,并根据必要使用条件注释、特性检测或JavaScript技巧来弥补浏览器间的兼容性问题。通过细心调整和测试,可以使网站在主流浏览器上都能呈现出一致的用户体验。
时间:2011-03-13 Tag:CSS IE 火狐 兼容 浏览器
如何让你写的代码更兼容火狐和IE两大主流浏览器?本文将总结总结CSS中火狐浏览器与IE浏览器的兼容代码,兼容你兼容主要是语法规范问题,你写CSS写规范了,就都兼容了,其他的就是一些浏览器的BUG了,发一些技巧给你看看,或许有用。
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为
#IamFloat{
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下面根本等于没有设置宽度和高度。
比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:
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 id="box">
<div id="left"></div>
<div id="right"></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;可以做到,这样就达到了兼容。
剩余6页未读,继续阅读
- 粉丝: 15
- 资源: 6
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 李兴华Java基础教程:从入门到精通
- U盘与硬盘启动安装教程:从菜鸟到专家
- C++面试宝典:动态内存管理与继承解析
- C++ STL源码深度解析:专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手:数据管理与企业增值的战略
- Eclipse IDE基础教程:从入门到精通
- Shell脚本专家宝典:全面学习与资源指南
- Tomcat安装指南:附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华:必备术语集锦