css js兼容性

!important (功能有限)随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.
例如:

1
#example {
	width: 100px !important; /* IE7+FF */
	width: 103px; /* IE6 */
}

所有浏览器 通用 height: 100px;
IE6 专用 _height: 100px;
IE7 专用 +height: 100px;
IE6、IE7 共用 height: 100px;
IE7、FF 共用 height: 100px !important;

1
#example { height:100px; } /* FF */
* html #example { height:200px; } /* IE6 */
*+html #example { height:300px; } /* IE7 */
//IE6 - IE7+FF
#example {
height:100px; /* FF+IE7 */
_height:200px; /* IE6 */
}
#example {
height:100px !important; /* FF+IE7 */
height:200px; /* IE6 */
}
//IE6+IE7 - FF
#example {
height:100px; /* FF */
*height:200px; /* IE6+IE7 */
}
//IE6+FF - IE7
#example {
height:100px; /* IE6+FF */
*+height:200px; /* IE7 */
}
//IE6 IE7 FF 各不相同
#example {
height:100px; /* FF */
_height:200px; /* IE6 */
*+height:300px; /* IE7 */
}
或：
#example {
height:100px; /* FF */
*height:300px; /* IE7 */
_height:200px; /* IE6 */
}
//注意:代码的顺序一定不能颠倒了。因为浏览器在解释程序的时候，如果重名的话，会用后面的覆盖前面的

使用IE专用的条件注释

1
<!--其他浏览器 -->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<!-- 适合于IE7 -->
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if lte IE 6]>
<!-- 适合于IE6及以下 -->
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
//IE的if条件Hack
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->
<!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->
<!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->

clearing float
１、给父DIV也设上float
2、在所有子DIV后新加一个空DIV(不推荐，有些浏览器可以看见空DIV产生的空隙)
3、万能 float 闭合
给需要闭合的div加上 class=”clearfix” 即可

1
.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 */

4、overflow:auto 只要在父DIV的CSS中加上overflow:auto就搞定。结果是除了IE，真的可以解决。下来就要解决IE的问题了，再加上“_height:1%”，这个问题就完全解决了。

一些兼容细节

1, FF下给 div 设置 padding 后会导致 width 和 height 增加(DIV的实际宽度=DIV宽+Padding), 但IE不会.
解决办法：给DIV设定IE、FF两个宽度，在IE的宽度前加上IE特有标记” * “号。

2, 页面居中问题.
body {TEXT-ALIGN: center;} 在IE下足够了，但FF下失效。
解决办法：加上”MARGIN-RIGHT: auto; MARGIN-LEFT: auto; “

3, 有的时候在IE6上看见一些奇怪的间隙。
解决办法：试试在有空隙的DIV上加上”font-size:0px;”

4, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

5, 浮动IE6产生的双倍距离

1
#box{
	float:left;
	width:100px;
	margin:0 0 0 100px;
}
//这种情况之下IE6会产生200px的距离
//解决办法：加上display:inline，使浮动忽略

6 页面的最小宽度
IE不认得min这个定义，但实际上它把正常的width和height当作有min的情况来使。
解决办法：为了让这一命令在IE上也能用，可以把一个

放到 标签下，然后为div指定一个类：
然后CSS这样设计：
1
#container{
	min-width: 600px;
	width:e-xpression(document.body.clientWidth < 600? “600px”: “auto” );
}
//第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7、UL和FORM标签的padding与margin ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值。FORM标签在IE中,将会自动margin一些边距,而在FF中margin则是0；
解决办法：css中首先都使用这样的样式ul,form{margin:0;padding:0;}.

8 ,DIV浮动IE文本产生3象素的bug 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

1
#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>

9,截字省略号

1
.hh {
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:
nowrapoverflow:hidden;
}

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/}

DIV浮动IE文本产生3象素的bug 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //这句是关键}

.高度不适应 高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。 例:

#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上 border属性。

IE6下为什么图片下有空隙产生解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决.

如何对齐文本与文本输入框 加上 vertical-align:middle;
input {width:200px;height:30px;border:1px solid red;vertical-align:middle; }

