关于IE和Firefox中javascript和css的一些区别
2011-10-14 14:03
633 查看
1、浏览器事件的捕捉
在IE下有一个全局的window.event，当事件触发后可以直接使用，但是在fireFox下没有这个东西，当调用触发事件调用一个函数时，如果这个函数没有形参，那么firefox会默认的把event（事件）传进去，但是有参数时就不行啦，所以解决的办法是，自己手动传一个event进去，这样就ok了，具体代码如下：
下面两个函数，都是响应鼠标onclick时触发的动作，第一个在ie下使用正常，但是在firefox下却有问题，改成第二个那样使用，就没有问题了，注意调用方法的区别
view plaincopy to clipboardprint?
<html>
<head>
<title>test</title>
<script language="javascript">
function testevent()
{
window.alert(window.event.target.id);
return;
}
</script>
</head>
</body>
<a href="#" onclick="testevent()" id="alink">testevent</a>
</body>
</html>
<html>
<head>
<title>test</title>
<script language="javascript">
function testevent()
{
window.alert(window.event.target.id);
return;
}
</script>
</head>
</body>
<a href="#" onclick="testevent()" id="alink">testevent</a>
</body>
</html>
view plaincopy to clipboardprint?
<html>
<head>
<title>test1</title>
<script language="javascript">
function testevent(evt)
{
window.alert(evt.target.id);
return;
}
</script>
</head>
</body>
<a href="#" onclick="testevent(event)" id="alink">testevent</a>
</body>
</html>
<html>
<head>
<title>test1</title>
<script language="javascript">
function testevent(evt)
{
window.alert(evt.target.id);
return;
}
</script>
</head>
</body>
<a href="#" onclick="testevent(event)" id="alink">testevent</a>
</body>
</html>
其实event对象在ie以及firefox还有很多不同的特性，比如clienx，pagex等，但是由于在现在流行使用的js框架 prototype中解决了很多这些问题，所以如果是在基于prototype下的开发，这些问题可以考虑得少一些了，只是上面提到的这个捕获问题， prototype中并没有完善的解决，所以单独列出来，下面提及的关于js的也都只列出prototype中未解决的
放弃 document.all的写法。要用 document.getElementById 代替
对于Event事件,IE和Mozilla是有区别的。这里有个例子
<div onclick="handleEvent(event)">单击这里</div>
<script>
function handleEvent(aEvent){
//假如 aEvent 是空值，那么说明是IE所以 Event 值用 window.event
var myEvent = aEvent ? aEvent : window.event;
}
</script>
还是关于 event。IE用 window.event.srcElement 来取得对象
Mozilla用 event.target 来取得对象
2、关于透明度的设置
为了达到给层设置半透明的效果时，在IE和firefox下也有所不同，IE下，style的filter属性有Alpha值可供使用，而firefox下没有Alpha值，所以得指定style的MozOpacity，代码见下：
<STYLE>
filter: Alpha(opacity=10); /*IE*/
-moz-opacity:.1; /*老版本FireFox 1.0 以前*/
opacity:0.1; /*新版本FireFox*/
</STYLE>
view plaincopy to clipboardprint?
<script language="javascript">
//设置一个id为screen的div的透明度为45%，在IE下：
document.getElementById('screen').style.filter='Alpha(Opacity=45)';
//而在firefox下：
document.getElementById('screen').style.MozOpacity='0.45';
</script>
<script language="javascript">
//设置一个id为screen的div的透明度为45%，在IE下：
document.getElementById('screen').style.filter='Alpha(Opacity=45)';
//而在firefox下：
document.getElementById('screen').style.MozOpacity='0.45';
</script>
3、定位层时的有趣问题
在定位层时，我们的做法是给层的style.left 和 style.top设置位置，但是今天发现了一个很有趣的问题，代码如下：
view plaincopy to clipboardprint?
<script language="javascript">
//给一个id为dialog的层定位
document.getElementById('dialog').left = 100;
document.getElementById('dialog').left = 100;
//问题出现了，在ie下，默认将层的左上角定位在（100px,100px）这个点上
//但是在firefox下却死活都不行，后来发现，原来ie在你没有指定单位的时候
//替你加上了单位“px”，而firefox比较“笨”
//他觉得你没有指定单位，就不给你定位，好了，那么标准的写法应该是这样：
document.getElementById('dialog').left = 100px;
document.getElementById('dialog').left = 100px;
//这样firefox也认了
</script>
<script language="javascript">
//给一个id为dialog的层定位
document.getElementById('dialog').left = 100;
document.getElementById('dialog').left = 100;
//问题出现了，在ie下，默认将层的左上角定位在（100px,100px）这个点上
//但是在firefox下却死活都不行，后来发现，原来ie在你没有指定单位的时候
//替你加上了单位“px”，而firefox比较“笨”
//他觉得你没有指定单位，就不给你定位，好了，那么标准的写法应该是这样：
document.getElementById('dialog').left = 100px;
document.getElementById('dialog').left = 100px;
//这样firefox也认了
</script>
4、PNG透明背景的问题
PNG图片在网站设计中是不可或缺的部分，最大的特点应该在于PNG可以无损压缩，而且还可以设置透明，对于增强网站的图片色彩效果有重要的作用。
但为什么PNG图片却没有GIF和JPG图片的使用来得广泛呢，这个祸因应归属于微软的IE浏览器（Firefox和Opera对PNG支持的比较好，而现在浏览器的主流IE6却无法很好的支持）。不过微软在最近也开始改过自新了，新出的的IE7可以很好的支持PNG，可以想象在未来的网络世界， PNG图片的重要性将会更加凸显。
但在大家还在绝大多数的使用IE6的时候，我们又怎样在IE6的世界去完美使用PNG图片呢（PNG图片的时候最重要的地方在于PNG透明背景图片的运用）。我们应该庆幸我们是幸福的！IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路，如果他载入的是PNG (Portable Network Graphics)格式，则0%-100%的透明度也被提供。但IE5.0无法支持属性，那只有完全绝望了，不过绝望的只是几个，得到是绝大数，我们应该知足，知足才会常乐。
现在我们将通过Hack和AlphaImageLoader滤镜来实现IE6下的PNG透明背景图片。
先熟悉下滤镜的语法：
view plaincopy to clipboardprint?
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src="/blog/sURL" )
属性：
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src="/blog/sURL" )
属性：
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器（>），而IE不识别（包括IE7），所有我们可以通过这来定义Firefox、Opera等浏览器中PNG图片的样式。如下
view plaincopy to clipboardprint?
<script language="javascript>
//给一个id为infoBox的层设置一个透明背景，背景图片是down.png，代码如下
//进行了浏览器判断
if (navigator.appName!="Microsoft Internet Explorer")
{
$('infoBox').style.background="0 url(/blog/down.png') no-repeat";
}
else
{
$('infoBox').style.background="0 none no-repeat";
$('infoBox').style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src="/blog/down.png'")";
}
</script>
<script language="javascript>
//给一个id为infoBox的层设置一个透明背景，背景图片是down.png，代码如下
//进行了浏览器判断
if (navigator.appName!="Microsoft Internet Explorer")
{
$('infoBox').style.background="0 url(/blog/down.png') no-repeat";
}
else
{
$('infoBox').style.background="0 none no-repeat";
$('infoBox').style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src="/blog/down.png'")";
}
</script>
不过需要注意的一个地方：
使用AlphaImageLoader 后该区域的超链接和按钮会失效，解决的方法：
对链接或按钮直接设置相对位置，让它们浮动于滤镜区域的上面。
这里有4条经验：
1、在定义 页面元素的时候，如果该页面元素不需要被脚本调用，那么它就不需要定义其name和id属性；
2、如果需要定义页面元素的name,id属性，那么避免不同元素的name和id相同；
3、如果没有特殊需要，尽量让name和id相同，这主要是为了通用
4、在脚本中，获得元素时，尽量用document.getElementById("name / id") ，能不使用尽量不使用其他的
下面是收集的一些IE和Firefox的差异：
1. 对象问题
1.1 Form对象
现有问题：
现有代码这获得form对象通过document.forms("formName")，这样使用在IE 能接受，MF 不能。
解决方法：
改用 作为下标运算。改为document.forms["formName"]
备注
上述的改用 作为下标运算中的formName是id而name
1.2 HTML对象
现有问题：
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
document.all("itemName")或者document.all("itemId")
解决方法：
使用对象ID作为对象变量名
document.getElementById("itemId")
备注
document.all是IE自定义的方法，所以请大家尽量不使用。
还有一种方式，在IE和MF都可以使用
var f = document.forms["formName "];
var o = f. itemId;
1.3 DIV对象
现有问题：
在 IE 中，DIV对象可以使用ID作为对象变量名直接使用。在 MF 中不能。
DivId.style.display = "none"
解决方法：
document.getElementById("DivId").style.display = "none"
备注
获得对象的方法不管是不是DIV对象，都使用getElementById方法。参见1.2
1.4 关于frame
现有问题
在 IE中 可以用window.testFrame取得该frame，mf中不行
解决方法
在frame的使用方面MF和IE的最主要的区别是：
如果在frame标签中书写了以下属性：
那么IE可以通过id或者name访问这个frame对应的window对象
而mf只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
IE： window.top.frameId或者window.top.frameName来访问这个window对象
MF：只能这样window.top.frameName来访问这个window对象
另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容
也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容
1.5 窗口
现有问题
IE中可以通过showModalDialog和showModelessDialog打开模态和非模态窗口，但是MF不支持。
解决办法
直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要传递参数，可以使用frame或者iframe。
2. 总结
2.1 在JS中定义各种对象变量名时，尽量使用id，避免使用name。
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能，所以在平常使用时请尽量使用id，避免只使用name，而不使用id。
2.2 变量名与某 HTML 对象 id 相同的问题
现有问题
在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
解决方法
在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。
1. document.form.item 问题
(1)现有问题：
现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 MF 下运行
(2)解决方法：
改用 document.formName.elements["elementName"]
(3)其它
参见 2
2. 集合类对象问题
(1)现有问题：
现有代码中许多集合类对象取用时使用 ()，IE 能接受，MF 不能。
(2)解决方法：
改用 [] 作为下标运算。如：document.forms("formName") 改为 document.forms["formName"]。
又如：document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]
3. window.event
(1)现有问题：
使用 window.event 无法在 MF 上运行
(2)解决方法：
MF 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：
原代码(可在IE中运行)：
<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/>
...
<script language="javascript">
function gotoSubmit() {
...
alert(window.event); // use window.event
...
}
</script>
新代码(可在IE和MF中运行)：
<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/>
...
<script language="javascript">
function gotoSubmit(evt) {
evt = evt ? evt : (window.event ? window.event : null);
...
alert(evt); // use evt
...
}
</script>
此外，如果新代码中第一行不改，与老代码一样的话(即 gotoSubmit 调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。
4. HTML 对象的 id 作为对象名的问题
(1)现有问题
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
(2)解决方法
用 getElementById("idName") 代替 idName 作为对象变量使用。
5. 用idName字符串取得对象的问题
(1)现有问题
在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在MF 中不能。
(2)解决方法
用 getElementById(idName) 代替 eval(idName)。
6. 变量名与某 HTML 对象 id 相同的问题
(1)现有问题
在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
(2)解决方法
在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。
(3)其它
参见 问题4
7. event.x 与 event.y 问题
(1)现有问题
在IE 中，event 对象有 x, y 属性，MF中没有。
(2)解决方法
在MF中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。
故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。
如果要完全一样，可以稍麻烦些：
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x
(3)其它
event.layerX 在 IE 与 MF 中都有，具体意义有无差别尚未试验。
8. 关于frame
(1)现有问题
在 IE中 可以用window.testFrame取得该frame，mf中不行
(2)解决方法
在frame的使用方面mf和ie的最主要的区别是：
如果在frame标签中书写了以下属性：
<frame src="xx.htm" id="frameId" name="frameName" />
那么ie可以通过id或者name访问这个frame对应的window对象
而mf只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
ie： window.top.frameId或者window.top.frameName来访问这个window对象
mf： 只能这样window.top.frameName来访问这个window对象
另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = ‘xx.htm’来切换frame的内容
也都可以通过window.top.frameName.location = ‘xx.htm’来切换frame的内容
关于frame和window的描述可以参见bbs的‘window与frame’文章
以及/test/js/test_frame/目录下面的测试
----adun 2004.12.09修改
9. 在mf中，自己定义的属性必须getAttribute()取得
10.在mf中没有 parentElement parement.children 而用parentNode parentNode.childNodes
childNodes的下标的含义在IE和MF中不同，MF使用DOM规范，childNodes中会插入空白文本节点。
一般可以通过node.getElementsByTagName()来回避这个问题。
当html中节点缺失时，IE和MF对parentNode的解释不同，例如
<form>
<table>
<input/>
</table>
</form>
MF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点
MF中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)
11.const 问题
(1)现有问题:
在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
(2)解决方法:
不使用 const ，以 var 代替。
12. body 对象
MF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在
13. url encoding
在js中如果书写url就直接写&不要写&例如var url = ‘xx.jsp?objectName=xx&objectEvent=xxx’;
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
一般会服务器报错参数没有找到
当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&
一般MF无法识别js中的&
14. nodeName 和 tagName 问题
(1)现有问题：
在MF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象
有问题（具体情况没有测试，但我的IE已经死了好几次）。
(2)解决方法：
使用 tagName，但应检测其是否为空。
15. 元素属性
IE下 input.type属性为只读，但是MF下可以修改
16.比如td.setAttribute("colspan","3");在mf中好用,在ie里不好用
必须是td.setAttribute("colSpan","3");这样ie和mf里都好用
----------------------------------------CSS的问题-------------------------------------------------
一、CSS HACK
以下两种方法几乎能解决现今所有HACK.
1, !important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
2, IE6/IE77对FireFox
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
}
</style>
注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
二、万能 float 闭合(非常重要!)
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入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>
三、其他兼容技巧(再次啰嗦)
1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.
1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，
但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针
对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。
2 css布局中的居中问题
主要的样式定义如下：
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，
只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
3 盒模型不同解释.
#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}
4 浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;
5 IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，
正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6 页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，
而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：
然后CSS这样设计：
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
7 清除浮动
.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，
所以并不影响到IE/WIN浏览器。这种的最麻烦的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}
8 DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}
HTML代码<div id="box"> <div id="left"></div> <div id="right"></div></div>
9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
10 IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
11 高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用
margin 或paddign 时。
例：
<div id="box">
<p>p对象中的内容</p>
</div>
CSS：#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属性。
补充一些:
1.DOCTYPE 影响 CSS 处理
2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式，值得注意的是，一定要将xxxx !important 这句放置在另一句之上
6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
10.IE5 和IE6的BOX解释不一致
IE5下div{width:300px;margin:0 10px 0 10px;}
div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px! important;width /**/:340px;margin:0 10px 0 10px}
关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）
11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}
就能解决大部分问题
注意事项：
1、float的div一定要闭合。
例如：(其中floatA、floatB的属性已经设置为float:left;)<#div id=\"floatA\" >
<#div id=\"floatB\" >
<#div id=\"NOTfloatC\" >
这里的NOTfloatC并不希望继续平移，而是希望往下排。
这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。
在<#div class=\"floatB\">
<#div class=\"NOTfloatC\">
之间加上<#div class=\"clear\">
这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。
并且将clear这种样式定义为为如下即可：.clear{
clear:both;}
此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;
当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
例如某一个wrapper如下定义：.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
2、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*/}
3、关于容器的包涵关系
很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。
4、关于高度的问题
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）
5、最狠的手段 - !important;
如果实在没有办法解决一些细节问题,可以用这个方法.FF对于"!important"会自动优先解析,然而IE则会忽略.如下.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过.
在IE下有一个全局的window.event，当事件触发后可以直接使用，但是在fireFox下没有这个东西，当调用触发事件调用一个函数时，如果这个函数没有形参，那么firefox会默认的把event（事件）传进去，但是有参数时就不行啦，所以解决的办法是，自己手动传一个event进去，这样就ok了，具体代码如下：
下面两个函数，都是响应鼠标onclick时触发的动作，第一个在ie下使用正常，但是在firefox下却有问题，改成第二个那样使用，就没有问题了，注意调用方法的区别
view plaincopy to clipboardprint?
<html>
<head>
<title>test</title>
<script language="javascript">
function testevent()
{
window.alert(window.event.target.id);
return;
}
</script>
</head>
</body>
<a href="#" onclick="testevent()" id="alink">testevent</a>
</body>
</html>
<html>
<head>
<title>test</title>
<script language="javascript">
function testevent()
{
window.alert(window.event.target.id);
return;
}
</script>
</head>
</body>
<a href="#" onclick="testevent()" id="alink">testevent</a>
</body>
</html>
view plaincopy to clipboardprint?
<html>
<head>
<title>test1</title>
<script language="javascript">
function testevent(evt)
{
window.alert(evt.target.id);
return;
}
</script>
</head>
</body>
<a href="#" onclick="testevent(event)" id="alink">testevent</a>
</body>
</html>
<html>
<head>
<title>test1</title>
<script language="javascript">
function testevent(evt)
{
window.alert(evt.target.id);
return;
}
</script>
</head>
</body>
<a href="#" onclick="testevent(event)" id="alink">testevent</a>
</body>
</html>
其实event对象在ie以及firefox还有很多不同的特性，比如clienx，pagex等，但是由于在现在流行使用的js框架 prototype中解决了很多这些问题，所以如果是在基于prototype下的开发，这些问题可以考虑得少一些了，只是上面提到的这个捕获问题， prototype中并没有完善的解决，所以单独列出来，下面提及的关于js的也都只列出prototype中未解决的
放弃 document.all的写法。要用 document.getElementById 代替
对于Event事件,IE和Mozilla是有区别的。这里有个例子
<div onclick="handleEvent(event)">单击这里</div>
<script>
function handleEvent(aEvent){
//假如 aEvent 是空值，那么说明是IE所以 Event 值用 window.event
var myEvent = aEvent ? aEvent : window.event;
}
</script>
还是关于 event。IE用 window.event.srcElement 来取得对象
Mozilla用 event.target 来取得对象
2、关于透明度的设置
为了达到给层设置半透明的效果时，在IE和firefox下也有所不同，IE下，style的filter属性有Alpha值可供使用，而firefox下没有Alpha值，所以得指定style的MozOpacity，代码见下：
<STYLE>
filter: Alpha(opacity=10); /*IE*/
-moz-opacity:.1; /*老版本FireFox 1.0 以前*/
opacity:0.1; /*新版本FireFox*/
</STYLE>
view plaincopy to clipboardprint?
<script language="javascript">
//设置一个id为screen的div的透明度为45%，在IE下：
document.getElementById('screen').style.filter='Alpha(Opacity=45)';
//而在firefox下：
document.getElementById('screen').style.MozOpacity='0.45';
</script>
<script language="javascript">
//设置一个id为screen的div的透明度为45%，在IE下：
document.getElementById('screen').style.filter='Alpha(Opacity=45)';
//而在firefox下：
document.getElementById('screen').style.MozOpacity='0.45';
</script>
3、定位层时的有趣问题
在定位层时，我们的做法是给层的style.left 和 style.top设置位置，但是今天发现了一个很有趣的问题，代码如下：
view plaincopy to clipboardprint?
<script language="javascript">
//给一个id为dialog的层定位
document.getElementById('dialog').left = 100;
document.getElementById('dialog').left = 100;
//问题出现了，在ie下，默认将层的左上角定位在（100px,100px）这个点上
//但是在firefox下却死活都不行，后来发现，原来ie在你没有指定单位的时候
//替你加上了单位“px”，而firefox比较“笨”
//他觉得你没有指定单位，就不给你定位，好了，那么标准的写法应该是这样：
document.getElementById('dialog').left = 100px;
document.getElementById('dialog').left = 100px;
//这样firefox也认了
</script>
<script language="javascript">
//给一个id为dialog的层定位
document.getElementById('dialog').left = 100;
document.getElementById('dialog').left = 100;
//问题出现了，在ie下，默认将层的左上角定位在（100px,100px）这个点上
//但是在firefox下却死活都不行，后来发现，原来ie在你没有指定单位的时候
//替你加上了单位“px”，而firefox比较“笨”
//他觉得你没有指定单位，就不给你定位，好了，那么标准的写法应该是这样：
document.getElementById('dialog').left = 100px;
document.getElementById('dialog').left = 100px;
//这样firefox也认了
</script>
4、PNG透明背景的问题
PNG图片在网站设计中是不可或缺的部分，最大的特点应该在于PNG可以无损压缩，而且还可以设置透明，对于增强网站的图片色彩效果有重要的作用。
但为什么PNG图片却没有GIF和JPG图片的使用来得广泛呢，这个祸因应归属于微软的IE浏览器（Firefox和Opera对PNG支持的比较好，而现在浏览器的主流IE6却无法很好的支持）。不过微软在最近也开始改过自新了，新出的的IE7可以很好的支持PNG，可以想象在未来的网络世界， PNG图片的重要性将会更加凸显。
但在大家还在绝大多数的使用IE6的时候，我们又怎样在IE6的世界去完美使用PNG图片呢（PNG图片的时候最重要的地方在于PNG透明背景图片的运用）。我们应该庆幸我们是幸福的！IE5.5+的AlphaImageLoader滤镜为通向png提供了一个道路，如果他载入的是PNG (Portable Network Graphics)格式，则0%-100%的透明度也被提供。但IE5.0无法支持属性，那只有完全绝望了，不过绝望的只是几个，得到是绝大数，我们应该知足，知足才会常乐。
现在我们将通过Hack和AlphaImageLoader滤镜来实现IE6下的PNG透明背景图片。
先熟悉下滤镜的语法：
view plaincopy to clipboardprint?
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src="/blog/sURL" )
属性：
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src="/blog/sURL" )
属性：
enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false
true : 默认值。滤镜激活。
false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
Firefox、Opera等完全支持PNG透明图片的浏览器也支持子选择器（>），而IE不识别（包括IE7），所有我们可以通过这来定义Firefox、Opera等浏览器中PNG图片的样式。如下
view plaincopy to clipboardprint?
<script language="javascript>
//给一个id为infoBox的层设置一个透明背景，背景图片是down.png，代码如下
//进行了浏览器判断
if (navigator.appName!="Microsoft Internet Explorer")
{
$('infoBox').style.background="0 url(/blog/down.png') no-repeat";
}
else
{
$('infoBox').style.background="0 none no-repeat";
$('infoBox').style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src="/blog/down.png'")";
}
</script>
<script language="javascript>
//给一个id为infoBox的层设置一个透明背景，背景图片是down.png，代码如下
//进行了浏览器判断
if (navigator.appName!="Microsoft Internet Explorer")
{
$('infoBox').style.background="0 url(/blog/down.png') no-repeat";
}
else
{
$('infoBox').style.background="0 none no-repeat";
$('infoBox').style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src="/blog/down.png'")";
}
</script>
不过需要注意的一个地方：
使用AlphaImageLoader 后该区域的超链接和按钮会失效，解决的方法：
对链接或按钮直接设置相对位置，让它们浮动于滤镜区域的上面。
这里有4条经验：
1、在定义 页面元素的时候，如果该页面元素不需要被脚本调用，那么它就不需要定义其name和id属性；
2、如果需要定义页面元素的name,id属性，那么避免不同元素的name和id相同；
3、如果没有特殊需要，尽量让name和id相同，这主要是为了通用
4、在脚本中，获得元素时，尽量用document.getElementById("name / id") ，能不使用尽量不使用其他的
下面是收集的一些IE和Firefox的差异：
1. 对象问题
1.1 Form对象
现有问题：
现有代码这获得form对象通过document.forms("formName")，这样使用在IE 能接受，MF 不能。
解决方法：
改用 作为下标运算。改为document.forms["formName"]
备注
上述的改用 作为下标运算中的formName是id而name
1.2 HTML对象
现有问题：
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
document.all("itemName")或者document.all("itemId")
解决方法：
使用对象ID作为对象变量名
document.getElementById("itemId")
备注
document.all是IE自定义的方法，所以请大家尽量不使用。
还有一种方式，在IE和MF都可以使用
var f = document.forms["formName "];
var o = f. itemId;
1.3 DIV对象
现有问题：
在 IE 中，DIV对象可以使用ID作为对象变量名直接使用。在 MF 中不能。
DivId.style.display = "none"
解决方法：
document.getElementById("DivId").style.display = "none"
备注
获得对象的方法不管是不是DIV对象，都使用getElementById方法。参见1.2
1.4 关于frame
现有问题
在 IE中 可以用window.testFrame取得该frame，mf中不行
解决方法
在frame的使用方面MF和IE的最主要的区别是：
如果在frame标签中书写了以下属性：
那么IE可以通过id或者name访问这个frame对应的window对象
而mf只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
IE： window.top.frameId或者window.top.frameName来访问这个window对象
MF：只能这样window.top.frameName来访问这个window对象
另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容
也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容
1.5 窗口
现有问题
IE中可以通过showModalDialog和showModelessDialog打开模态和非模态窗口，但是MF不支持。
解决办法
直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要传递参数，可以使用frame或者iframe。
2. 总结
2.1 在JS中定义各种对象变量名时，尽量使用id，避免使用name。
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能，所以在平常使用时请尽量使用id，避免只使用name，而不使用id。
2.2 变量名与某 HTML 对象 id 相同的问题
现有问题
在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
解决方法
在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。
1. document.form.item 问题
(1)现有问题：
现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 MF 下运行
(2)解决方法：
改用 document.formName.elements["elementName"]
(3)其它
参见 2
2. 集合类对象问题
(1)现有问题：
现有代码中许多集合类对象取用时使用 ()，IE 能接受，MF 不能。
(2)解决方法：
改用 [] 作为下标运算。如：document.forms("formName") 改为 document.forms["formName"]。
又如：document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]
3. window.event
(1)现有问题：
使用 window.event 无法在 MF 上运行
(2)解决方法：
MF 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：
原代码(可在IE中运行)：
<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/>
...
<script language="javascript">
function gotoSubmit() {
...
alert(window.event); // use window.event
...
}
</script>
新代码(可在IE和MF中运行)：
<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/>
...
<script language="javascript">
function gotoSubmit(evt) {
evt = evt ? evt : (window.event ? window.event : null);
...
alert(evt); // use evt
...
}
</script>
此外，如果新代码中第一行不改，与老代码一样的话(即 gotoSubmit 调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。
4. HTML 对象的 id 作为对象名的问题
(1)现有问题
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。
(2)解决方法
用 getElementById("idName") 代替 idName 作为对象变量使用。
5. 用idName字符串取得对象的问题
(1)现有问题
在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在MF 中不能。
(2)解决方法
用 getElementById(idName) 代替 eval(idName)。
6. 变量名与某 HTML 对象 id 相同的问题
(1)现有问题
在 MF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
(2)解决方法
在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。
(3)其它
参见 问题4
7. event.x 与 event.y 问题
(1)现有问题
在IE 中，event 对象有 x, y 属性，MF中没有。
(2)解决方法
在MF中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。
故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。
如果要完全一样，可以稍麻烦些：
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x
(3)其它
event.layerX 在 IE 与 MF 中都有，具体意义有无差别尚未试验。
8. 关于frame
(1)现有问题
在 IE中 可以用window.testFrame取得该frame，mf中不行
(2)解决方法
在frame的使用方面mf和ie的最主要的区别是：
如果在frame标签中书写了以下属性：
<frame src="xx.htm" id="frameId" name="frameName" />
那么ie可以通过id或者name访问这个frame对应的window对象
而mf只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
ie： window.top.frameId或者window.top.frameName来访问这个window对象
mf： 只能这样window.top.frameName来访问这个window对象
另外，在mf和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = ‘xx.htm’来切换frame的内容
也都可以通过window.top.frameName.location = ‘xx.htm’来切换frame的内容
关于frame和window的描述可以参见bbs的‘window与frame’文章
以及/test/js/test_frame/目录下面的测试
----adun 2004.12.09修改
9. 在mf中，自己定义的属性必须getAttribute()取得
10.在mf中没有 parentElement parement.children 而用parentNode parentNode.childNodes
childNodes的下标的含义在IE和MF中不同，MF使用DOM规范，childNodes中会插入空白文本节点。
一般可以通过node.getElementsByTagName()来回避这个问题。
当html中节点缺失时，IE和MF对parentNode的解释不同，例如
<form>
<table>
<input/>
</table>
</form>
MF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点
MF中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)
11.const 问题
(1)现有问题:
在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
(2)解决方法:
不使用 const ，以 var 代替。
12. body 对象
MF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在
13. url encoding
在js中如果书写url就直接写&不要写&例如var url = ‘xx.jsp?objectName=xx&objectEvent=xxx’;
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
一般会服务器报错参数没有找到
当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&
一般MF无法识别js中的&
14. nodeName 和 tagName 问题
(1)现有问题：
在MF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象
有问题（具体情况没有测试，但我的IE已经死了好几次）。
(2)解决方法：
使用 tagName，但应检测其是否为空。
15. 元素属性
IE下 input.type属性为只读，但是MF下可以修改
16.比如td.setAttribute("colspan","3");在mf中好用,在ie里不好用
必须是td.setAttribute("colSpan","3");这样ie和mf里都好用
----------------------------------------CSS的问题-------------------------------------------------
一、CSS HACK
以下两种方法几乎能解决现今所有HACK.
1, !important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
2, IE6/IE77对FireFox
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
}
</style>
注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
二、万能 float 闭合(非常重要!)
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入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>
三、其他兼容技巧(再次啰嗦)
1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.
1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，
但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针
对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。
2 css布局中的居中问题
主要的样式定义如下：
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，
只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
3 盒模型不同解释.
#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}
4 浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;
5 IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，
正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6 页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，
而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：
然后CSS这样设计：
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
7 清除浮动
.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，
所以并不影响到IE/WIN浏览器。这种的最麻烦的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}
8 DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}
HTML代码<div id="box"> <div id="left"></div> <div id="right"></div></div>
9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
10 IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
11 高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用
margin 或paddign 时。
例：
<div id="box">
<p>p对象中的内容</p>
</div>
CSS：#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属性。
补充一些:
1.DOCTYPE 影响 CSS 处理
2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式，值得注意的是，一定要将xxxx !important 这句放置在另一句之上
6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
7.cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
8.FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
10.IE5 和IE6的BOX解释不一致
IE5下div{width:300px;margin:0 10px 0 10px;}
div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px! important;width /**/:340px;margin:0 10px 0 10px}
关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）
11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}
就能解决大部分问题
注意事项：
1、float的div一定要闭合。
例如：(其中floatA、floatB的属性已经设置为float:left;)<#div id=\"floatA\" >
<#div id=\"floatB\" >
<#div id=\"NOTfloatC\" >
这里的NOTfloatC并不希望继续平移，而是希望往下排。
这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。
在<#div class=\"floatB\">
<#div class=\"NOTfloatC\">
之间加上<#div class=\"clear\">
这个div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。
并且将clear这种样式定义为为如下即可：.clear{
clear:both;}
此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;
当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
例如某一个wrapper如下定义：.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
2、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*/}
3、关于容器的包涵关系
很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。
4、关于高度的问题
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）
5、最狠的手段 - !important;
如果实在没有办法解决一些细节问题,可以用这个方法.FF对于"!important"会自动优先解析,然而IE则会忽略.如下.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 关于IE和Firefox中javascript和css的一些区别 (来自网络)
- 关于IE和Firefox中javascript和css的一些区别
- CSS、Javascript在IE和Firefox中的区别
- IE和Firefox中Javascript和CSS的区别
- Javascript与CSS在IE和Firefox中的误区及区别
- html-firefox与IE对javascript和CSS的区别(浏览器兼容)
- firefox与IE对javascript和CSS的区别
- 转 firefox与IE对javascript和CSS的区别
- firefox与IE对javascript和CSS的区别
- firefox与IE对javascript和CSS的区别
- Javascript与CSS在IE和Firefox中的误区及区别
- firefox与IE对javascript和CSS的区别
- firefox与IE对javascript和CSS的区别
- Javascript与CSS在IE和Firefox中的误区及区别
- Javascript与CSS在IE和Firefox中的误区及区别
- firefox与IE对javascript和CSS的区别(转)
- firefox与IE对javascript和CSS的区别
- firefox与IE对javascript和CSS的区别
- Javascript与CSS在IE和Firefox中的误区及区别
- Javascript与CSS在IE和Firefox中的误区及区别