网页制作,IE7、IE6和火狐兼容性问题
1.网页制作,IE7、IE6和火狐兼容性问题
一、CSS HACK
以下两种方法几乎能解决现今所有HACK。
1、!important
随着IE7对!important的支持，!important 方法现在只针对IE6的HACK。
（注意写法.记得该声明位置需要提前）
程序代码<style>
#wrapper
{
width: 100px!important;
width: 80px;
}
</style>2、IE6/IE77对FireFox
*+html 与 *html 是IE特有的标签，firefox 暂不支持。
而*+html 又为 IE7特有标签。
程序代码<style>
#wrapper
{
#wrapper { width: 120px; }
*html #wrapper { width: 80px;}
*+html #wrapper { width: 60px;}
}
</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加上 即可，屡试不爽。
程序代码<style>
.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
.clearfix {display:block;}
</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。
8、至于IE5以及其他浏览器就没有必要兼顾了，在这上面花时间不值得。
下面这段可执行的码可以很形象的说明问题...当然前提是你有IE6 IE7和火狐浏览器...
不过我还是没有研究透...需要注意的是...在<body>标签里加了 lang="zh" 的定义...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>通过CSS Hack 区分 FX/IE7/IE6/IE5.5/IE5</title>
<style type="text/css">
<!--
#fx {
display: none;
border: 3px double #999;
width:300px;
height:200px;
padding:10px;
}
#ie6{
display:none !important;
display:none;
font-size:54px;
border:10px solid #CCC;
padding:100px;
}
#ie6{
display:block;
display :none;
}
#ie7 {
display:block !important;
display:none;
background-color:#69f;
border:1px dashed #63c;
padding:50px;
width:200px;
height:150px;
}
*:lang(zh) #ie7{
display:none !important;
}
*:lang(zh) #fx{
display:block !important;
}
-->
#example{color:red ;}
* html #example{color:blue;}
*+html #example{color:green;}
</style>
</head>
<body lang="zh">
<div id="fx">这是在 FireFox 或者 Opera 下面的效果</div>
<div id="ie6">这是在 IE 6 下面的效果</div>
<div id="ie7">这是在 IE 7 下面的效果</div>
<div>以下为简单区分FF/IE6/IE7示例</div>
<div id="example">这行文字在FF下应为红色，在IE6下应为蓝色，在IE7下应为绿色。</div>
</body>
</html>
2.div+css实现类似圆角表格效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div+css实现类似圆角表格效果</title>
<style type="text/css">
.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}
.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-right:1px solid #999;}
.b1,.b1b{margin:0 5px;background:#999;}
.b2,.b2b{margin:0 3px;border-width:2px;}
.b3,.b3b{margin:0 2px;}
.b4,.b4b{height:2px;margin:0 1px;}
.d1{background:#F7F8F9;}
</style>
</head>
<body>
<div>
<b );
}
第一个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]{}
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属性。
本文来自: 脚本之家(www.jb51.net) 详细出处参考：http://www.jb51.net/article/11297.htm