LI中内容超过长度后以省略号显示的方法 此方法适用与IE与OP浏览器

1
li {
	width:200px;
	white-space:nowrap;
	text-overflow:ellipsis;
	-o-text-overflow:ellipsis;
	overflow:hidden;
}

为什么无法定义1px左右高度的容器 IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如 verflow:hidden | zoom:0.08 | line-height:1px

Div居中问题 div设置 margin-left, margin-right 为 auto 时已经居中，IE 不行，IE需要设定body居中，首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。

FORM标签 这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,一般首先都使用这样的样式ul,form{margin:0;padding:0;}

IE的问题：

图片产生的间隙 父元素直接包含，这个图片下方会和父元素边缘产生间隙。
方法：
1.在源代码中让和在同一行，因为那个间隙是由换行符产生的。
2.给添加样式 display:block;

最小高度问题块元素最小高度为10px，当高度定义小于10px时，仍为10px;
解决方法：为此块元素添加样式overflow:hidden;或让此款块元素的字体大小等于此会元素的高度。

列表的li为浮动，则列表后面的元素不能换行的问题
解决方法：为这个ul定义合适的高或给包含这个ul 的父div定义合适的高。

水平居中
IE6：使用text-align不但能使文本居中，还能使嵌套的块元素居中。
FF2：使用text-align只能使文本居中。
解决方法：在需要居中的块元素添加margin:0 auto;

div高度自适应问题
IE6：如果内容的高度超过父元素的高度，父元素的高度会增加。
FF2 : 如果内容的高度超过父元素的高度，内容不会隐藏，父元素的高度也不会增加。
解决方法：（假定最小高度为50px）
在父元素添加min-height:50px;height:auto !important;height:50px;visibility:hidden;

我们还没有设置#mydiv的padding，它们理所当然是紧贴边框的。但在IE中，“段落”文字并未紧紧贴住#left。在实际中可能会因此导致内部元素宽度超出外部div固定宽度而引发布局问题。
解决问题：是把#mydiv设置为display:inline-block。

CSS透明

1
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。 
FF：opacity:0.6。

ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成: {list-style:none;margin:0px;padding:0px;}

背景透明问题

1
IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
IE: filter: alpha(opacity=10);
FF: opacity:0.6;
FF: -moz-opacity:0.10;
最好两个都写，并将opacity属性放在下面

CSS双线凹凸边框

1
IE：border:2px outset;。
FF：-moz-border-top-colors:#d4d0c8 white;-moz-border-left-colors:#d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;

JavaScript兼容

children与childNodes
IE提供的children、childNodes和firefox下的childNodes的行为是有区别的，firefox下childNodes会把换行和空白字符都算作父节点的子节点，而IE的childNodes和children不会。
要在firefox下模拟children的属性我们可以这样做：

1
if (typeof(HTMLElement) != "undefined" && !window.opera) {
  HTMLElement.prototype.__defineGetter__("children", function() {
    for (var a = [], 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;
      }
    }
    return a;
  });
}

FireFox获取方式document.getElementById(“idName”)
ie使用document.idname或者document.getElementById(“idName”)
解决办法：统一使用document.getElementById(“idName”);

frame问题


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”;

firefox与IE的父元素(parentElement)的区别
IE：obj.parentElement
firefox：obj.parentNode
解决方法：因为firefox与IE都支持DOM，因此全部使用obj.parentNode

innerText的问题
innerText在IE中能正常工作，但是innerText在FireFox中却不行，需用textContent；
解决方法：

1
if (navigator.appName.indexOf("Explorer") > -1) {
  document.getElementById('element').innerText = "my text";
} else {
  document.getElementById('element').textContent = "my text";
}

AJAX获取XMLHTTP的区别

