.以下以 IE 代替 Internet Explorer，以 MF/FF 代替 Mozzila Firefox
//window.event
IE：有window.event对象
FF：没有window.event对象。可以通过给函数的参数传递event对象。如οnmοusemοve=doMouseMove(event)
//鼠标当前坐标
IE：event.x和event.y。
FF：event.pageX和event.pageY。
通用：两者都有event.clientX和event.clientY属性。
//鼠标当前坐标(加上滚动条滚过的距离)
IE：event.offsetX和event.offsetY。
FF：event.layerX和event.layerY。
//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的兼容性问题。
//event.toElement问题
问题：
IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性
解决方法：
var target = e.relatedTarget || e.toElement;
//标签的x和y的坐标位置：style.posLeft 和 style.posTop
IE：有。
FF：没有。
通用：object.offsetLeft 和 object.offsetTop。
//窗体的高度和宽度
IE：document.body.offsetWidth和document.body.offsetHeight。注意：此时页面一定要有body标签。
FF：window.innerWidth和window.innerHegiht，以及document.documentElement.clientWidth和document.documentElement.clientHeight。
通用：document.body.clientWidth和document.body.clientHeight。
//添加事件
IE：element.attachEvent("onclick", function);。
FF：element.addEventListener("click", function, true)。
通 用：element.οnclick=function。虽然都可以使用onclick事件，但是onclick和上面两种方法的效果是不一样的，onclick 只有执行一个过程，而attachEvent和addEventListener执行的是一个过程列表，也就是多个过程。例如：element.attachEvent("onclick", func1);element.attachEvent("onclick", func2)这样func1和func2都会被执行。
//标签的自定义属性
IE：如果给标签div1定义了一个属性value，可以div1.value和div1["value"]取得该值。
FF：不能用div1.value和div1["value"]取。
通用：div1.getAttribute("value")。
//document.form.item 问题
IE:现有问题：现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 MF 下运行
FF/IE: document.formName.elements["elementName"]
//集合/数组类对象问题
(1)现有问题：
现有代码中许多集合类对象取用时使用 ()，IE 能接受，MF 不能。
(2)解决方法：
改用 [] 作为下标运算。如：document.forms("formName") 改为 document.forms["formName"]。
又如：document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]
//HTML 对象的 id 作为对象名的问题
(1)现有问题
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
(2)解决方法
用 getElementById("idName") 代替 idName 作为对象变量使用
//用idName字符串取得对象的问题
(1)现有问题
在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在MF 中不能。
(2)解决方法
用 getElementById(idName) 代替 eval(idName)。
//变量名与某 HTML 对象 id 相同的问题
(1)现有问题
在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
(2)解决方法
在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。
//document.getElementsByName() 和 document.all[name] 的问题
现有问题：在 IE 中，getElementsByName()、document.all[name] 均不能用来取得 div 元素（是否还有其它不能取的元素还不知道）。
//document.all
Firefox可以兼容document.all， 但会生成一条警告。可以用getElementById("*") 或者 getElementByTagName("*")来代替
不过对于document.all.length等属性，则完全不兼容
//input.type属性问题
说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写
//window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location
解决方法:使用window.location来代替window.location.href
//模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
//frame问题
以下面的frame为例：
<frame src="xxx.html" mce_src="xxx.html" id="frameId" name="frameName" />
(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象. frameId和frameName可以同名。
FF:只能使用window.frameName来访问这个frame对象.
另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.
(2)切换frame内容:
在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.
如果需要将frame中的参数传回父窗口(注意不是opener,而是parent frame)，可以在frme中使用parent来访问父窗口。例如：window.parent.document.form1.filename.value="Aqing";
//body问题
Firefox的body在body标签没有被浏览器完全读入之前就存在；而IE的body则必须在body标签被浏览器完全读入之后才存在
//事件委托方法
IE：document.body.onload = inject; //Function inject()在这之前已被实现
FF：document.body.onload = inject();
//firefox与IE的父元素(parentElement)的区别
IE：obj.parentElement
FF：obj.parentNode
解决方法: 因为FF与IE都支持DOM,因此使用obj.parentNode是不错选择
//innerText在IE中能正常工作，但是innerText在FireFox中却不行. 需用textContent
//FireFox中设置HTML标签的style时，所有位置性和字体尺寸的值必须后跟px。这个ie也是支持的
//父节点、子节点和删除节点
IE：parentElement、parement.children，element.romoveNode(true)。
FF：parentNode、parentNode.childNodes，node.parentNode.removeChild(node)。
//对select的options集合操作
枚举元素除了[]外，SelectName.options.item()也是可以的, 另外SelectName.options.length, SelectName.options.add/remove都可以在两种浏览器上使用。
注意在add后赋值元素，否则会失败
动态删除select中的所有options：
document.getElementById("ddlResourceType").options.length=0;
动态删除select中的某一项option：
document.getElementById("ddlResourceType").options.remove(indx);
动态添加select中的项option:
document.getElementById("ddlResourceType").options.add(new Option(text,value));
IE FF 动态删除通用方法：
document.getElementById("ddlResourceType").options[indx] = null;
//捕获事件
问题：
FF没有setCapture()、releaseCapture()方法
解决方法：
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);
}
//禁止选取网页内容
问题：
FF需要用CSS禁止，IE用JS禁止
解决方法：
IE: obj.onselectstart = function() {return false;}
FF: -moz-user-select:none;
//画图
IE：VML。
FF：SVG。
//CSS：透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
//CSS：圆角
IE：不支持圆角。
FF：-moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;。
//CSS：双线凹凸边框
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;。
一、JS与DOM的兼容性：
(一) DOM节点的访问：
1.以前对DOM节点访问一般用“document.All.元素ID属性值”或者“document.元素ID属性值”这种简化的方法，在FireFox中有时不支持此方法。
解决办法：标 准的方法为“document.getElementByIdx_xx(‘元素ID属 性值’)”或者“document.getElementByName(‘元素Name属性值’)[0]”或者 “document.getElementByTagName(‘元素标签名’)[0]”；
2.集合类对象的()与[]的问题：以前的代码中很多集合类对象的访问使用()，IE可以正常解析，FireFox不支持。
解决办法：改 用[]作为下标符号。 如：document.Forms(‘FormName’)改为document.Forms[‘FormName’]；又 如：document.getElementsByName(‘元素Name属性值’)(1)改为 document.getElementsByName(‘元素Name属性值’)[1]；
3.document.Form.Item的问题：FireFox不能正常解析形 如：document.FormName.Item("ItemName")这样的语句,但IE与FireFox都支持 document.FormName.Elements["ElementName"]。
解决办法：改用如下语句形式：document.FormName.Elements["ElementName"]；
4.在IE中，可以利用eval_r(‘元素ID属性值’)的方法取得改HTML对象，FireFox不支持此种对象访问方法。
解决办法：用“document.getElementByIdx_xx(‘元素ID属性值’)”的方法取得对象；
5.在IE中可以通过ID属性值或者Name属性访问这个Frame对象,而FireFox只可以通过Name属性来访问这个Frame对象;
IE和FireFox均可通过window.document. getElementById(‘FrameId属性值’)来访问这个Frame对象
6.在IE中body对象要在<body>标签完全读入才会存在，而在FireFox中一开始就存在
7.在IE中input标签的type属性是只读的，但在FireFox中是可读写的
8.在IE中getElementsByName()、document.all[name]均不能用来取得div元素
9.IE,FireFox以及其它浏览器对于Table标签的操作都各不相同，在IE中不允许对Table和TR的innerHTML赋值，使用JS增加一个TR时，使用appendChild方法也不管用。
解决办法：
//向Table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement_x_x_x_x("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);
10.在FireFox节点中没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)
11.IE或者FireFox2.0.x下,可以使用window.location或window.location.href;但在FireFox1.5下，只能使用window.location
解决方法:使用window.location来代替window.location.href
12.IE与FireFox的访问父元素有区别，IE为Obj.ParentElement属性;FireFox为Obj.ParentNode属性
解决办法：因为FireFox与IE都支持DOM，因此统一用ParentNode属性
13.FireFox不支持元素的innerText属性，需用textContent
解决办法：
if(navigator.appName.indexOf("Explorer") > -1){
} else{
}
14.FireFox不支持元素的HtmlText属性
解决办法：
rng = document.createRange();
el = document.getElementByIdx_xx(ElementId);
rng.setStartBefore(el);
htmlFrag = rng.createContextualFragment
while (el.hasChildNodes()){
el.RemoveChild(el.LastChild);
el.AppendChild(htmlFrag);
15.在IE下可以用<Img Id="pic" OnClick="this.src= ‘aa.php’" src="aa.php" style="cursor: pointer"/> 可以刷新图片，但在FireFox下由于缓存问题不行。
解决办法：在地址后面加个随机数：编辑onclick事件代码如下："this.src=this.src+’?’+Math.random()"
16.在访问某一节点如childNodes[i]时，要获得该节点的值而这个值是<![CDATA[]]类型，那么在IE中可支持这样访问 childNodes[i].text或childNodes[i].firstChild.nodeValue；在FireFox只支持 childNodes[i].firstChild.nodeValue
解决办法：统一用childNodes[i].firstChild.nodeValue方法访问节点元素值
17.在形如
<root>
<en>text</en>
</root>
格式的XML,在IE中<en>是<root>的第一个子节点，可通过root.childNodes[0]或 root.firstChild访问，但在FireFox中<en>是<root>的第二个子节点，第一个子元素是换行 符，NodeType是#text;如果将XML换成如下格式
<root><en>text</en></root>
在IE和FireFox中<en>都是<root>的第一个子节点
18.在用JS创建单选按钮上的方法上，IE与其它浏览器不同，要写出通用的创建方法就需要一种浏览器嗅探机制(browser-sniffing);IE是唯一能够识别uniqueID这一document对象专属属性的浏览器，故可用该属性区分浏览器类型；代码如下：
if(document.uniqueID){
//Internet Explorer
var radioButtion = document.createElement_x_x_x_x("<input type='radio' name='radioButtion' value ='checked'>");
}else{
//Standards Compliant
var readioButtion = document.createElement_x_x_x_x("input");
readioButtion.setAttribute("type","radio");
readioButtion.setAttribute("name","radioButtion");
readioButtion.setAttribute("value","checked");
}
19.删除select列表标签的列表项应该用obj.remove(i);而不是用obj.options.remove(i);
20.添加select列表标签的列表项应该用
var oOption = document.createElement_x_x_x_x('option');
oOption.text = text;
oOption.value = value;
targetArea.options[targetArea.options.length]= oOption; //new Option(text,value);
而不是用
var oOption = document.createElement_x_x_x_x('option');
oOption.text = text;
oOption.value = value;
targetArea.options.add(oOption);
21.IE中一般这样初始化一个XMLDOM对象
var xmlDom = new ActiveXObject("Microsoft.XMLDOM");
FireFox不支持该方法(具体原因参见四.JS的语法兼容性.6.)，兼容性代码如下
if (window.ActiveXObject){
var xmlDom = new ActiveXObject("Microsoft.XMLDOM");
}else{
if (document.implementation && document.implementation.createDocument){
var xmlDom = document.implementation.createDocument("","",null);
}
}
有关不同浏览器对XMLDOM操作的异同请参见《IE和FireFox浏览器读取XML方法比较》
(二) DOM节点属性的访问：
1.原来在IE中设置HTML对象属性的方法如：document.all.apple.width=100或者apple.width=100； 现在为 了能够和FireFox兼容，对象属性的设置写为：document.getElementByIdx_xx(‘元素ID属性 值’).setAttribute(‘width’, ‘100’)
document.getElementsByTagName_r(‘元素标签名’)[0].setAttribute(‘width’, ‘100’)
对象属性的获取写为：
document.getElementByIdx_xx(‘元素ID属性值’).getAttribute(‘width’)
document.getElementsByTagName_r(‘元素标签名’)[0].getAttribute(‘width’)
2.(接上条) 在IE下不能正确使用setAttribute来设置对象的style、class以及事件响应属性, 因此还得按原来的方法来访问和设置，以达到兼容各种浏览器的效果
如下例：
document.getElementByIdx_xx(‘元素ID属性值’).class
document.getElementByIdx_xx(‘元素ID属性值’).style.color
document.getElementByIdx_xx(‘元素ID属性值’).onclick
document.getElementByIdx_xx(‘元素ID属性值’).class="classname"
document.getElementByIdx_xx(‘元素ID属性值’).style.color="colorname"
document.getElementByIdx_xx(‘元素ID属性值’).οnclick= function(){alert(‘函数内容’)}
3.在FireFox中，自己定义的属性必须用getAttribute()方法获取，不能像在IE下直接获取
解决办法：统一用getAttribute()方法获取
4.img标签具有title和alt两个属性，title用作图片的tip说明，alt用在图片不存在或加载失败时的提示；在IE中若未定义title则alt也承担了title的作用，但在FireFox则各司其职；因此为保证浏览器兼容最好各尽其用
5.IE中要操作某个节点(Node)的class要用”classname”做为属性名来设置或取得，FireFox和其它浏览器用”class”做为属性名来设置或取得
6.设置某个节点(Node)的style,如果用”style” 做为属性名其它浏览器都能解析，但IE会忽略；如果用”cssText” 做为属性名其它浏览器都能解析，但Opera会忽略;通用代码如下：
var oStyle = oNode.getAttribute("style");
if(oStyle == "[object]"){
oStyle.setAttribute("cssText", strStyle);
oNode.setAttribute("style", oStyle);
}else{
oNode.setAttribute("style", strStyle);
}
(三) DOM事件(event)的使用：
1.IE下一般用document.body.onload = onload_func这样的方法注册onload响应事件函数，其中function onload_func()在这之前已经被实现，但是在FireFox下却无法执行; FireFox下一般用document.body.onload = onload_func()这样的方法。
解决办法：都 采用window.onload = onload_func这种方法;或者都采用document.body.onload = new Function('onload_func'); 或者都采用document.body.onload = function(){}。(注意Function与function的区别)
2.FireFox的event只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：
原代码(可在IE中运行)：
<input type="button" name="someButton" value="提交" οnclick="javascript:gotoSubmit()"/>
...
<script language="javascript">
function gotoSubmit(){
...
alert(window.event);
...
}
</script>
新代码(可在IE和FireFox中运行)：
<input type="button" name="someButton" value="提交" οnclick="javascript:gotoSubmit(event)"/>
...
<script language="javascript">
function gotoSubmit(evt) {
evt = evt ? evt : (window.event ? window.event : null);
...
alert(evt);
...
}
</script>
此外，如果新代码中第一行不改，与原代码相同的话(即gotoSubmit调用没有给参数)，则仍然只能在IE中运行，但不会报错。
3.在IE中，event对象有x、y两属性，FireFox中没有;相对的在FireFox中，event对象有pageX、pageY两属性，IE中没有。
解决办法：用event.clientX、event.clientY代替，缺陷是在页面中存在滚动条时与pageX、pageY有细微差别；或者用如下方法代替：
pgX = event.x ? event.x : event.pageX;
pgY = event.y ? event.y : event.pageY;
可取得无差别数值。
4.在IE中event对象有srcElement属性,但是没有target属性; 在Firefox中event对象有target属性,但是没有srcElement属性
解决办法：用obj = event.srcElement ? event.srcElement : event.target;来代替IE下的event.srcElement或者Firefox下的event.target,请同时注意event的兼容性问题。
5.添加事件捕获
FireFox中：document.addEventListener( "mousemover",mousemovefunction,true);
document.removeEventListener( "mousemove ",mousemovefunction,true);
6.禁止选取网页内容
FireFox中用CSS：-moz-user-select:none
(四) JS的语法兼容性：
1.在FireFox中可以使用与HTML节点对象ID属性值相同的JS变量名称，但是IE中不行。
解决办法：在命名上区分HTML节点对象ID属性值和JS变量
2.IE不支持JS的const,无法定义JS常量
解决办法：全部用var定义为变量
3.在JS中书写URL地址字符串时&字符就直接写为“&”(去掉双引号),不要写“&”，否则容易出现URL识别不正常的错误
4.在IE中可以通过showModalDialog和showModelessDialog打开模式和非模式窗口，FireFox下则不能
解决办法：使 用Window.Open方法。如果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用Window.Opener属性来访问父窗口；如果需要父窗口 控制子窗口的话，使用Var subWindow = Window.Open(pageURL,Name,Parameters); 来获得新开的窗口对象
5.在IE中向表格里添加一行的方法insertRow()如果不指定参数，默认参数为-1,将自动向Table中追加1行；在FireFox中一定要指定参数如-1,参数为空会报错
6.在IE中可以使用new ActiveXObject()的方法实例化对象，如var xmlDom = new ActiveXObject("Microsoft.XMLHTTP");但是FireFox不支持ActiveXObject,只能通过这种方法如 var xmlDom = new XMLHttpRequest();实例化对象
二、CSS兼容性：
1.CSS中几种浏览器对不同关键字的支持，可进行浏览器兼容性重复定义
!important
*
_
*+
2.IE专用的条件注释
<!--其他浏览器 -->
<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]-->
3.几个浏览器对实际像素的解释
IE/Opera：对象的实际宽度 = (margin-left) + width + (margin-right)
Firefox/Mozilla：对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)
4.鼠标手势问题：FireFox的cursor属性不支持hand，但是支持pointer，IE两个都支持；所以为了兼容都用pointer
5.FireFox中设置HTML标签的Style属性时，所有位置、宽高和尺寸值必须后跟px，IE也支持此写法，因此统一加px单位。如 Obj.Style.Height = imgObj.Style.Height + ‘px’;
6.FireFox无法解析简写的padding属性设置，如padding 5px 4px 3px 1px；必须改为 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px0；
7.消除ul、ol等列表的缩进时，样式应写成:list-style:none;margin:0px;padding:0px;其中margin属性对IE有效，padding属性对FireFox有效
8.CSS控制透明：IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);
9.CSS控制圆角：IE：不支持圆角；
FireFox: -moz-border-radius:4px;或
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius- bottomright:4px;
10.CSS双线凹凸边框：IE：border:2px outset;
FireFox：
-moz-border-top-colors: #d4d0c8 white;
-moz-border-left-colors: #d4d0c8 white;
-moz-border-right-colors:#404040 #808080;
-moz-border-bottom-colors:#404040 #808080;
11.IE支持CSS方法cursor:url()自定义光标样式文件和滚动条颜色风格；FireFox对以上两者均不支持
12.IE有Select控件永远处于最上层的bug,且所有CSS对Select控件都不起作用
13.IE支持Form中的Label标签，包括图片和文字内容；FireFox不支持包含图片的Label，点击图片不能让标记 label for 的Radio或CheckBox产生效果
14.FireFox中的TextArea不支持onScroll事件
15.FireFox不支持display的inline和block
16.FireFox对Div设置margin-left, margin-right为auto时已经居中, IE中不行
17.FireFox对Body设置text-align时, Div需要设置margin: auto(主要是margin-left margin-right) 方可居中
18.对超链接的CSS样式设置最好遵从这样的顺序：L-V-H-A。即
<style type="text/css">
<!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>
这样可以避免一些访问过后的超链接就不具备hover和active样式了
19.IE中设置长段落自动换行在CSS中设置word-wrap:break-word；FireFox中使用JS插入 的方法来实现，具体代码如下：
<script type="text/javascript">
function toBreakWord(el, intLen){
var obj=document.getElementByIdx_xx(el);
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+" ";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+=" "+strContent;
obj.innerHTML=strTemp;
}
if(document.getElementByIdx_xx && !document.all) toBreakWord("div_id", 37);
</script>
20.在子容器加了浮动属性后,该容器将不能自动撑开
解决方法：在标签结束后下一个标签中加上一个清除浮动的CSS clear:both;
21.浮动后IE6解释外边距为实际边距的双倍
解决办法：加上display:inline
22.IE6下图片下方会有空隙
解决办法：为img加上display:block或设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom
23.IE6下两个层中间有空隙
解决办法：设置右侧div也同样浮动float:left或者相对IE6定义 margin-right:-3px;
24.LI中内容超过长度后以省略号的显示方法
<style type="text/css">
<!--
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
-->
</style>
25.将元素的高度和行高设为相同值，即可垂直居中文本
<style type="text/css">
<!--
div {
height:30px;
line-height:30px;
}
-->
</style>
26.对齐文本与文本输入框，须在CSS中增加vertical-align:middle;属性设置
<style type="text/css">
<!--
… …
vertical-align:middle;
}
-->
</style>
27.支持WEB标准的浏览器设置了固定高度值就不会像IE6那样被撑开，但是又想设置固定高度又想能够被撑开呢?解决办法是去掉height属性而设置min-height，为了兼容不支持min-height的IE6可以这样定义：
{
height:auto!important;
height:200px;
min-height:200px;
}
28.web标准中IE无法设置滚动条颜色
解决办法：在CSS中对body的设置改为对html的
<style type="text/css">
<!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
</style>
29.IE6由于默认行高问题无法定义1px左右高度的容器，
解决办法：在CSS中对容器设置如：overflow:hidden | zoom:0.08 | line-height:1px
30.给Flash设置透明属性可使层显示在Flash之上
<param name="wmode" value="transparent" />
<embed wmode="transparent" …… >
31.FireFox设置Padding属性后会相应的增加Width和Height属性值，IE不会
解决办法：用!important方法多定义一套Height和Width
32.FireFox对div与div之间的空格是忽略的，但IE是处理的；因此尽量在两个相连的div之间不要有空格和回车，否则可能会造成不同浏览器之间格式不正确，比如著名的3px偏差；而且原因很难查明
33.形如如下格式
<div id="parent">
<div id="content"> </div>
</div>
当Content内容多时，即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展；解决办法在层的最下方产生一个高度为1的空格,代码如下
<div id="parent">
<div id="content"> </div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>
34.IE和FireFox对字体small的尺寸解释不同，FireFox为13px,IE中为16px
35.IE和FireFox对空格的尺寸解释不同，FireFox为4px,IE中为8px
1357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
