一、CSS样式兼容
1.FLOAT闭合(clearing float)
网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合,这也是div无法自适应高度的一个原因。如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV,这种情况一般出现在一个父DIV下包含多个子DIV。解决办法:
1)给父DIV也设上float
2)在所有子DIV后新加一个空DIV(目前Ext是这么做的),比如:
.parent{width:100px;}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}
<div class="parent">
<div class="son1"></div>
<div class="son2"></div>
<div class="clear"></div>
</div>
3)万能float闭合
将以下代码加入Global CSS中,给需要闭合的div加上class=”clearfix”即可,屡试不爽。
<style>
/* 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 */
</style>
:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie浏览器支持,所以并不影响到IE/WIN浏览器。这种的最麻烦。
4)overflow:auto
只要在父DIV的CSS中加上overflow:auto就搞定。举例:
.parent{width:100px;overflow:auto}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
<div class="parent">
<div class="son1"></div>
<div class="son2"></div>
</div>
原理是,外围元素之所以不能很好的延伸,问题出在了overflow上,因为overflow不可见(见W3C的解释)。现在只要将给外围元素添加一个“overflow:auto”,就可以解决问题,结果是除了IE,真的可以解决。下来就要解决IE的问题了,再加上“_height:1%”,这个问题就完全解决了。我试了一下,其实不加"_height:1%“在IE下也行,留着吧。
2.截字省略号
.hh {
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾。技术是好技术,很多人都喜欢乱用,但注意Firefox并不支持。
<meta http-equiv="x-ua-compatible" content="ie=7" />
页面加上这句就可以让页面兼容IE7了
供参考!给大家提醒一个漂浮需要注意的问题注意设置DIV宽和高注意设置overflow:hidden;注意闭合针对火狐父div样式display:inline-block;
3.cursor:hand和cursor:pointer
firefox不支持hand,但ie支持pointer
解决方法:统一使用pointer
4.CSS透明
几款浏览器对透明度的支持方式各不相同,为了保证在IE, Firefox, Chrome, Safari等主流浏览器下都能正常显示透明度的效果,我们可以定义一个透明度的class,因为一写就要写3条,省的每次都复制来复制去了。
具体代码如下:
.transparent{
filter:alpha(opacity=60);/*支持IE浏览器*/
-moz-opacity:0.6; /*支持FireFox浏览器*/
opacity:0.6;/*支持Chrome, Opera, Safari等浏览器*/
}
5.css中的width和padding
在IE7和FF中width宽度不包括padding,在Ie6中包括padding。具体参见附录1第一节理解CSS盒子模型
更多参见附录1:跨浏览器兼容的CSS编码准则和技巧
二、JavaScript兼容
1.children与childNodes
IE提供的children、childNodes和firefox下的childNodes的行为是有区别的,firefox下childNodes会把换行和空白字符都算作父节点的子节点,而IE的childNodes和children不会。比如:
<div id="dd">
<div>yizhu2000</div>
</div>
id为dd的div在IE下用childNodes查看,其子节点数为1,而ff下为三,我们可以从firefox的dom查看器里面看到他的childNodes为["\n ", div, "\n"]。
要在firefox下模拟children的属性我们可以这样做:
if(typeof(HTMLElement) !="undefined"&& !window.opera) {
HTMLElement.prototype.__defineGetter__("children",function() {
for(vara = [], j = 0, n, i = 0; i <this.childNodes.length; i++) {
n =this.childNodes[i];
if(n.nodeType == 1) {
a[j++] = n;
if(n.name) {
if(!a[n.name])
a[n.name] = [];
a[n.name][a[n.name].length] = n;
}
if(n.id)
a[n.id] = n;
}
}
returna;
});
}
2.firefox和ie的事件
window.event只能在IE下使用,而不能用在Firefox下,这是因为Firefox的event只能在事件发生的现场使用。Firefox必须从源处加入event作参数传递。IE忽略该参数,用window.event来读取该event。
比方说下面这个在ie下获得鼠标位置的方法:
<button οnclick="onClick()" >获得鼠标点击横坐标</button>
<script type="text/javascript">
function onclick(){
alert(event.clientX);
}
</script>
需要改成
<button οnclick="onClick(event)">获得OuterHTML</button>
<script type="text/javascript">
function onclick(event){
event = event || window.event;
alert(event.clientX);
}
</script>
才能在两种浏览器下使用
3.HTML对象获取问题
FireFox获取方式document.getElementById("idName")
ie使用document.idname或者document.getElementById("idName")
解决办法:统一使用document.getElementById("idName");
4.const问题
在Firefox下,可以使用const关键字或var关键字来定义常量;
IE下,只能使用var关键字来定义常量;
解决方法:统一使用var关键字来定义常量。
5.frame问题
以下面的frame为例:
<frame src="xxx.html" id="frameId" name="frameName" />
a)访问frame对象
IE:使用window.frameId或者window.frameName来访问这个frame对象,frameId和frameName可以同名;
Firefox:只能使用window.frameName来访问这个frame对象;
另外,在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象;
b)切换frame内容
在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容;
如果需要将frame中的参数传回父窗口(注意不是opener,而是parent),可以在frame中使用parent来访问父窗口。例如:
parent.document.form1.filename.value="Aqing";
6.body问题
Firefox的body在body标签没有被浏览器完全读入之前就存在;而IE的body则必须在body标签被浏览器完全读入之后才存在;
7.firefox与IE的父元素(parentElement)的区别
IE:obj.parentElement
firefox:obj.parentNode
解决方法:因为firefox与IE都支持DOM,因此全部使用obj.parentNode
8.innerText的问题
innerText在IE中能正常工作,但是innerText在FireFox中却不行,需用textContent;
解决方法:
if(navigator.appName.indexOf("Explorer") > -1) {
document.getElementById('element').innerText ="my text";
}else{
document.getElementById('element').textContent ="my text";
}
9.AJAX获取XMLHTTP的区别
varxmlhttp;
if(window.XMLHttpRequest) {
xmlhttp =newXMLHttpRequest();
}elseif(window.ActiveXObject) {// IE的获取方式
xmlhttp =newActiveXObject("Microsoft.XMLHTTP");
}
注意:在IE中,xmlhttp.send(content)方法的content可以为空,而firefox则不能为null,应该用send(""),否则会出现411错误。
附录1:跨浏览器兼容的CSS编码准则和技巧
1.理解CSS盒子模型
如果你想实现不需要很多奇巧淫技的跨浏览器兼容的CSS代码,透彻地理解CSS盒子模型是首要事情,CSS盒子模型并不难,且基本支持所有浏览器,除了某些特定条件下的IE浏览器。
CSS盒子模型负责处理以下事情:
l一个blcok(区块)级对象占据多大的空间
l该对象的边界,留白
l盒子的尺寸
l盒子与页面其它元素的相对位置
CSS盒子模型有以下准则:
lBlock(区块)对象都是矩形(事实上所有对象都如此)
l其尺寸由width, height, padding, borders,以及margins决定
l如果不设置高度,该盒子的高度将自动适应其包含的内容,加上留白等(除非使用了float)
l如果不设置宽度,一个非float型盒子水平上将充满其父容器(扣除父容器的留白)
处理block级对象时,必须注意以下事项:
l如果一个盒子的宽度设置为100%,它就不能再设置margins, padding,和borders,否则会撑破其父容器
l垂直毗邻的margin会引起复杂的坍塌问题,导致布局问题(比如两个垂直毗邻的Block对象,上面的对象的bottom-margin为40,下面的对象的top-margin为20,则两个对象的间距将是40,而不是60 -译者)
l拥有相对位置和绝对位置的对象,拥有不同的行为
在Firefox的Firebug中显示的盒子模型
2.理解block级和inline级对象的区别
这个看似简单的问题事如果能透彻地理解,会受益匪浅。
下图讲解了block级对象和inline级对象的区别:
下面是block级对象和inline级对象的基本区别:
lBlock级对象会自然地水平充满其父容器,因此没有必要为之设置100%宽度属性
lBlock级对象的起始摆放位置是其父容器的左上边界,并顺排在其前面的兄弟Block对象的下方(除非设置float或绝对位置)
lInline级对象会忽略其宽度和高度设置
lInline级对象会随着文字排版,并受排版属性的影响(如white-space, font-size, letter-spacing)
lInline级对象可以使用vertical-align属性控制其垂直对齐,block级对象不可以
lInline级对象的下方会保留一些自然的空间,以适应字母g一类的会向下探出的笔画
l一个设置为float的inline对象将变成block对象
3.理解Floating和Clearing属性
实现多栏排版的最好方法是使用float属性,float也是一个将使你受益匪浅的属性。一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容器的边界,或其前面的float对象的边界,而紧随其后的非float对象或内容,则包围在其相反的方向。
以下是使用float和clear属性的一些重要准则:
l一个float对象,将从其置身的block级非float内容流中跳出,换句话说,如果你要将一个box向左边float,它后面的block级非float对象会显示到下方,inline级内容会在旁边包围
l要让一段内容从一侧包围一个float对象,这段内容必须要么是inline级的,要么也设置为相同方向的float
l一个float对象,如果没有设置宽度,则会自动缩成其包含的内容的宽度,因此最好为float对象明确设置宽度
l如果一个block对象包含float子对象,会出现本文中阐述的问题。
l一个设置了clear属性的对象,将不会包围其前面的float对象
l一个既设置了clear又设置了float属性的对象,只有clear:left属性生效,clear:right不起作用
4.首先使用IE进行测试
虽然我们都痛恨IE6和IE7,但当你开始一个新项目的时候,最好还是首先针对这两种浏览器进行测试,否则,如果你在设计在后期才想起针对IE6和IE7进行测试,将出现以下问题:
l你将不得不使用一些奇巧淫技,甚至使用独立的IE6/7 CSS,导致CSS文件臃肿。
l某些地方的布局将不得不重新设计
l会增加测试的时间
l你的布局在IE/6/7中和其它浏览器中不一样
在IE6/7仍有大量用户基础的国内(感谢中行,建行,农行,工行,以及各级政府网站),忽视这两种浏览器是极不明智的,首先针对IE6/7进行设计是一种很好的方法,一般来说,在IE6/7通过测试的站点,在Firefox,Chrome,Safari,Opera等标准浏览器面前基本不会出现问题,前提是,你的CSS设计是基于W3C标准的。
5.IE浏览器最常见的问题
lIE6中不可滥用float,否则会带来内容消失以及文字重复等稀奇古怪的问题
lIE6中,float对象,在float方向的那边,会出现双倍margin,将display设置为inline会解决这个问题
lIE6/7中,一个没有直接或间接设置hasLayout的对象,会发生各种稀奇古怪的问题(译者注:对这类问题,zoom这个css属性可以帮很大的忙,将zoom设置为除了normal之外的其它值,可以迫使一个对象hasLayout同时不影响这个对象的任何视觉外观)
lIE6不支持min-width, max-width, min-height, max-height一类的属性
lIE6不支持固定位置背景图
lIE6/7不支持很多display属性值(如inline-table, table-cell, table-row)
lIE6中,只有a这个对象才可以使用:hover这个伪类
lIE的某些版本对某些CSS选择器支持很少(如属性选择器,子对象选择器)
lIE6~8对CSS3的支持很有限(不过有一些变通方法)
6.永远不要指望在所有浏览器中都一模一样
在不同浏览器实现相同的体验个功能是可能的,实现近似像素级的一致外观也是可能的,但永远不要指望一模一样。
Form控件在不同浏览器显示总是不同
以下是Facebook首页中的select控件,在5种不同浏览器的显示差异
某些Form控件,如果要求必须跨浏览器一致,可以找到变通办法,如,可以使用图片替代submit按钮,但有一些控件,比如radio,select,textarea,文件选择框,是永远都不可能一模一样的。
7.字体的表现都有差异
先不谈有的字体在有的系统中根本不存在,即时存在,它们在不同系统的渲染效果也不完全一样,比如,Windows ClearType支持IE7,但不支持IE6,导致同一个字体在IE7和IE6有不同的样子。
字体在IE6 and IE7中的区别
8.使用CSS清零
使用CSS清零(CSS Reset)是实现跨浏览器兼容的灵丹妙药,CSS清零可以消除不同浏览器对margin,padding这些属性的默认表现,你可以更容易控制诸如对齐,间隙等等问题。推荐使用Eric Meyer’s CSS清零代码。
9.参考SitePoint’s CSS兼容表
SitePoint CSS Reference是一个非常好的资源(下载离线版),可以用来检查某些CSS属性的跨浏览器兼容问题
10.结语
跨浏览器兼容是个永恒的话题,本文介绍的跨浏览器兼容CSS准则只是帮助Web开发设计者尽可能实现这一目标,除了这些,基于CSS3的渐进式增强设计也是一种趋势,Web开发与设计者可以针对某些浏览器提供增强功能,而在不支持这些增强功能的浏览器中降级使用基本功能。
如果觉得《跨浏览器兼容性》对你有帮助,请点赞、收藏,并留下你的观点哦!