浏览器兼容问题
一 、DIV+CSS解决FF（火狐）兼容问题
1、 Firefox 关于DIV高度无法自适应的两种解决
如果设置了一个DIV的高度，当DIV里实际内容大于所设高度，ie会自动拉伸以适应DIV容器大小，ff会固定DIV的高度，超过部分超出DIV底线以外，出现和下面的内容重叠的现象。如果不给DIV设置高度，在Firefox中将不会因为里面的内容而撑开，而IE中就会自动根据内容撑开
解决方案：
1）、在DIV内部的最后追加clear:both样式
```css
<div style="background-color:#FF0000;">
<div style="float:left; height:200px">Jmedia Design</div>
<div style="float:right; height:800px">www.jmedia.cn</div>
<div style="clear:both"></div>
</div>
2）、对DIV使用overflow:auto；
<div style="overflow:auto;">
<div style="float:left; background-color:#000000;height:200px"> 1111111111</div>
<div style="float:right;background-color:#000000; height:300px""> 2222222222</div>
</div>
2、 FF下面不能水平居中
FF下面设置容器的左右外补丁为auto就可以了
<style type="text/css">
<!-- div{ margin:0 auto; } -->
</style>
3 、 FF下文本无法撑开容器的高度
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:
{
height:auto!important;
height:200px;
min-height:200px;
}
4、 FireFox下如何使连续长字段自动换行
众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入的方法来解决
<style type="text/css">
div { width:300px;
word-wrap:break-word;
border:1px solid red;
</style>
<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
Js代码
<scrīpt type="text/javascrīpt">
/* <![CDATA[ */
function toBreakWord(el, intLen){
var ōbj=document.getElementById(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.getElementById && !document.all) toBreakWord("ff", 37);
/* ]]> */
</script>
二 、 DIV+CSS解决IE兼容问题
1、!important (功能有限)
随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)
例如:
#example {
width: 100px !important; /* IE7+FF */
width: 103px; /* IE6 */
}
2、CSS HACK的方法
首先需要知道的是：
所有浏览器 通用 height: 100px;
IE6 专用 _height: 100px;
IE7 专用 *+height: 100px;
IE6、IE7 共用 *height: 100px;
IE7、FF 共用 height: 100px !important;
例如：
#example { height:100px; } /* FF */
- html #example { height:200px; } /* IE6 */
+html #example { height:300px; } / IE7 */
下面的这种方法比较简单
举几个例子：
1）、IE6 - IE7+FF
#example {
height:100px; /* FF+IE7 */
_height:200px; /* IE6 */
}
其实这个用上面说的第一种方法也可以
#example {
height:100px !important; /* FF+IE7 */
height:200px; /* IE6 */
}
2）、IE6+IE7 - FF
#example {
height:100px; /* FF */
height:200px; / IE6+IE7 */
}
3）、IE6+FF - IE7
#example {
height:100px; /* IE6+FF */
+height:200px; / IE7 */
}
4）、IE6 IE7 FF 各不相同
#example {
height:100px; /* FF */
_height:200px; /* IE6 */
+height:300px; / IE7 */
}
或：
#example {
height:100px; /* FF */
height:300px; / IE7 */
_height:200px; /* IE6 */
}
需要注意的是，代码的顺序一定不能颠倒了，要不又前功尽弃了。因为浏览器在解释程序的时候，如果重名的话，会用后面的覆盖前面的，就象给变量赋值一个道理，所以我们把通用的放前面，越专用的越放后面
解释一下4的代码：
读代码的时候，第一行height:100px; 大家都通用，IE6 IE7 FF 都显示100px
到了第二行*height:300px; FF不认识这个属性，IE6 IE7都认，所以FF还显示100px，而IE6 IE7把第一行得到的height属性给覆盖了，都显示300px
到了第三行_height:200px;只有IE6认识，所以IE6就又覆盖了在第二行得到的height,最终显示200px
这样，三个浏览器都有自己的height属性了
*+html 对IE7的兼容 必须保证HTML顶部有如下声明：
3、使用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]-->
IE的if条件Hack
1）. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
2）. <!--[if IE]> 所有的IE可识别 <![endif]-->
3）. <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->
4）. <!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->
5）. <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->
6）. <!--[if IE 6]> 仅IE6可识别 <![endif]-->
7）. <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
8）. <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
9）. <!--[if IE 7]> 仅IE7可识别 <![endif]-->
10）. <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
11）. <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
注:gt = Great Then 大于
> = > 大于号
lt = Less Then 小于
< = < 小于号
gte = Great Then or Equal 大于或等于
lte = Less Then or Equal 小于或等于
4、css filter的办法
新建一个css样式如下：
#item {
width: 200px;
height: 200px;
background: red; }
新建一个div,并使用前面定义的css的样式：
在body表现这里加入lang属性,中文为zh：
<body lang="en">
现在对div元素再定义一个样式：
*:lang(en) #item{
background:green !important;
}
这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：
#item:empty {
background: green !important；
}
:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。
5 、IE 3px问题：
这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;
3px问题不是经常被人发现，因为它的影响只产生3px的位移。如果是精确到像素级的设计，3px的影响可谓不小。先来看下例子：
HTML：
<div id="left">左浮动div</div>
<div id="mydiv">段落</div>
CSS： 复制代码
#left{
float:left;
border:1px solid #333;
width:100px;
height:100px;
}
#mydiv{
border:1px solid #f66;
margin-left:130px;
}
#left是引发Bug的一个浮动div，同时设置了边框便于观察。
IE预览结果：
9.jpg
Firefox预览结果:
10.jpg
从理论上讲，我们还没有设置#mydiv的padding，它们理所当然是紧贴边框的。但在IE中，“段落”文字并未紧紧贴住#left。在实际中可能会因此导致内部元素宽度超出外部div固定宽度而引发布局问题。
解决问题：
是把#mydiv设置为display:inline-block。
修改后CSS：复制代码
#left{
float:left;
border:1px solid #333;
width:100px;
height:100px;
}
#mydiv{
border:1px solid #f66;
margin-left:130px;
+display:inline-block;
}
用hack方法为IE单独设置display:inline-block后。
IE各版本预览结果：
12.jpg
结果与Firefox一致。
6、IE6双倍边距问题：
在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。例如：
HTML：
CSS：
.myDiv{
width:100px;
height:100px;
border:1px solid #000;
float:left;
margin-left:30px;
}
Firefox预览结果：
2012011310012767.jpg
IE6预览结果：
2012011310015440.jpg
很明显的，在IE6中，margin-left:30px的边距翻倍成60px了。
解决问题：
设置display:inline：
.myDiv{
width:100px;
height:100px;
border:1px solid #000;
float:left;
display:inline;
margin-left:30px;
}
IE6预览结果：
1.jpg
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
7、IE6高度不固定问题：
典型BUG1：IE6下，即使给父元素设了固定高度，子元素还是会将其撑开。
典型BUG2：如果一个元素没有子元素，而这个元素设置的length又小于div默认高度，则这个元素在IE6里显示的高度仍然是div的默认高度。
引发以上2个BUG的原因在于length属性在IE6里被当作min-length（最小高度）解析了，（换句话说，你压根在IE6中就没设置过固定高度，因为你设置的是最小高度）
解决办法是再给父元素设置overflow:hidden;
8、IE6设置了最小高度并撑满父元素高度
默认情况下如果对IE6设置了最小高度200px，那么如果实际内容有250px，则只会显示250px的高度。也就是高度会跟随着内容显示。如果此时希望无论里面内容有多少，都让其填充满父元素高度，则要这么设置：
height:auto!important;
height:200px;
min-height:200px;
9、 IE6无法定义1px左右高度的容器
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:
overflow:hidden;
zoom:0.08;
line-height:1px ;
10、 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;}
页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个
然后CSS这样设计：
#container{
min-width: 600px;
width:e¬xpression(document.body.clientWidth < 600? “600px”: “auto” );
}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
11、IE6、IE7 的hasLayout问题
很多时候，CSS在IE下的解析十分奇怪，明明在Firefox中显示得非常正确，但到了IE下却出现了问题，有的时候，这些问题甚至表现得非常诡异。
例如一个比较经典的Bug就是设置border的时候，有时候border会断开，刷新页面或者拖下滚动条的时候，断掉的部分又会连接起来。
再比如在IE6&IE7中对元素设置浮动后，其后的元素并未占据这部分空间，造成了IE6&IE7中浮动元素未脱离文档流的假象。也就是说，实际上IE6&IE7浮动元素也脱离了文档流，只是由于其后元素的hasLayout被自动触发而导致的。这里说的hasLayout被触发，即指元素的hasLayout属性为true。
下列元素默认hasLayout=“true”：
, , ,| , |
|---|
, , , , ,
, , ,下列 CSS 属性和取值将会自动让一个元素的hasLayout=“true”：
position: absolute
绝对定位元素的包含区块(containing block)就会经常在这一方面出问题。
float: left|right
由于 layout 元素的特性，浮动模型会有很多怪异的表现。
display: inline-block
当一个内联级别的元素需要 layout 的时候往往就要用到它，这也可能也是这个 CSS 属性的唯一效果–让某个元素拥有 layout。"inline-block行为"在IE中是可以实现的，但是需要注意的是： IE/Win: inline-block and hasLayout 。
width: 除 “auto" 外的任意值
很多人遇到 layout 相关问题发生时，一般都会先尝试用这个来修复。
height: 除 “auto" 外的任意值
height: 1% 就在 Holly Hack 中用到。
zoom: 除 “normal" 外的任意值
IE专有属性。不过 zoom: 1 可以临时用做调试。
writing-mode: tb-rl
MS专有属性。
overflow: hidden|scroll|auto
在 IE7 中，overflow 也变成了一个 layout 触发器，这个属性在之前版本 IE 中没有触发 layout 的功能。
overflow-x|-y: hidden|scroll|auto
overflow-x 和 overflow-y 是 CSS3 盒模型中的属性，尚未得到浏览器的广泛支持。他们在之前版本IE中没有触发 layout 的功能。
另外 IE7 的荧幕上又新添了几个 haslayout 的演员，如果只从 hasLayout 这个方面考虑，min/max 和 width/height 的表现类似，position 的 fixed 和 absolute 也是一模一样。
position: fixed
min-width: 任意值
就算设为0也可以让该元素获得 layout。
max-width: 除 “none" 之外的任意值
min-height: 任意值。即使设为0也可以让该元素的 haslayout=true
max-height: 除 “none" 之外的任意值
如果BUG是由于hasLayout未触发所引起的，则可采用手动触发hasLayout来解决：办法是使用一个生僻的CSS属性zoom来触发，引用样式.zoom{zoom:1}。
如果BUG是hasLayout被自动触发而引起的，则要看触发是什么引起的，若这元素本身就会自动触发hasLayout，可以考虑换一个元素。若是对于这元素设置的某个CSS属性引起的，则可以考虑删除这属性，倘若这属性又是必要的，则就需要自己根据具体情况去编写CSS Hack，因为hasLayout是只读的，一旦hasLayout="true"后，便不可逆转。
IE6、IE7下浮动元素未脱离文档流假象的问题：
对元素设置浮动后，在IE6&IE7下预览，会产生元素未脱离文档流的假象的现象。其实元素脱离文档流了，这问题其实是其后的元素引起的。由于其后的元素因某些原因造成hasLayout被触发而导致的它未去占据浮动元素的空间（这问题说起来话长，你就这么理解好了：这个大概追朔到表格布局的年代，由于单元格都是有hasLayout的，而后面单元格里的元素肯定不会跑前面的单元格里去的）。关于hasLayout，在第11条里有详细说明，这里单独提出来作为一条来说明，仅因为这个浮动未脱离文档流假象的问题比较典型。
12、IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
13、 web标准中IE无法设置滚动条颜色了
解决办法是将body换成html
14、ie下 overflow问题
overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案：给overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。
15、ie6下严重的bug
float元素如没定义宽度，内部如有div定义了height或zoom:1，这个div就会占满一整行，即使你给了宽度。float元素如果作为布局用或复杂的容器，都要给个宽度的。
16 、ie6下的bug
绝对定位的div下包含相对定位的div，如果给内层相对定位的div高度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑大。解决方案给内层相对层float属性。
17、 iE6的问题
当层的高度小于20px时，IE6下要定义font-size：0px;否则高度为20px;
18、ie6吞吃现象
还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。
19、IE6下绝对定位的容器内文本无法正常选择
此问题在IE6、7中存在,解决问题的办法是让IE进入到qurks mode。
20、IE6下图片下方有空隙产生
解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block
或者设置vertical-align 属性为vertical-align:top bottom middle text-bottom都可以解决.
21．form在IE6里面底下会多出来一行
加上style=“padding:0; margin:0;”>
22、IE6下select元素显示问题
浏览器解析页面时，会先判断元素的类型，如果是窗口类型的，会优先于非窗口类型的元素，显示在页面最顶端，如果同属于非窗口类型的，才会去判断z-index的大小。select元素在IE6下是以窗口形式显示的，这是IE6的一个Bug。导致的情况是往往想要弹出一个层，结果select元素出现在层上方。例如：
HTML：
=请选择=
CSS：
div{
position:absolute;
background:#CCDCEE;
top:0px;
left:0px;
width:300px;
height:300px;
border:1px solid #000;
margin:5px;
}
IE6预览结果：
2012011311120417.jpg
解决问题：
我们可以用一个和弹出层同样大小的iframe放在层下面，select上面，用iframe遮住select。比如设置弹出层的样式z-index:2，iframe的样式z-index:1，使iframe位于层下方。
修改后HTML：
=请选择=
修改后CSS：复制代码
div{
position:absolute;
background:#CCDCEE;
top:0px;
left:0px;
width:300px;
height:300px;
border:1px solid #000;
margin:5px;
z-index:2;
}
iframe{
position:absolute;
top:0px;
left:0px;
width:300px;
height:300px;
margin:5px;
z-index:1;
}
我们让iframe位于div下方，大小以及与浏览器的距离调整成与div一致。
IE6预览结果：
2012011311245819.jpg
23、IE6对png的透明度支持问题
png格式因为其优秀的压缩算法和对透明度的完美支持，成为Web中最流行的图片格式之一。但它存在一个众所周知的头疼问题—IE6下对png的透明度支持并不好。本该是透明的地方，在IE6下会显示为浅蓝色。可以使用IE下私有的滤镜功能来解决问题，格式如下：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘png图片路径’,sizingMethod=‘crop’)。
24、IE6断头台问题
断头台问题是国外的CSS设计者给这个问题起的一个非常形象的名字，与之相反的，被切断的不是对象的头部，而是对象的底部。先来看下例子：
HTML:
W3School提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。当使用本站时，代表您已接受了本站的使用条款和隐私条款。版权所有，保留一切权利。未经书面许可，不得转载。W3School 简体中文版的所有内容仅供测试，对任何法律问题及风险不承担任何责任
链接2
链接3
链接4
XHTML代码有三部分组成，一个是主对象#layout，主框架中有#left为左浮动对象，右侧为普通的4个链接，类似于左右分栏的布局。
CSS：
#layout{
border:5px solid #35BB0C;
width:400px;
background-color:#F2F2F2;
}
#left{
border:5px solid #D4CA25;
width:200px;
float:left;
background-color:#fff;
}
a:hover{
background-color:#fff;
}复制代码
在CSS代码部分，主要设置了链接的背景色，#left的左浮动，以便于我们观察的粗边框效果。先通过浏览器看看问题是如何发生的，见下图：
IE6预览效果：
4.jpg
5.jpg
这里列出了IE6网页效果的2个状态，当网页被打开时，页面正常显示，与CSS编码指定样式一致。当鼠标右侧的“链接4”时，问题出现了，主对象#layout下面被切掉了，而剩下的高度正好是4个链接的高度。而当鼠标移到“链接1”或“链接2”时，#layout对象的高度又恢复正常。这便是IE6断头台问题。
这个问题的主要原因在于链接上，去除链接的a:hover{background-color:#fff}样式后，一切正常。经测试发现，不仅仅是background-color的变化，如果改变hover状态下链接的其他属性，也会引发同样的问题。例如设置padding、border、加粗、斜体等，都会引发断头台问题。
值得注意的是，在#layout中，#left是个浮动对象，而右测是若干链接对象。对于未指定高度的对象而言，IE6会根据其中的内容（不管浮动与否）来计算高度的大小，而当例子中的链接对象是个非浮动对象，并具有hover改变border,background及padding属性时，IE6会认为这些属性同时会改变#layout的高度，因此它重新计算对象高度。而令人失望的是，IE6的这种自以为是的行为并没有达到预期目的，它会把非浮动对象的总高度作为高度给了#layout，从而切断了#left的内容。基于这类问题的产生原因，解决方案可以有多种。
解决问题：
根据问题产生的原因，我们可以做出多套解决方案。我们知道因为非浮动对象与浮动对象都在#layout中，所以我们可以从浮动方式入手，把非浮动对象改为浮动对象，这样便可以解决问题。例如对XHTML修改如下：
W3School提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。当使用本站时，代表您已接受了本站的使用条款和隐私条款。版权所有，保留一切权利。未经书面许可，不得转载。W3School 简体中文版的所有内容仅供测试，对任何法律问题及风险不承担任何责任
对链接加上个div，并设置浮动#right{float:left}。这样使得两个对象都成为浮动对象，不会引发问题。
也可以在#layout底部增加一个div来强制IE浏览器重新计算高度
，这个清除浮动内容的div会帮助浏览器重新找到合适的高度，从而解决断头台问题。三 、 DIV+CSS解决IE6，IE7，IE8，FF兼容问题
1、 IE6 IE7 IE8 FF浏览器的CSS兼容问题
IE6、IE7、IE8、FF浏览器的CSS兼容问题，本来IE6跟ff之间的兼容是很容易解决的。加上个IE7会麻烦点，IE8的出现就更头疼了，原来hackIE7的方法又不能用了，怎么办呢？
还好，微软提供了这样一个代码：
.<meta http-equivmetahttp-equiv="x-ua-compatible"content=“IE=7”/>
把这段代码放到里面，在IE8里面的页面解析起来就跟IE7一模一样的了，所以，基本上可以无视IE8，剩下的代码只需要这样写就可以了
- background:#ffc;/对firefox有效/
- *background:#ccc;/对IE7有效/
- background:#000;/只对IE6有效/
解释一下吧：
◆firefox能解析第一段，后面的两个因为前面加了特殊符号“*”和“”,firefox认不了，所以只认background:#ffc，看到的是黄色；
◆IE7前两短都能认，以最后的为准，所以最后解析是background:#ccc，看到的是灰色；
◆IE6三段都能认，而且“_”这个只有IE6能认，所以最后解析是_background:#000，看到的是黑色
已经是最简单和最好理解的写法了，如果你是google进来的，我可以很负责任的告诉你，这种方法是ok的，我测试过。
◆IE8的那段兼容7的代码我也测试过了，在我现在的windos7测试版所带的IE8是没问题的，以后IE8正式版出来还管不管用就不知道了。
ps：如果你发现按我这样写还是有问题的话，请查看一下你的html头，看看之前的内容是不是这样的标准写法
<htmlxmlnshtmlxmlns=“http://www.w3.org/1999/xhtml”>
这个是现在比较规范的写法，如果你是用dreamweaver做页面的话，默认也是这种规范的，切记，非这种规范写法的，兼容性不能保证。
解决IE6、IE7、Firefox兼容最简单的CSS Hack
很早就在这里看到过解决方案，最后发现这个方案还是很可靠的。当然，唯一的缺点就是每一个属性都要去Hack，但我在很多实践中，只用‘修正’1-2个属性就可以了。
具体写法很容易：
#someNode
{
position:fixed;
#position:fixed;
_position:fixed;
}
第一排给Firefox以及其他浏览器看
第二排给IE7（可能以后的IE8、IE9也是如此，谁知道呢）看
第三排给IE6以及更老的版本看
最好的应用就是可以让IE6也“支持”position:fixed，而且，配合这个原理，可以做到不引入JavaScript代码（仅用IE6的expression），我这里有一个现成的页面，CSS如下写：
#ff-r
{
position:fixed;
_position:absolute;
right:15px;
top:15px;
_top:expression(eval(document.compatMode&&
document.compatMode==‘CSS1Compat’)?
documentElement.scrollTop+15:
document.body.scrollTop+
(document.body.clientHeight-this.clientHeight));
}
Css代码
Html代码
- FF下蓝边
- IE6下红边
- IE7下绿边
- IE8下黄边
解决IE7、IE8样式不兼容问题
如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：
CODE:
HTML：
p对象中的内容
CSS：
#box {
background-color:#eee;
}
#box p{
margin-top:20px;
margin-bottom:20px;
text-align:center;
}
看看代码做了什么，除了背景之外，#box仅是一个没有任何样式的div，而p加了2个关键属性margin-top:20px，margin-bottom:20px;，即上下外边距都是20px，p对象的高度应当是20+20+文字高度，即应当在40px以上。理论上#box这个div的高度会被挤开，至少达到40px以上。我们看看预览效果。
浏览器预览结果：
1.jpg
似乎并非预想的结果，看上去带背景的#box还是和文字一样高，并没有超过40px，这是为什么呢？为了验证一些事情，我们在html前后加上一个带背景的div。
修改后的HTML：
p对象中的内容
修改后的CSS：复制代码
#box{
background-color:#eee;
}
#box p{
margin-top:20px;
margin-bottom:20px;
text-align:center;
}
.box2{
background-color:#aaa;
}复制代码
再来看下预览结果：
浏览器预览结果：
2.jpg
可以看到上下两个div并没有紧贴#box对象，而是有一定的间距。测量下会发现，这个间距刚好是p对象的margin上下各20px。这个测验证明了一个问题，就是#box对象并没有因其中的p对象的margin变化而改变自身的高度。而p对象的margin高度的确在整个页面中占据了一定的空间。相当于#box不动，而p把自己撑到了#box外面去了。
无论是IE还是Firefox，测试中都会发现这个问题。
解决问题：
经过一些测试，我们发现对#box定义padding或者border，就会迫使#box重新计算自己的高度，从而使自身能够适应内容的高度变化。但如果强制给对象设置了边距又会带来位移。我们需要找到一个新方法，不再从对象本身的属性入手，而是在对象的内部进行修复。我们可以在对象上下增加2个高度为0的空div，并强制内容不显示。
修改后的HTML：复制代码
p对象中的内容
这2个div只充当了占位符的角色，而不发生实际的占位。而对它的外层对象而言，由于其中多了一些逻辑占位对象使得它会重新计算高度，从而实现高度的自适应。
预览效果：
3.jpg
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用 margin 或paddign 时。例：
p对象中的内容
解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
1）.区别IE和非IE浏览器
#tip {
background:blue; /非IE 背景藍色/
background:red \9; /IE6、IE7、IE8背景紅色/
}
2） .区别IE6,IE7,IE8,FF
【区别符号】：「\9」、「*」、「」
【示例】：
#tip {
background:blue; /Firefox 背景变蓝色/
background:red \9; /IE8 背景变红色/
background:black; /IE7 背景变黑色/
_background:orange; /IE6 背景变橘色/
}
【说明】：因为IE系列浏览器可读「\9」，而IE6和IE7可读「」(米字号)，另外IE6可辨识「」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。
3）.区别IE6、IE7、Firefox (方法 1)
【区别符号】：「」、「」
【示例】：
#tip {
background:blue; /Firefox背景变蓝色/
background:black; /IE7 背景变黑色/
_background:orange; /IE6 背景变橘色/
}
【说明】：IE7和IE6可读「」(米字号)，IE6又可以读「」(底线)，但是IE7却无法读取「_」，至于Firefox(非IE浏览器)则完全无法辨识「」和「_」，因此就可以透过这样的差异性来区分IE6、IE7、Firefox
4）.区别IE6、IE7、Firefox (方法 2)
【区别符号】：「」、「!important」
【示例】：
#tip {
background:blue; /Firefox 背景变蓝色/
background:green !important; /IE7 背景变绿色/
background:orange; /IE6 背景变橘色/
}
【说明】：IE7可以辨识「」和「!important」，但是IE6只可以辨识「」，却无法辨识「!important」，至于Firefox可以读取「!important」但不能辨识「」因此可以透过这样的差异来有效区隔IE6、IE7、Firefox。
5）.区别IE7、Firefox
【区别符号】：「」、「!important」
【示例】：
#tip {
background:blue; /Firefox 背景变蓝色/
background:green !important; /IE7 背景变绿色/
}
【说明】：因为Firefox可以辨识「!important」但却无法辨识「」，而IE7则可以同时看懂「」、「!important」，因此可以两个辨识符号来区隔IE7和Firefox。
6）.区别IE6、IE7 (方法 1)
【区别符号】：「*」、「」
【示例】：
#tip {
background:black; /IE7 背景变黑色/
_background:orange; /IE6 背景变橘色/
}
【说明】：IE7和IE6都可以辨识「」(米字号)，但IE6可以辨识「」(底线)，IE7却无法辨识，透过IE7无法读取「_」的特性就能轻鬆区隔IE6和IE7之间的差异。
7）.区别IE6、IE7 (方法 2)
【区别符号】：「!important」
【示例】：
#tip {
background:black !important; /IE7 背景变黑色/
background:orange; /IE6 背景变橘色/
}
【说明】：因为IE7可读取「!important;」但IE6却不行，而CSS的读取步骤是从上到下，因此IE6读取时因无法辨识「!important」而直接跳到下一行读取CSS，所以背景色会呈现橘色。
8）.区别IE6、Firefox
【区别符号】：「_」
【示例】：
#tip {
background:black; /Firefox 背景变黑色/
background:orange; /IE6 背景变橘色/
}
【说明】：因为IE6可以辨识「」(底线)，但是Firefox却不行，因此可以透过这样的差异来区隔Firefox和IE6，有效达成CSS hack。
5、 IE6下容器的宽度和FF解释不同呢
<?xml version="1.0" encoding="gb2312"?><style type="text/css">
<!--
div{
cursor:pointer;
width:200px;
height:200px;
border:10px solid red
}
-->
问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode。
6 、ul的不同表现
ul列表也是在IE与Firefox中容易发生问题的对象，主要源自浏览器对ul对象的默认值设置。在IE与Firefox中，一部分对象有默认的属性（比如h1~h6），他们本身就带有大字号、加粗样式以及一些边距效果。ul也是如此，默认情况下ul是有边距的。例如：
HTML：复制代码
- 菜单一
- 菜单二
- 菜单三
CSS：
#layout{border:1px solid #333;}
ul{list-style:none;}
代码非常简单，仅去除了ul的列表圆点。看下在IE和Firefox的预览效果:
IE预览结果：
3.jpg
Firefox预览结果:
4.jpg
显示都很正常，关键在于我们对ul接下来的设置：
修改后的CSS：
#layout{border:1px solid #333;}
ul{
list-style:none;
margin-left:0px;
}
设置ul左外边距为0后。
IE预览结果：
5.jpg
Firefox预览结果:
6.jpg
预览后发现问题出现了。IE中的ul已与div靠齐，而Firefox中的ul却丝毫不动。这是为什么？不妨把样式修改下再看看。
修改后的CSS：
#layout{border:1px solid #333;}
ul{
list-style:none;
padding-left:0px;
}
这次我们把margin-left换成padding-left。再来看看预览结果。
IE预览结果：
7.jpg
Firefox预览结果:
8.jpg
可见效果正好相反，Firefox中实现了靠齐，而IE中丝毫未动。
通过以上例子我们发现：在IE中，ul的默认边距是margin，在Firefox中，ul的默认边距是padding。我们单独定义margin或padding时，自然不能在两个浏览器达到一致效果。这就是ul在不同浏览器下表现不同的问题所在。
解决问题：
可以用hack方法分别针对IE和Firefox单独写样式，但更好的做法是样式开头先统一ul边距，ul{padding:0px;margin:0px;}。
7、IE8和FireFox父子元素上下margin叠加问题
先看下效果：
.gray{
background:gray;
width:200px;
margin:20px;
}
.blue{
background:blue;
width:100px;
height:100px;
margin:20px;
}
.black{
background:black;
width:100px;
height:100px;
margin:20px;
}
8.jpg
上图中，蓝色div和黑色div是灰色div的子元素，三个div的margin都是20，但是我们看到蓝色div与其父元素的上边界并没有20px的间隙，黑色div与其父元素的下边界也没有20px的间隙，也就是说蓝色div的上外边距与其父元素的上外边距叠加在了一起，就好像是蓝色div的上外边距跑出去了一样。黑色div也是同理。这就是父元素与子元素的边距叠加效果，叠加后的取值取的是两者中较大的那个。经测试，只要父元素有border或padding，就不会触发这个问题。然而刻意给父元素设置border或padding又会带来位移。可采用如下方法来根本解决问题：
解决问题：给父元素设置overflow:hidden;即可解决。
再来预览下：
IE8：
9.jpg解决了。
FireFox：
10.jpg也解决了。
8、上下margin重合
margin是个有点特殊的样式，相邻的margin-left和margin-right是不会重合的，但相邻的margin-top和margin-bottom会产生重合。不管IE还是Firefox都存在这问题。例如：
HTML：
CSS：复制代码
.topDiv{
width:100px;
height:100px;
border:1px solid #000;
margin-bottom:25px;
}
.bottomDiv{
width:100px;
height:100px;
border:1px solid #000;
margin-top:50px;
}复制代码
我们对上面的div设置了25px的下边距，对下方的div设置了50px的上边距。为了便于观察，这里将div的高度都设为100px。
浏览器预览结果：
2.jpg
可见，结果不是预期的上下div拉开75px的距离，而是拉开了半个div高度(50px)的距离。
解决问题：
统一使用margin-top或者margin-bottom，不要混合使用。这并不是技术上的必需，但却是个良好的习惯。
9、行内元素上下margin及padding不拉开元素间距的问题
行内元素的margin和padding属性很奇怪，水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。例如：
HTML：
CSS:
div{background:gray;padding:20px;}
span{background:green;padding:20px;margin:20px;}
各浏览器预览结果：
2012011310460074.jpg
可见竖直方向的padding、margin虽然增大了行内元素的面积，但并没有和相邻元素拉开距离，导致了元素重叠。
解决问题：
将行内元素display设置为block即可解决
修改后CSS：
span{background:green;padding:20px;margin:20px;display:block;}
各浏览器预览结果：
2012011310550561.jpg
但由于块级元素与行内元素的默认样式不同，可能会因此书写额外的样式代码。比如width样式，因为块级元素默认占据整行。
10、margin bug
当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件。解决方案：外层元素设定border 或设定float。
11、 清除浮动
.hackbox{
display:table;
//将对象作为块元素级的表格显示
}
或者
.hackbox{
clear:both;
}
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦的
……#box:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}
HTML代码
12、文字本身的大小不兼容
同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。
13、超链接问题
1）．链接(a标签)的边框与背景
链接(a标签)的边框与背景 a 链接加边框和背景色，需设置 display: block,
同时设置 float: left 保证不换行。
参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
2）．链接的hover状态。
a:hover img{width:300px} 我们想让鼠标hover时，链接里包含的图片宽度变化，可惜在ie6下无效，ie7、ff下有效。
3）．链接的hover状态。
div:hover{} 这样的样式ie6是不认的，在ie7、ff下才有效果。
4）．block化的a链接，
其内套absolute层，absolute层内放置img，ie下，鼠标点击img不会有链接效果，ff下正常。
5）.超链接访问后hover样式不出现：
有时候我们同时设置了a:visited和a:hover样式，但一旦超链接访问后，hover的样式就不再出现，这是怎么回事呢？
是因为将样式顺序放错了，
调整为先a:visited再a:hover。
关于a标签的四种状态的排序问题，有个简单好记的原则，叫做love hate原则，即i(link)ov(visited)e h(hover)a(active)te。
14、float的div闭合;清除浮动;自适应高度
1） 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;) 这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可： .clear{ clear:both;}
2）作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。 例如某一个wrapper如下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
3）对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:
4）万能float 闭合(非常重要!) 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 class=“clearfix” 即可,屡试不爽. /* 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 */ 或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}
15、FLOAT闭合（clearing float）
网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合，这也是div无法自适应高度的一个原因。如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV，这种情况一般出现在一个父DIV下包含多个子DIV。解决办法：
１、给父DIV也设上float
2、在所有子DIV后新加一个空DIV(不推荐，有些浏览器可以看见空DIV产生的空隙)
比如：
.parent{width:100px;}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}
3、万能 float 闭合
将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可
代码:
: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;}
作者原话：原理是，外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见（见W3C的解释）。现在只要将给外围元素添加一个“overflow:auto”，就可以解决问题，结果是除了IE，真的可以解决。下来就要解决IE的问题了，再加上“_height:1%”，这个问题就完全解决了。
我试了一下，其实不加"_height:1%“在IE下也行，留着吧。
16、 IE,FF的默认值问题
或许你一直在抱怨为什么要专门为IE和FF写不同的CSS，为什么IE这样让人头疼，然后一边写css，一边咒骂那个可恶的M$ IE.其实对于css的标准支持方面，IE并没有我们想象的那么可恶，关键在于IE和FF的默认值不一样而已，掌握了这个技巧，你会发现写出兼容FF和 IE的css并不是那么困难，或许对于简单的css，你完全可以不用”!important”这个东西了。 我们都知道，浏览器在显示网页的时候，都会根据网页的 css样式表来决定如何显示，但是我们在样式表中未必会将所有的元素都进行了具体的描述，当然也没有必要那么做，所以对于那些没有描述的属性，浏览器将采用内置默认的方式来进行显示，譬如文字，如果你没有在css中指定颜色，那么浏览器将采用黑色或者系统颜色来显示，div或者其他元素的背景，如果在 css中没有被指定，浏览器则将其设置为白色或者透明，等等其他未定义的样式均如此。所以有很多东西出现FF和IE显示不一样的根本原因在于它们的默认显示不一样，而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定，因此对于这点也就别去怪罪IE了。
17、如何对齐文本与文本输入框
加上 vertical-align:middle;
对于文本，在使用margin-left、padding-left、margin-top、padding-top之前优先考虑是否可用text-indent和line-height代替。因为计算尺寸的代价相对来说要大些。
18、 BOX模型解释不一致问题
在FF和IE 中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;} 注意这两个 margin的顺序一定不能写反， important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div {maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:xx px!important; #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-}
19．注释也能产生bug
20.ff居中
div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
ff: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
21．ff的缺点
width:100%在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:100%才行，累啊。
22．line-height问题
<div style=”line-height:20px”><img />文字</div>，很遗憾，在ie6下单行文字 line-height 效果消失了。。。，原因是<img />这个inline-block元素和inline元素写在一起了。解决方案：让img 和文字都 float起来。
23、怪异模式问题
漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。
24、容器不扩展问题
容器不扩展问题是我们经常遇到的。比如我们创建了一个div嵌套结构:
HTML：
<div id="divGroup">
<div id="a">子容器a</div>
<div id="b">子容器b</div>
</div>
CSS:
#divGroup{
border:2px solid #333;
}
#a,#b{
border:2px solid #333;
float:left;
margin:5px;
}
IE预览结果：
6.jpg
Firefox预览结果：
7.jpg
可见外层的高度并没有随着子容器的高度自动扩展，却是形成了一条线。这是因为当子容器成为浮动元素后，并脱离了文档流。因此父容器认为自己内容为空，从而造成了这样的结果。
解决问题：
解决方案是在容器的末尾加入个清理浮动的div。
修改后的HTML：
<div id="divGroup">
<div id="a">子容器a</div>
<div id="b">子容器b</div>
<div style="clear:both;"></div>
</div>
如果还想防止这个元素占据父元素的高度，可以进一步优化成<div style="clear:both;display:block;font:0px/0px sans-serif;"> </div>，这样这个清除浮动的容器被认为是个不占任何高度的空格字符。在网页中的任何地方，当遇到容器不扩展时，只需加入此段便能修复问题。
25、全屏遮罩后居中显示一个对话层
下面是遮罩层：绝对定位，宽高都100%，并且半透明
.over{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
background-color:#7E9898;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
}复制代码
下面是对话层：也是绝对定位：复制代码
.confirm{
position:absolute;
width:400px;
height:300px;
background:#FFFFFF;
top:300px;
left:0px;
}
这里的提示层不要嵌套在遮罩层里面，否则也会受影响，变成半透明的了。要让提示层跟遮罩层并列。
这里还有2个问题：
1.单单对遮罩层使用height:100%，只有IE6会达到效果，而其他浏览器一旦只会是当前可见区域遮上了，如果拖动纵向滚动条，发现下方还有没遮盖上。
2.用户电脑分辨率不同，而绝对定位的提示层使用margin:300px auto也无效。
为了达到各浏览器网页可见区域全部遮盖的效果，这里用了下jquery脚本，解决以上2个问题：
$(document).ready(function(){
$("div[class='cover']").height($(document).height());//将可见区域都遮罩起来
$("div[class='confirm']").css("left",($(document).width()-($("div[class='confirm']").width()))/2+"px");//提示层居中
});
最佳实践：
1.写DTD声明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.引入base.css重置各浏览器默认属性值：
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0px;padding:0px;}
table{border-collapse:collapse;border-spacing:0px;}
fieldset,img,abbr,acronym{border:0px;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
26、截字省略号
.hh { -o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space: nowrap；
overflow:hidden;
}
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾。技术是好技术，很多人都喜欢乱用，但注意Firefox并不支持
27、属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{} 这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
四 、DW中浏览器兼容性问题解决方法汇总
问题一：
如果某条边与浮动方向同向，则向该边上的浮动框应用边距时，边距会增加一倍。此错误只影响一次或多次浮动的某行中的第一次浮动。
影响: Internet Explorer 6.0
解决方法：为出现问题的元素css添加display:inline属性;
问题二：
如果无法将内容放入固定宽度或固定高度的框中，则框会扩展以适应内容，而不是让内容溢出框外。
影响：Internet Explorer 6.0
解决方法：加上 overflow:hidden;
问题三：
如果无名线框（包含内联内容的框）邻近某个浮动，则线框和浮动边缘之间会出现 3 个像素 (3px) 的间隙。在内容清除浮动时，此间隙会消失，导致内容朝着浮动的方向“慢移”三个像素。请注意，当左对齐文本邻近右浮动时，可能难以看到此间隙，但它确实存在，而且它可能导致紧密的布局中出现“浮动下降”。
影响： Internet Explorer 6.0
解决方法：为出现BUG的元素CSS属性里添加 zoom: 1;或者加入浮动属性。
问题四：
如果将一个或多个绝对定位的元素放在未分配尺寸的相对定位的元素中，则根本不会出现滚动条，或者该元素的扩展不足，无法查看所有内容。(注意: 如果 AP 元素中的内容扩展不超过视区的高度，则此错误将不会对页面造成影响。)
影响: Internet Explorer 6.0
解决办法：其实从问题中我们也可以看出，既然是元素放在分配尺寸的相对定位元素中才会出现问题，那么我们就可以在相对定位的元素中来分配尺寸，如果没有具体值，可以设置为自动：width:auto;height:auto;即可消除问题！
```
