margin在IE、Firefox、Chrome、Safari下兼容的超级方法!
2013-08-13 17:04
459 查看
问题出现的来由:
笔者本来很注意网页前段兼容的问题,所以在CSS定义和测试时都很小心。但由于在编写CSS过程中调用了其它网站的已经定义好的CSS文件及Jquery文件,所以需要在整合时做很多拆分,以符合自己网站整体CSS的定义,并是整个页面能够将各实用功能恰如其分的融合。问题的技术处在于,被我调用的CSS文件和Jquery文件中,对于层及样式的定义是相互交叉融合,并且代码经过处理,可读性极差,因此出现了一个问题,就是,top或margin-top无论如何经过自己的调用,在IE和其它内核浏览器中,都似乎相差5个像素左右的不同。
在这里,我们不讨论,如何使用display,line-height等属性的兼容性使用,因为在我目前遇到的情况中这些属性定义都不适用了。
我们先来看差别。原先定义的样式代码的主要部分(看红色部分):
#simple{
position:absolute;
top:30px;
left:0px;
width:90px;
height:30px;
}
经过测试,发现在IE中位置定位成功,但是在chrome和Firefox中,位置尚缺5个像素,或者说,上移了5个像素。
于是笔者这样改:
#simple{
position:absolute;
margin-top:30px;
left:0px;
width:90px;
height:30px;
}
结果还是一样错误!
再改,意图做IE和Firefox的兼容:
#simple{
position:absolute;
margin-top:30px; /*for IE*/
margin-top:35px !important;/*for Firefox*/
left:0px;
width:90px;
height:30px;
}
注意:IE不识别 !important。其次,定义顺序,IE以最后一个属性的定义为最终的网页识别定义,虽然不识别!important,但是,IE识别了35px这个高度设置,在Firefox和Chrome下位置定位成功了,但是在IE下又失败了,下移了5个像素。
于是笔者马上调整顺序,如下:
#simple{
position:absolute;
margin-top:35px !important;/*for Firefox*/
margin-top:30px; /*for IE*/
left:0px;
width:90px;
height:30px;
}
以为会成功,结果又失败了,其实Firefox也是识别最后一个属性定义值的。所以笔者紧急调用小宇宙,第一,必须解决定义的准确性,第二,必须解决不同浏览器的兼容问题,并且分开定义。
于是:
(1)在属性定义时,先做完整的闭合处理,即
margin:30px 0 0 0; /*上、右、下、左*/
(2)特别定义IE能识别,而其它浏览器不识别的处理,即
*margin:30px 0 0 0; /*IE 6, IE 7, IE 8 可识别*/
(3)定义两个margin,其中一个只让IE识别,另一个做一般化处理,即:
*margin:30px 0 0 0; /*IE 6, IE 7, IE 8 可识别*/
margin:35px 0 0 0; /*一般化定义,也注意闭合,并且定义往下多占据5个像素*/
完整代码如下:
#simple{
position:absolute;
margin:35px 0 0 0;/*For ALL*/
*margin:30px 0 0 0; /*for IE6,7,8*/
left:0px;
width:90px;
height:30px;
}
测试,成功!
注意:仍然需要注意定义的顺序,如果颠倒顺序,IE最后仍识别margin-top:35px的属性。其它浏览器识别了第一个一般化定义之后,就不去关注*margin设置了,而IE识别了最后的*margin值,及top是30px的值,因此定义成功。
在这里,我们忽略了,由于一开始我所说的其它属性设置的兼容性影响,单独做margin的处理,这样,无论其它属性是否兼容,而最后这样的设置,使得高度和margin都兼容了!
笔者本来很注意网页前段兼容的问题,所以在CSS定义和测试时都很小心。但由于在编写CSS过程中调用了其它网站的已经定义好的CSS文件及Jquery文件,所以需要在整合时做很多拆分,以符合自己网站整体CSS的定义,并是整个页面能够将各实用功能恰如其分的融合。问题的技术处在于,被我调用的CSS文件和Jquery文件中,对于层及样式的定义是相互交叉融合,并且代码经过处理,可读性极差,因此出现了一个问题,就是,top或margin-top无论如何经过自己的调用,在IE和其它内核浏览器中,都似乎相差5个像素左右的不同。
在这里,我们不讨论,如何使用display,line-height等属性的兼容性使用,因为在我目前遇到的情况中这些属性定义都不适用了。
我们先来看差别。原先定义的样式代码的主要部分(看红色部分):
#simple{
position:absolute;
top:30px;
left:0px;
width:90px;
height:30px;
}
经过测试,发现在IE中位置定位成功,但是在chrome和Firefox中,位置尚缺5个像素,或者说,上移了5个像素。
于是笔者这样改:
#simple{
position:absolute;
margin-top:30px;
left:0px;
width:90px;
height:30px;
}
结果还是一样错误!
再改,意图做IE和Firefox的兼容:
#simple{
position:absolute;
margin-top:30px; /*for IE*/
margin-top:35px !important;/*for Firefox*/
left:0px;
width:90px;
height:30px;
}
注意:IE不识别 !important。其次,定义顺序,IE以最后一个属性的定义为最终的网页识别定义,虽然不识别!important,但是,IE识别了35px这个高度设置,在Firefox和Chrome下位置定位成功了,但是在IE下又失败了,下移了5个像素。
于是笔者马上调整顺序,如下:
#simple{
position:absolute;
margin-top:35px !important;/*for Firefox*/
margin-top:30px; /*for IE*/
left:0px;
width:90px;
height:30px;
}
以为会成功,结果又失败了,其实Firefox也是识别最后一个属性定义值的。所以笔者紧急调用小宇宙,第一,必须解决定义的准确性,第二,必须解决不同浏览器的兼容问题,并且分开定义。
于是:
(1)在属性定义时,先做完整的闭合处理,即
margin:30px 0 0 0; /*上、右、下、左*/
(2)特别定义IE能识别,而其它浏览器不识别的处理,即
*margin:30px 0 0 0; /*IE 6, IE 7, IE 8 可识别*/
(3)定义两个margin,其中一个只让IE识别,另一个做一般化处理,即:
*margin:30px 0 0 0; /*IE 6, IE 7, IE 8 可识别*/
margin:35px 0 0 0; /*一般化定义,也注意闭合,并且定义往下多占据5个像素*/
完整代码如下:
#simple{
position:absolute;
margin:35px 0 0 0;/*For ALL*/
*margin:30px 0 0 0; /*for IE6,7,8*/
left:0px;
width:90px;
height:30px;
}
测试,成功!
注意:仍然需要注意定义的顺序,如果颠倒顺序,IE最后仍识别margin-top:35px的属性。其它浏览器识别了第一个一般化定义之后,就不去关注*margin设置了,而IE识别了最后的*margin值,及top是30px的值,因此定义成功。
在这里,我们忽略了,由于一开始我所说的其它属性设置的兼容性影响,单独做margin的处理,这样,无论其它属性是否兼容,而最后这样的设置,使得高度和margin都兼容了!
相关文章推荐
- JS实现pasteHTML兼容ie,firefox,chrome的方法
- CSS设置DIV Herf底层图片和链接同时改变,兼容IE,Firefox,Opera,Safari,Chrome等
- js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
- 用HTML5为你的网页添加音效(兼容Firefox 3.5+, IE 6-9, Safari 3.0+, Chrome 3.0+, Opera 10.5+)
- 常见浏览器兼容问题及相关解决方法(chrome/IE/firefox)
- css页面变灰度兼容ie、firefox、chrome、opera、safari实现样式
- CSS半透明度设置,兼容Firefox, IE, Chrome, Opera and Safari
- js + php 读取、播放视频流 兼容firefox,chrome,ie,mac的safari,ios的safari,ios的微信浏览器(文件读取文件流篇) 分类: php javascript jwplayer6 视频流 视频 safari
- IE Firefox Opera Chrome Safari 对MARQUEE标签的兼容问题
- js + php 读取、播放视频流 兼容firefox,chrome,ie,mac的safari,ios的safari,ios的微信浏览器(文件读取文件流篇)
- JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
- JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器【转】
- IE、Firefox、Opera和Safari对CSS样式important和*和_的支持 兼容CSS的解决方法及CSS差别
- 多图片上传+图片预览,兼容所有浏览器 IE5/IE6/IE7/IE8/IE9/Chrome/Safari/Firefox/Opera/
- js + php 读取、播放视频流 兼容firefox,chrome,ie,mac的safari,ios的safari,ios的微信浏览器(curl读取文件流篇) 分类: php javascript 浏览器兼容 safari 视频流 jwplayer6
- 兼容IE & Firefox 的脚本改本属性值的检测方法 [ 不支持Chrome ]
- js + php 读取、播放视频流 兼容firefox,chrome,ie,mac的safari,ios的safari,ios的微信浏览器(curl读取文件流篇)
- JS判断浏览器类型的方法总结(IE firefox chrome opera safari)