关
于FireFox和IE6对CSS样式的兼容性差异由来已久,它们对标准兼容的差异性,导致了大量网站开发人员的工作量加倍,不得已煞费苦心的在
Firefox和IE间进行调试,对于以前很少有关注过CSS样式浏览器兼容性问题的开发人员来说,更是一件雪上加霜的事情,原本调CSS就是一件很烦的
事情,再加上兼容性问题的阻碍,使很多开发人员咬牙切齿,却也无可奈何。
现在就CSS这三类在项目中遇到的问题进行重现,并提出相应的解决方案。
margin-left在IE下双倍显示是IE裡面的一个bug,在很多种情况下会出现这种情况。现在列举一种最常见的是在两个都是float:left的Div旁,那么margin-left在IE里显示的就是两倍的。
<div style="border:1px solid #cccccc;width:600px;height:500px;float:left;"> <div style="border:1px solid #00cccc;width:100px;height:100px;float:left;margin-left:50px;"> </div></div>
解 决方法:
通过CSS的Hack标志加上“!important”来标识Firefox读取这个属性值优先,而IE6不认识这个标识,所以FireFox读取的属性
是“margin-left:50px;”,而IE6则读取“margin-left:25px”,当IE6的margin-left显示双倍时,就得到
了50px,从而避开IE6的这个bug,达到两个浏览器的CSS样式兼容。(在后面的例子中,解决方法也基本类似,主要是把关键代码标上特殊颜色,供读
者参考)。
<div style="border:1px solid #cccccc;width:600px;height:500px;float:left;"> <div style="border:1px solid #00cccc;width:100px;height:100px;float:left;margin-left:50px!important;margin-left:25px;"> </div></div>
在
firefox里面,form里面的内容超出form的容量时也不会自动扩展form、table及div的内容,而在IE里,table、form或者
div里面的内容超出宽度时,则自动扩展外层的table、form及div,所以当我们从firefox上切换到IE6时这个问出现得比较多。
<table style="height:100px;width: 80px;border:1px solid #00FF00"> <tr><td> <form style="border:1px solid #CCCCCC;width:80px;height:80px;"> <input type="text"/> </form> </td></tr></table>
解决办法: (1).固定外层table、form或者div的宽度或者高度适应内层的内容
<table style="height:100px;width:180px;border:1px solid #00FF00"> <tr><td> <form style="border:1px solid #CCCCCC;width:170px;height:80px;"> <input type="text"/> </form> </td></tr></table>
(2).缩小里面的内容,小于table、form或者是div的宽度或者高度
<table style="height:100px;width: 80px;border:1px solid #00FF00"> <tr><td> <form style="border:1px solid #CCCCCC;width:80px;height:80px;"> <input type="text" style="width:60px"/> </form> </td></tr></table>
这个问题是当初在设计导航条时遇到的问题,导航条很多时候就是横向一排div,每个div里面都是图片,就会在IE下产生了多了一点小空格的问题。
<div style="border:1px solid #FF0000;height:132px;width:100px;"> <img src="img/om.gif"/></div>
解决办法: (1)、将div下的font-size设置为0
<div style="border:1px solid #FF0000;height:132px;width:100px;font-size:0px"> <img src="img/om.gif"/></div>
(2)、整合div里面的内容,使其没有空格,这样也可以使内容紧凑,这里可以看IE里面没有忽略img旁边的空格导致的问题
<div style="border:1px solid #FF0000;height:132px;width:100px; "><img src="img/om.gif"/></div>
默认字本显示问题,导致 显示的大小不一致,当你使用了 造成问题时请注意。
<table> <tr> <td>中华人民共 和国</td> </tr></table>
5.5. IE里div里默认line-height
在IE里Div设置至少有一个line-height所以显示的时候IE下的div显示无法显示等于10px。
<div style="margin-left: 15px; border: 1px solid #FF0000; width: 60px; height: 40px;"> <div style="margin-left: 15px; border: 1px solid #FF0000; width: 20px; height: 10px;"> </div></div>
解决方法: 设置div层里的字体大小为0,则div的高度可以自由设置。
<div style="margin-left: 15px; border: 1px solid #FF0000; width: 60px; height: 40px;"> <div style="margin-left: 15px; border: 1px solid #FF0000; width: 20px;height:10px;font-size:0px;"> </div></div>
当设置了“margin-left:auto;margin-right:auto”后,Firefox里的可以居中显示div,而IE上则不可以显示居中。
<div style="width:400px;height:80px;border:1px solid #FE871A;margin-left:auto;margin-right:auto;"> 测试div上内容显示的位置</div>
这个问题我尚未有解决办法,所以,在使用div居中时,请注意这个问题,或者可以考虑使用table替换,不要被div居中困扰,希望能对你有帮助。
这个问题也是我们经常遇到的问题,因为在firefox下,table的padding实在是太好用了,当我们转到IE6上时才发现,要改过来的痛苦,所以在使用table的padding时请注意兼容问题。
<table style="width:300px;height:100px;border:8px solid #CCCCCC;padding:18px;"> <tr> <td style="border:1px solid #ff0000">测试Table的padding</td> </tr></table>
解决办法: 建议在td里面使用一个div,然后设置div的margin,使其出现在td正确的位置上。
<table style="width:300px;height:100px;border:8px solid #CCCCCC;"> <tr><td> <div style="border:1px solid #ff0000;width:200px;height:50px;margin-left:8px;">测试Table的padding</div> </td></tr></table>
先
声明,这个问题的发现是在我的实际项目中遇到的,项目中是想显示一条横线,但是目前我无法重现出来,所以如果大家有遇到类似问题的时候可以参考一下。在
Firefox下,显示的td的border-top的时候可以显示,而在IE6下则无法显示的问题,总结了一下是td显示边框的时候会出现的问题。所以
解决办法是在td里面再设置一个div来进行显示。
<table> <tr><td style="width:300px;height:1px;border-top:1px solid #ff0000"> </td></tr></table>
解决办法:
<table> <tr><td> <div style="width:300px;height:1px;border-top:1px solid #ff0000"></div> </td></tr></table>
这 个问题应该是大部分人都会遇到的了,先介绍一下Firefox和IE下计算width和height的方法: 在IE下:
显示宽度=marginLeft + width + marginRight; 显示高度=marginTop + height
+marginBottom; 在Firefox下: 显示宽度=marginLeft + paddingLeft + borderLeft +
width + marginRight + paddingRight + borderRight; 显示高度=marginTop +
padingTop + borderTop + height + marginBottom + paddingBottom +
borderBottom;
<div> <div style="width:280px;margin-left:40px;padding-left:15px;border-width: 1px 20px 1px 20px;border-style: solid;border-color:#FE871A"> 测试width </div> <br/> <div style="height:100px;width:200px;margin-top:40px;padding-top:15px;border-width:20px 1px 20px 1px;border-style:solid;border-color:#CCCCCC;"> 测试height </div></div>
解决办法: 看到上面的示例后,可以选择用Hack来解决兼容性问题,
<div> <div style="width:225px!important;width:280px;margin-left:40px;padding-left:15px;border-width:1px 20px 1px 20px;border-style: solid;border-color:#FE871A"> 测试width </div> <br/> <div style="height:45px!important;height:100px;width:200px;margin-top:40px;padding-top:15px;border-width:20px 1px 20px 1px; border-style:solid;border-color:#CCCCCC;"> 测试height </div></div>
在firefox链接里面放一个div是在点击链接时候会莫名其妙的出现两个点(在firefox3下显示得很明显),而在IE里则显示多下横线,鼠标移过时显示的图标不一致:
<table><tr><td> <a href="#" _fcksavedurl="#"> _fcksavedurl="#"> _fcksavedurl="#"> <div style="border: 1px #cccccc solid;height:30px;width:80px;">本地链接</div> </a></td></tr></table>
解决办法: 在显示链接的时候设置cursor:pointer和text-decoration:underline;或者设置其他值,解决两个点的问题当然是把链接移动外面显示才是最好的解决方式,但由于特殊需要div必须放在链接里面时,目前不没有有效的解决方式。
<style type="text/css">a:hover{ cursor:pointer;}div{ text-decoration:underline;}</style>
在IE中cursor:hand和cursor:pointer都显示手形,而Firefox中,cursor:hand则显示为编辑图标,只是把它当文字处理而已,若要在Firefox中显示手形,请设置cursor:pointer。
<span style="cursor:hand;">hand</span><span style="cursor:pointer;">pointer</span>
相关推荐
IE和Firefox在css,JavaScript方面的兼容性
javascript和css在IE和Firefox中的不同点及解决兼容性的方案,一共有二十五点
javascript和css在IE和Firefox中的不同点
我们讨论的主题CSS网页布局,最令大家头疼的问题就是浏览器兼容性,虽然jb51.net介绍过很多这方向的知识,但依然让很多开发人员晕头转向,今天的这篇文章,将列出css和javascript在IE和Firefox中二十三个不同点,...
我们讨论的主题CSS网页布局,最令大家头疼的问题就是浏览器兼容性,虽然52CSS.com介绍过很多这方向的知识,但依然让很多开发人员晕头转向,今天的这篇文章,将列出css和javascript在IE和Firefox中二十三个不同点,...
IE与FF的兼容问题 IE浏览器和火狐浏览器兼容问题——CSS篇 IE浏览器和Firefox(火狐)浏览器兼容性——Javascript篇
今天在使用CSS属性的时候发现"cursor:hand;"在Firefox中鼠标不会变为手型,后来上网搜索了一下资料,发现hand这个cursor属性在Firrefox中不兼容,使用"cursor:pointer"就都可以显示了。
javascript+CSS版本贪吃蛇,兼容性没做处理,火狐、IE11下可以,其他版本没有测试
主要介绍了css与javascript跨浏览器兼容性,包括常见的css兼容性问题与javascript兼容性问题,以及IE与Firefox等常用浏览器的兼容性分析,需要的朋友可以参考下
包括:11种用javascript做的刷新按钮的方法、40种Javascript中常用的使用小技巧、Javascript的IE和Firefox兼容性汇编、JavaScript函数大全、JavaScript实际应用:innerHTMl和确认提示的使用、 CSS的常用技巧、IP地址...
这篇文章给大家带来《五大主流浏览器 HTML5 和 CSS3 兼容性大比拼》,让我们一起来看看2013年的浏览器现状。 浏览器厂商之间的竞争促使各大浏览器对 HTML5 和 CSS3 的支持越来越完善,下面的图表列...
作为一个Web前端工作者,你...我将在下面列举部份Dom指令在IE和FireFox等浏览器 不兼容性的问题!限于篇幅.我不在该页对提到的Dom指令做详细解释.请点击相关指令名称可以了解详细解释与实例.在使用JavaScript获取触
我最终进一步研究了跨浏览器的兼容性问题,而FireFox的问题与Safari相同。 我还必须考虑到它,然后必须重新调整Safari转换属性。 为了安全起见,我最终将-moz和-webkit添加到所有转换和转换中。 mozTransform也已...
html2canvas是一个相当不错的JavaScript类库,它使用了html5和css3的一些新功能特性,实现了在客户端对网页进行截图的功 能。...兼容性: Firefox 3.5 , Chrome, Opera, IE9 标签:html2canvas
RequireCSS(RequireJS css!插件) 一个插件,可加载并等待CSS文件。 在支持它的浏览器(IE,Firefox 9 +,Opera)...兼容性Firefox 1.0.1+ Safari 3.2+ 移动Safari 4(iOS 3.2)+ Chrome1+ Opera 9.5+ IE 6+计划媒体
这种特效是通过JavaScript和CSS实现的,在实际开发中有不少用途,下面是我找到的一个使用JavaScript制作的仿淘宝智能浮动的源代码,兼容性不错,在IE、Firefox、Chrome下都能正常工作。 使用这个特效代码需要注意,...
CSS 多浏览器兼容性问题及解决方案一、document.formName.item(”itemName”) 问题 问题说明:IE下,可以使用 document.formName.item(”itemName”) 或 document.formName.elements [“elementName”];Firefox 下...