1
var xmlhttp;
if (window.XMLHttpRequest) {
  xmlhttp = new XMLHttpRequest();
} elseif (window.ActiveXObject) { // IE的获取方式
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

event.x与event.y问题
说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.
解决方法:使用mX(mX = event.x ? event.x :event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.

window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
Firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href.

firefox不支持hand，但ie支持pointer
解决方法: 统一使用pointer

FireFox中设置HTML标签的style时，所有位置性和字体尺寸的值必须后跟px。这个ie也是支持的。

document.form.item 问题
问题：
代码中存在 document.formName.item(“itemName”) 这样的语句，不能在FF下运行
解决方法：
改用 document.formName.elements[“elementName”]

集合类对象问题
问题：
代码中许多集合类对象取用时使用()，IE能接受，FF不能
解决方法：
改用 [] 作为下标运算，例：
document.getElementsByName(“inputName”)(1) 改为 document.getElementsByName(“inputName”)[1]

window.event
问题：
使用 window.event 无法在FF上运行
解决方法：
FF的 event 只能在事件发生的现场使用，此问题暂无法解决。可以把 event 传到函数里变通解决：

1
onMouseMove = "functionName(event)"
function functionName (e) {
    e = e || window.event;
    ......
}

HTML对象的 id 作为对象名的问题
问题：
在IE中，HTML对象的 ID 可以作为 document 的下属对象变量名直接使用，在FF中不能
解决方法：
使用对象变量时全部用标准的 getElementById(“idName”)

关于frame
问题：
在IE中可以用 window.testFrame 取得该frame，FF中不行
解决方法：
window.top.document.getElementById(“testFrame”).src = ‘xx.htm’
window.top.frameName.location = ‘xx.htm’

取得元素的属性
在FF中，自己定义的属性必须 getAttribute() 取得

在FF中没有 parentElement，parement.children 而用 parentNode，parentNode.childNodes
问题：
childNodes 的下标的含义在IE和FF中不同，FF的 childNodes 中会插入空白文本节点
解决方法：
可以通过 node.getElementsByTagName() 来回避这个问题

问题：
FF中节点自己没有 removeNode 方法
解决方法：
必须使用如下方法 node.parentNode.removeChild(node)

nodeName 和 tagName 问题
问题：
在FF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值，在IE中，nodeName 的使用有问题
解决方法：
使用 tagName，但应检测其是否为空

document.getElementsByName() 和 document.all[name] 的问题
问题：
在IE中，getElementsByName()、document.all[name] 均不能用来取得 div 元素
是否还有其它不能取的元素还不知道（这个问题还有争议，还在研究中）

对象宽高赋值问题
问题：
FireFox中类似 obj.style.height = imgObj.height 的语句无效
解决方法：
统一使用 obj.style.height = imgObj.height + “px”;

innerText的问题
问题：
innerText 在IE中能正常工作，但是 innerText 在FireFox中却不行
解决方法：
在非IE浏览器中使用textContent代替innerText

event.srcElement和event.toElement问题
问题：
IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性
解决方法：
var source = e.target || e.srcElement;
var target = e.relatedTarget || e.toElement;

禁止选取网页内容
问题：
FF需要用CSS禁止，IE用JS禁止
解决方法：
IE: obj.onselectstart = function() {return false;}
FF: -moz-user-select:none;

捕获事件
问题：
FF没有setCapture()、releaseCapture()方法
解决方法：

1
IE:
obj.setCapture();
obj.releaseCapture();
FF:
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
if (!window.captureEvents) {
       o.setCapture();
}else {
       window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
if (!window.captureEvents) {
       o.releaseCapture();
}else {
       window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}

window.event问题
说明:window.event只能在IE下运行,而不能在Firefox下运行,这是因为Firefox的event只能在事件发生的现场使用. Firefox必须从源处加入event作参数传递。Ie忽略该参数，用window.event来读取该event。
解决方法:

1
function Submitted(evt){
evt=evt?evt:(window.event?window.event:null);
}

event.srcElement问题
说明:IE下,event对象有srcElement属性,但是没有target属性;
Firefox下,even对象有target属性,但是没有srcElement属性.
解 决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target. 请同时注意event的兼容性问题。

事件委托方法
IE：document.body.onload = inject; //Function inject()在这之前已被实现
Firefox：document.body.onload = inject();

ie,firefox以及其它浏览器对于table标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChild方法也不管用。
解决方法：

1
//向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML ="";
cell.className ="XXXX";
row.appendChild(cell);