# 浏览器兼容性问题汇总
## 问题1
### first-child ##
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div p:first-child {
color: red;
}
</style>
</head>
<body>
<div>
<p>Aloha!</p>
<p>Hello!</p>
</div>
</body>
</html>
**PS：**在IE6里Aloha!并不是红色，是因为first-child这个属性本就具有兼容性问题
解决：应避免使用first-child（看了后来组解决伪元素是在样式加个空格，但是这个属性我试过好像不行）
## 问题2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box {
background-color:#eee;
/*border: 1px solid red;*/
/*解决方法*/
}
#box p {
margin-top: 20px;margin-bottom: 20px; text-align:center;
}
/*高度不适应 高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节*/
/*，特别是当内层对象使用margin 或paddign 时。*/
.div1{
200px;
height: 1px;
border: 1px solid red;
/*overflow: hidden;*/
}
/*无法定义1px左右高度的容器 IE6下这个问题是因为默认的行高造成的,*/
/*解决方法/!*overflow:hidden | zoom:0.08 | line-height:1px*!/*/
</style>
</head>
<body>
<div id="box">
<p>p对象中的内容</p>
</div>
<div class="div1"></div>
</body>
</html>
PS：当一个div里有标签元素的时候，div没有被设置高度宽度。
当内层对象的高度发生变化时外层高度不能自动进行调节，比如内层对象使用margin-top，bottom 或paddign 时。这个解决办法是在最外层加上边框border就能用外层div一变化了。
在IE6下无法定义一个height: 1px的容器，这是因为IE下默认的行高是6px，这时只需要给容器加上overflow:hidden | zoom:0.08 | line-height:1px，这三个中的一个，都能定义这个元素，不会被默认行高影响
## 问题3
##在Firefox Opera中 button元素的子元素可以溢出按钮渲染
> 在html表单中，我们一般会把input type = button 这个按钮作为一些功能使用，也可以在里面添加上图片之类的东西以改变按钮的样子
> 基于这种应用，在Firefox 和 Opera 中，如果添加了子元素，并且子元素的宽或高高于父元素，那么就会发生子元素溢出按钮渲染的效果
/
<div style="65px; height:65px; background:#DDD;">
<button style="60px; height:60px; background:#AAA; padding:0;">
<div style="70px; height:70px; border:5px solid;"></div>
</button>
</div>
/
代码中button按钮的尺寸为60X60，div的尺寸为70X70，那么，在各个浏览器中测试之后发现。
ie 6,7,8 谷歌浏览器并没有发生溢出效果，但在Firefox 和 Opera中出现了溢出效果，
可见，在ie6,7,8和谷歌中 button元素拥有了类似与 overflow:hidden 的特性，所以溢出的被裁减掉
input[type=button]:同样可以用；
解决办法，就是在其父元素（button）上添加一个overflow:hidden属性；
另一个解决办法就是把前景图改为背景图，就不会发生溢出的效果；
## 问题4
###在ie6.7.8(Q),IMG元素的alt属性会在没有title属性的时候被当成提示信息使用
####问题描述
在给IMG元素设置了alt 属性值后，不但被作为该元素的替代文字，还在该元素没有指定 title 属性时，作为提示信息被显示出来。
#####如以下代码：
<img src="图片路径" alt="替代文字"/>
#####这段代码在不同的浏览器环境中的表现：
- IE6 IE7 IE8(Q)—————IE8(S) 及其他浏览器
- 有悬停提示————————无悬停提示
#####造成的影响
- 当用户需要显示提示框，但仅指定了 alt 属性，则在 IE8(S) 及其它浏览器中将无法显示提示框；
- 当用户不需要显示提示框，并且指定了 alt 属性，则在 IE6 IE7 IE8(Q) 中仍然会显示提示框。
###问题分析
#####alt属性：
- 1、用来指定替换文字（当图片不能显示时、作为图片被载入前）
- 2、在IE6 IE7 IE8(混杂模式)中 alt 属性也扮演了在没有 title 属性的情况下当用户将鼠标移动到图片上时显示提示信息。（此错误在 IE8 标准模式中被修复。）
#####title属性：
- 为设置该属性的元素提供建议性的信息（当鼠标悬停在特定元素上时显示title文字为提示信息）
因此根据alt 属性在 IE6 IE7 IE8(Q) 下具有双重意义。这些浏览器混淆了此属性与 title 属性。 所以在没有设置 title 属性的情况下，鼠标放在设置了 alt 属性的img元素上时会弹出提示框。
###解决办法：
#####需要提供额外的显示信息
- <img src="图片路径" alt="替代文字" />
- 只会在ie中显示提示信息，别的浏览器没有
- 想在别的浏览器也显示。就加上title="替代文字"
#####不想显示额外的信息
- <img src="图片路径" alt="替代文字" />
- 只会在ie中显示提示信息，别的浏览器没有
- 都不想出现提示信息，就加上title=""
注意：不能因为不想出现提示信息。就不写ALT属性。这样会给看不到图像的阅览者带来困扰。
## 问题5
### 关于获取滚动条高度的问题
在获取滚动条高度时 chrome浏览器与其他浏览器有所哦不同；
在chrome中用document.body.scrollTop;
而在其他浏览器中用document.documentElement.scrollTop;
示例如下：
<script>
//滚动的高度 此法存在兼容性问题
window.onscroll = function(){
//判断用户使用的浏览器是否为Chrome
if( navigator.userAgent.indexOf("Chrome")
> -1){
//针对谷歌浏览器
var winY = document.body.scrollTop;
}else{
//针对IE、火狐浏览器
var winY = document.documentElement.scrollTop;
}
document.title = winY;
};
</script>
## 问题6
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
160px;height:20px;font-size:12px;line-height:20px;background-color:yellow
}
.t-1_t_{
background-color:#d4d4d4
};
.1{background-color:#A8A8A8};
.123456{background-color:#d4d4d4};
.2test{background-color:#A8A8A8};
.2-test{background-color:#d4d4d4};
.2_test{background-color:#A8A8A8};
.-test{background-color:#d4d4d4};
.-2test{background-color:#A8A8A8};
._test{background-color:#d4d4d4;};
._2test{background-color:#A8A8A8};
.-{background-color:#d4d4d4};
.---{background-color:#A8A8A8};
._{background-color:#d4d4d4};
.___{background-color:#A8A8A8};
._-{background-color:#d4d4d4};
.-_{background-color:#A8A8A8};
.___-{background-color:#d4d4d4};
.---_{background-color:#A8A8A8};
.---123{background-color:#d4d4d4}
.___123{background-color:#A8A8A8}
</style>
</head>
<body>
<div class="t-1_t_">字母开头</div>
<div class="1">单个数字</div>
<div class="123456">多个数字</div>
<div class="2test">数字开头 + [a-z][A-Z]</div>
<div class="2-test">数字 + "-" 开头</div>
<div class="2_test">数字 + "_" 开头</div>
<div class="-test">连字符(-)开头 + [a-z][A-Z]</div>
<div class="-2test">连字符(-) + 数字 开头</div>
<div class="_test">下划线(_)开头 + [a-z][A-Z]</div>
<div class="_2test">下划线(_) + 数字 开头</div>
<div class="-">单个连字符(-)</div>
<div class="---">多个连字符(-)</div>
<div class="_">单个下划线(_)</div>
<div class="___">多个下划线(_)</div>
<div class="_-">下划线(_) + 连字符(-)</div>
<div class="-_">连字符(-) + 下划线(_)</div>
<div class="___-">多个下划线(_) + 连字符(-)</div>
<div class="---_">多个连字符(-) + 下划线(_)</div>
<div class="---123">多个连字符(-) + 数字</div>
<div class="___123">多个下划线(_) + 数字</div>
/*以数字开始的类名仅在 IE6(Q) IE7(Q) IE8(Q) 下被识别，而其它浏览器下则不识别（忽略该规则）。
解决方案
坚持以字母开头命名选择器，这样可保证在所有浏览器下都能兼容。*/
</body>
</html>
----------
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
问题是：
IE6 及 IE7/8 的混杂模式下，非替换绝度定位元素当指定了 'left' 及 'right'，而 'width' 为默认值 "auto" 。
此时浏览器无法正确地计算出 'width' 的值，对于高度的计算也是如此。
<div style="background:gray; 100px; height:100px; position:relative;">
<div id="d" style="background:black; position:absolute; left:10px; right:10px; top:10px; bottom:10px; color:white;">
test
</div>
</div>
替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据input标签的type属性来决定是显示输入框，还是单选按钮等。
(X)HTML中的img、input、textarea、select、object都是替换元素。这些元素往往没有实际的内容，即是一个空元素，
b) 不可替换元素
(X)HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。例如：
p段落的内容p
段落p是一个不可替换元素，文字“段落的内容”全被显示。
</body>
</html>
----------
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#d {
background-color: black;
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
color: white;
_ expression(
parseInt(this.offsetParent.currentStyle.width)
- parseInt(this.currentStyle.left)
- parseInt(this.currentStyle.right)
);
_height: expression(
parseInt(this.offsetParent.currentStyle.height)
- parseInt(this.currentStyle.top)
- parseInt(this.currentStyle.bottom)
);
}
</style>
</head>
<body>
<div style="background-color:gray;100px;height:100px;position:relative">
<div id="d">test</div>
</div>
解决方法：若能为非替换绝对定位元素设定固定的宽度及高度，则尽量不使用此方式自动计算绝对定位元素的 'width' 及 'height'；若无法避免使用此方式，
则可以通过判断浏览器，
仅在 IE6 中使用 CSS Expression 控制绝对定位元素的宽度及高度。
</body>
</html>
## 问题7
### 当块级元素里面的内容超过div本身大小时会出现兼容性问题#
代码如下:
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#d1{
height:20px;
100px;
background:gray;
/*默认是visible*/
/*overflow: hidden;*/
}
#d2{
margin-left:25px;
height:50px;
100px;
background:gold;
}
</style>
</head>
<body>
<div id="d1">
Test Test Test Test Test Test Test Test Test
</div>
<div id="d2" ></div>
</body>
</html>
解决办法1:我们给div设置相应的宽高,不让子元素超出父元素的范围
解决办法2: 给父元素设置 overflow:hidden 文本溢出.
## 问题8
标准参考
关于 'list-style-position' 属性说明请参照 W3C CSS 2.1 规范： http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position
问题描述
IE6 IE7 IE8(Q) 中 UL 标记为实现放置 LI 元素标记框 'outside' 设置时所使用的样式设定不同于其他浏览器。
造成的影响
IE6 IE7 IE8(Q) 内 LI 元素样式内设置了 ‘list-style-position:outside’ 后其溢出容器的标记框会被裁切。
受影响的浏览器
IE6 IE7 IE8(Q)
问题分析
'list-style-position' 特性的主要说明标记框 (marker box) 在主块框 (LI) 的位置，他的默认值是 'outside'。在 CSS 2.1 规范中没有明确说明标记框的位置，但是说明在 'outside' 特性值设置情况下，如果 'direction' 特性值为 'ltr' 时，标记框应该存在于内容左侧，当 'direction' 特性值为 'rtl' 时，标记框应该存在于内容右侧。
正是由于规范中存在定义模糊，各个浏览器对此情况实现均有不同。通常情况下，LI 标记由 UL 标记和 OL 标记包裹，分析以下代码：
<ul style="background:#CCC;"> <li style="background:#AAA;">A</li></ul><ol style="background:#CCC;"> <li style="background:#AAA;">B</li></ol>
实际运行结果：
IE6 IE7 IE8(Q) IE8(S) Firefox Safari Chrome Opera
可以明显看出，不同浏览器中 UL 和 OL 元素的背景显示不同。在 IE6 IE7 IE8(Q) 中没有显示出背景颜色。根据盒模型分析，他们的默认 margin 和 padding 值不同。
继续加入样式检测代码，来验证这个假想：
if(!window.getComputedStyle){ window.getComputedStyle=function($target){ return $target.currentStyle; }; } var ul = document.getElementsByTagName("ul")[0]; var ol = document.getElementsByTagName("ol")[0]; alert('UL default display value:' + getComputedStyle(ul,null).display + "
" + 'OL default display value:' + getComputedStyle(ol,null).display + "
" + 'UL margin-left value:' + getComputedStyle(ul,null).marginLeft + "
" + 'UL padding-left value:' + getComputedStyle(ul,null).paddingLeft + "
" + 'OL margin-left value:' + getComputedStyle(ol,null).marginLeft + "
" + 'OL padding-left value:' + getComputedStyle(ol,null).paddingLeft + "
" )
运行结果汇总如下：
IE6 IE7 IE8(Q) IE8(S) Firefox Safari Chrome Opera
UL default display value: block block
OL default display value: block block
UL margin-left value: 30pt 0px
UL padding-left value: 0px 40px
OL margin-left value: 30pt 0px
OL padding-left value: 0px 40px
从实际运行结果可以看出 IE6 IE7 IE8(Q) 内实现 UL OL 标记样式时使用的 'margin' 值设定，而其他浏览器则用 'padding' 值设定。
现将 UL OL 标记的 'margin:0' 样式设置加入，分析以下代码效果：
<ul style="margin:0;background:#CCC;"> <li style="background:#AAA;">C</li></ul><ol style="margin:0;background:#CCC;"> <li style="background:#AAA;">D</li></ol>
显示效果如下表：
IE6 IE7 IE8(Q) IE8(S) Firefox Safari Chrome Opera
明显的，由于其 margin 值被设置为0，导致 IE6 IE7 IE8(Q) 中 UL OL 标记内的 LI 元素，标记框 ( marker box ) 从左侧溢出标记容器而没有被显示。
同理，在 IE8(S) Firefox Safari Chrome Opera 浏览器中，标记框可以显示是因为，他们中 UL OL 标记都是用 'padding' 值定位内部元素位置。如果将 'padding' 值设置为 0，同样会出现 IE6 IE7 IE8(Q) 中的情况。
解决方案
可以将 IE6 IE7 IE8(Q) 浏览器的 UL OL 标记 'margin-left' 和 'padding-left' 特性值更改为与其他浏览器样式一致。
例如：
ul,ol{margin-left:0;padding-left:40px;}
## 问题9
###1.解决图片上下边距间隙问题
一张前景图 载入页面时 图片的上下放都有一定的间隙
这是正常的 但是有时会影响布局，
我们都了解 img是个行标签
所以可以解决的方法就是把行标签转换成块级标签就行
代码如下：
div {
border: 1px solid red;
}
img{
/*display:block;*/
}
</style>
<body>
<div>
<img src="page3-img9.jpg" alt=""/>
</div>
<div>
<img src="pagin-4.png" alt=""/>
</div>
</body>
###2.当a标签hover后在ie6下出现的兼容性问题
一般来讲，a标签在IE下一般是不会出现兼容性问题，
有一点是例外的
代码如下：
<style>
a:hover img{
300px;
}
</style>
<body>
<a href=""><img src="pagin-4.png" alt=""/></a>
</body>
当a标签里面放一张图片的时候 在其他浏览器里的图片hover后效果是不变的 但是在IE6中 a的hover就失去的作用
解决的办法：唯一的办法，不在a中使用图片 可以加入特殊的字体符号（如bootstrap里面的 一些组件）
## 问题10
IE下z-index的bug
在IE浏览器中，定位元素的z-index层级是相对于各自的父级容器，所以会导致z-index出现错误的表现。解决方法是给
其父级元素定义z-index，有些情况下还需要定义position:relative。
## 问题11
### 解决背景色透明度的方法：
###问题
首先先建立一个简单的红色背景的div，该div透明度用opacity设置，在chrome，Firefox，opera等浏览器中可看到透明效果，但在IE6、7、8当中
不能实现。
<style>
div{
height: 300px;
300px;
background: red;
opacity: 0.5;
}
</style>
<body>
<div></div>
</body>
###解决方法
在CSS样式中加filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50 )即可.
<style>
div{
height: 300px;
300px;
background: red;
opacity: 0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50 )
}
</style>
<body>
<div></div>
</body>
## 问题12
document.getElementsByClassName()在IE6、7中会不分大小写，而在谷歌中会区分大小写
为了避免这个兼容性，书写代码的时候要规范。
## 问题13
### table单元格间距兼容问题
table中设置单元格间距
问题：
table{
border-spacing:10px;
}
border-spacing在IE6、IE7中无效
解决方法：
设置table属性cellspacing
<table cellspacing="10">
</table>
## 问题14
### 浮动的块级元素
情况：浮动的块级元素后面有一个行内元素，两个元素都由内容撑开。
结果：1.在Chrom下，块级元素会比后面的行内元素上下分别多1px
2.在IE6下，两个元素会产生3px的边距
解决：1.给行内元素设置属性如下：
border:1px solid red(与行内元素背景一致)
border:0px solid white
2.给行内元素设置属性如下：
margin-left:-3px;
## 问题15
### table设置合并行宽的兼容问题-侯静秋
<script type="text/javascript">
window.onload = function() {
function $(id) {
return document.getElementById(id);
}
$("info").innerHTML = "red cell clientWidth : " + $("td1").clientWidth +
"<br/>blue cell clientWidth : " + $("td2").clientWidth +
"<br/>gold cell clientWidth : " + $("td3").clientWidth;
}
</script>
//合并表格的行的时候，如果要设置宽度，要保证谷歌和IE的布局一样
<table id="T" style="color:white;" cellpadding="0" cellspacing="0" >
<tr>
//如果要设置固定的宽，则所有的td都要设置固定的宽，或者随意给一个td设置为auto，不能只设置一个，另外一个不设置或者设置为auto
<td id="td1" style="background-color:red;">td1</td>
<td id="td2" style="background-color:blue; 100px;">td2</td>
</tr>
<tr>
<td id="td3" style=" background-color:gold; 300px;" colspan="2">td3</td>
</tr>
</table>
computed clientWidth:
<div id="info" style="border:1px dashed red; 300px;"></div>
## 问题16
### 图片 浮动 兼容性问题-杨鹏
情况：在IE6中图片会和父元素产生3px的间距，以及在IE6下position:aboslute会使元素消失。
解决：给图片设置dispaly=block；在给元素position:aboslute后一定要给left值。
## 问题17
### first-letter兼容性问题-王昶
<style>
p:first-letter{
/*在IE6中无法正常显示*/
font-size: 300%;
}
/*解决办法*/
/*在first-letter后面加上空格*/
/*p:first-letter { */
/*font-size: 300%;*/
/*}*/
/*原因是伪类名字中带有-，会对IE6造成BUG*/
</style>
</head>
<body>
<p>朗沃前端</p>
</body>
</html>
## 问题18
<style>
a:link{
color: green;
}
a:visited{
color: blue;
}
a:hover{
color: red;
}
</style>
<a href="#">百度一下</a>
/*
hover写在后面时点击跳转后，hover不再起作用（浏览器缓存问题）。解决:按照link visited hover link书写
*/
## 问题19
### 问题描述
IE6 IE7 IE8(Q) 下，若浮动元素之前存在兄弟行内非浮动元素，IE 会将浮动元素所在的“当前行”认为是其前边的兄弟行内元素所产生的匿名框的底边，导致该浮动元素折行。
### 造成的影响
如果我们仅仅在 IE6 IE7 中编写页面并进行测试，当看到上面对测试代码的截图中的效果，在不清楚导致右浮动元素换行的原因是 IE6 IE7 对于同一行内浮动元素与非浮动行内元素的处理存在 Bug 的情况时，有可能会为右浮动元素设置一个负值 'margin-top'，这样虽然在 IE6 IE7 中能保证布局的正常，但在其他浏览器下就会出现异常。
### 受影响的浏览器
IE6 IE7 IE8(Q)
### 问题分析
分析以下代码：
<div style="border:1px solid black; font:14px Verdana; padding:5px;">
<span style="background:gold;">Text1</span>
<span style="background:lightblue;">Text2</span>
<span style="background:pink;">Text3</span>
<span style="background:greenyellow;">Text4</span>
<span style="background:peru;">Text5</span>
<span style="background:tomato; float:right;">Some text aligning right</span>
</div>
### 谷歌等下效果 如：
<div style="border:1px solid black; font:14px Verdana; padding:5px;">
<span style="background:gold;">Text1</span>
<span style="background:lightblue;">Text2</span>
<span style="background:pink;">Text3</span>
<span style="background:greenyellow;">Text4</span>
<span style="background:peru;">Text5</span>
<span style="background:tomato; float:right;">Some text aligning right</span>
</div>
在 IE6 IE7 IE8(Q) 中，浮动的 SPAN 折行浮动在新的一行上，同时位置也脱离了其父容器；
在其他浏览器中，则遵照 CSS 2.1 规范对浮动的定义，将浮动元素显示在浮动框另一边的第一个可用行上。
在 IE6 IE7 下，测试代码没有达到我们预计的效果，右浮动的 SPAN 折行浮动在新的一行上，同时位置也脱离了其父容器。 现在看看 Text1、 Text2……Text5 所在的 SPAN 元素作为浮动框之前当前行的内容，应该显示在浮动框另一边的第一个可用行上。 右浮动的 SPAN 紧贴在其父容器的右边界，其左侧的空白区域只要有足够的空间容纳这 5 个非浮动的 SPAN 元素，它们就应该保持与右浮动的 SPAN 元素位于同一行上。 这里 IE6 IE7 以及所有版本 IE 的混杂模式的处理均是错误的。
### 此问题的触发条件
1同一个父容器内有多个行内元素；
2某些为非浮动元素，某些为浮动元素（可以是左浮动或右浮动）；
3浮动的子元素不都是位于非浮动的子元素之前。
### 解决方案
依具体情况可以使用三种方法：使用绝对定位模拟右浮动、使用 IE hack 专门在IE6 IE7 中设置负的上外边距、将右浮动的 SPAN 元素调整到所有非浮动 SPAN 元素之前。
1 使用绝对定位（position:absolute）模拟右浮动（float:right）。 为了避免 IE6 IE7 的这个 BUG，可以不使用右浮动，而是用绝对定位及右偏移（right:XXXpx），如为右浮动元素设置 'position:absolute' 及 'right:3px' 替代 'float:right'，但这样做的代价是必须为父容器 DIV 元素设置 'postion:relative'，这么做仍然会破坏原文档结构。所以我们并不推荐此方法。
2使用 IE hack 专门在IE6 IE7 中设置负的上外边距（margin-top:-XXXpx）。 既然此 Bug 为IE6 IE7 专有，则只需要在 IE6 IE7 下为右浮动元素设置一个负的上外边距即可，其他浏览器保持原样式。所以可以考虑使用只有 IE6 IE7支持的 hack 方式：在 CSS 特性前加星号 '*'。如 *margin:-23px 5px 0 0，这样既可消除 IE6 IE7 中的 Bug，但是这么做是利用了浏览器的 Bug，并没有消除 Bug。在能有个更好的解决方法的时候，不推荐使用 CSS hack 来解决问题。
3调整SPAN元素的位置。 通过上面总结的 Bug 触发条件，我们可以考虑直接调整父容器中 SPAN 子元素的位置来回避 IE6 IE7 中此 Bug，即将右浮动的 SPAN 元素调整到所有非浮动 SPAN 元素之前。
## 问题20
### 问题描述
在IE6 IE7 IE8(Q)中，如果 clear 特性被设置在一个浮动的元素上，该浮动元素会与其前边的浮动元素放置在同一行。
在IE6 IE7 IE8(Q)中，如果 clear 属性被设置到一个浮动的元素上，位于其后的浮动元素的外顶边高于该元素的外顶边。
### 造成的影响
在IE6 IE7 IE8(Q)中，clear 特性被设置在一个浮动的元素上时，造成页面布局错乱。
### 受影响的浏览器
IE6 IE7 IE8(Q)
### 问题分析
对于上述两个问题，我们通过以下的测试用例来说明。
分析以下代码：
<div id= "Container" style= "300px; height:200px; border:1px solid red; ">
<div id= "DIV1" style= "float:right; 150px; height: 50px; background-color:darkgray; ">1 float:right;</div>
<div id= "DIV2" style= "clear:right; float:right; 250px; height: 50px; background-color:silver; ">2 clear:right; float:right;</div>
<div id= "DIV3" style= "float:left; 100px; height: 50px; background-color:gray; ">3 float:left;</div>
/div>
谷歌等效果如下
<div id= "Container" style= "300px; height:200px; border:1px solid red; ">
<div id= "DIV1" style= "float:right; 150px; height: 50px; background-color:darkgray; ">1 float:right;</div>
<div id= "DIV2" style= "clear:right; float:right; 250px; height: 50px; background-color:silver; ">2 clear:right; float:right;</div>
<div id= "DIV3" style= "float:left; 100px; height: 50px; background-color:gray; ">3 float:left;</div>
</div>
### 解决方案
不要将 'clear' 特性应用在浮动元素上，以免出现上述不兼容的问题。
## 问题21
### 零宽高的 IFRAME 元素的实际尺寸在不同浏览器中有差异#
问题描述
在 IE6 IE7 IE8 中，'width' 或 'height' 任意一个或两个都设置为 '0' 的 IFRAME 元素是不可见的，而在其它浏览器中这样设置后的 IFRAME 元素仍可见。
造成的影响
该问题将造成局部布局错乱或视觉效果有差异。
受影响的浏览器
所有浏览器
问题分析
IFRAME 元素的默认样式在各浏览器下是不同的，其 'border-style' 的默认值在 IE 中是 'none'，在其他浏览器中则为 'inset'，而其 'border-width' 的默认值在 IE 中是 'medium'，在其他浏览器中则为 '2px'。也就是说，默认情况下，IFRAME 的边框在 IE 中是不可见的，而在其他浏览器中则可以看到 2px 宽的边框。1
因此即便设置其宽或高为 0，也只能保证在 IE 中不可见，在其他浏览器中，其边框则是可见的。
测试代码如下（本问题不区分浏览器模式）：
<div style="400px; background:gold;">
<span>iframe 1</span><iframe style="0;"></iframe><br/>
<span>iframe 2</span><iframe style="height:0;"></iframe><br/>
<span>iframe 3</span><iframe style="0; height:0;"></iframe>
</div>
这段代码各浏览器中的表现如下：
**IE6 IE7 IE8 运行效果**
没有边框
**Firefox 运行效果截图**
有边框
**Safari 运行效果截图**
有边框
**Chrome 运行效果截图**
有边框
可见：通过使用零宽高隐藏 IFRAME 仅在 IE 中可行，在其他浏览器中无法实现。
注：
宽高不为 0 的 IFRAME 在 IE 能看到“边框”，但这个“边框”并不是 IFRAME 元素本身的边框，而是其嵌入的文档的边框。
解决方案
根据实际情况选择使用 'visibility:hidden' 或者 'display:none' 隐藏 IFRAME 。
## 问题22
###table中td的宽度大于table的宽度在IE和其它浏览器中效果不一样###
<table border="1" style="table-layout:fixed; 80px;">
<tr>
<td><div style=" 120px; height:30px; background:#CCC;"></div></td>
</tr>
</table>
<p>IE6,IE7table会将td溢出的部分隐藏,</p>
<p>IE8和chrome浏览器对于的部分会溢出</p>
####解决办法:给table添加overflow:hidden####
<table border="1" style="table-layout:fixed; 80px;overflow:hidden">
<tr>
<td><div style=" 120px; height:30px; background:#CCC;"></div></td>
</tr>
</table>
<p></p>
<p></p>
<p></p>
## 问题23
### 问题描述##
IE6 IE7 IE8(Q) 中空 TABLE 的宽度和高度均为0，IE8(S) Firefox Chrome Safari Opera 中空 TABLE 的宽度和高度是设置的值。
###造成的影响###
此问题导致 IE6 IE7 IE8(Q) 与其他浏览器不同，造成布局混乱。
受影响的浏览器
IE6 IE7 IE8(Q)
###问题分析###
定义一个空 TABLE ，设置 'width' 和 'height' 均是100px，
代码如下：
<!DOCTYPE html>
<html>
<body>
<table style="background:gray; 100px; height:100px;"></table>
</body>
</html>
IE6 IE7 IE8(Q) 中，空 TABLE 的宽度和高度均为 0。
IE8(S) Firefox Chrome Safari Opera 中，中空 TABLE 的宽度和高度是设置的值，符合规范。
### 解决方案 ###
避免出现空 TABLE，保证各浏览器兼容。
## 问题24
cells 属性是应用在 HTMLTableRowElement（TR） 上的，返回该列的单元格集合
对 TABLE 元素使用 cells 属性只有 IE6 IE7 IE8 Opera 支持。
cells 集合返回 TABLE 元素内所有的 TD TH 元素的集合。
所支持的浏览器
IE6 IE7 IE8 Opera
解决方案
避免使用 TABLE 的 cells 属性获取元素，而对 table row(TR) 使用 cells 属性，
或用 document.getElementsByTagName 等方式获取元素。
代码如下：
<body>
<table id="A" name="An">
<tr id="B" name="Bn">
<td id="C" name="Cn"></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
<script>
document.write("table.cells : " + document.getElementById("A").cells); //IE外的都不兼容
document.write("table.tr.cells : " + document.getElementById("B").cells); //都兼容
document.write("table.td: " + document.getElementById("C")); //都兼容
document.write("table.cells : " + document.getElementsByName("An")); //都兼容
document.write("table.tr.cells : " + document.getElementsByName("Bn")); //都兼容
document.write("table.td.cells : " + document.getElementsByName("Cn")); //都兼容
document.write("table.tr.cells : " + document.getElementsByTagName("tr")); //都兼容
document.write("table.td.cells : " + document.getElementsByTagName("td")); //都兼容
</script>
## 问题25
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.d0 {
height: 100px;
}
.dd {
height: 49px;
border-top: 1px solid red;
}
.d1 {
position: absolute;
top: 150px;
left: 50px;
1000px;
height: 500px;
font-size: 150px;
background-color: rgba(0, 255, 255, 0.3);
line-height: 0;
}
input {
height: 50px;
font-size: 20px;
}
img {
display: inline-block;
height: 50px;
200px;
border: 1px solid blue;
font-size: 30px;
}
</style>
</head>
<body>
<div class="d0"></div>
<div class="dd">-50</div>
<div class="dd">0</div>
<div class="dd">50</div>
<div class="dd">100</div>
<div class="dd">150</div>
<div class="dd">200</div>
<div class="dd">250</div>
<div class="d1">
<input type="button" value="fxg1"/>
fxg2
<img src="../ds" alt="meiyou"/>
</div>
</body>
</html>
<!--1.ie6 ie7不理睬我的行高问题-->
<!--2. ie6 ie7 把input当成了一个整体，让input的下边缘和文字对齐，其他则看作里面有文本，文本对齐。-->
<!--3.去掉input里面的文本。火狐仍然不动，谷歌位置变化-->
<!--4.img里面的文本，火狐的处理方式不同，任然和父元素的基线对齐-->
<!--我认为谷歌的处理方式最为合理，和内联块级元素相同-->
## 问题26
1. 1.子选择器在IE6中不能使用
1. 产生条件：IE6浏览器，使用E>F子选择器；
1. 解决办法：采用其他选择器或者采用后代选择器进行控制，如：div p{margin:10px;} div p p{margin:0;}替代掉 div>p{margin:10px;}。
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*子选择器在IE6中不能使用*/
/*产生条件：IE6浏览器，使用E>F子选择器；*/
/*解决办法：采用其他选择器或者采用后代选择器进行控制，
如：div p{margin:10px;} div p*/
/*p{margin:0;}替代掉 div>p{margin:10px;}。*/
div>p{
font-size: 30px;
color: red;
}
/*div p{*/
/*font-size: 30px;*/
/*color: red;*/
/*}*/
</style>
</head>
<body>
<div>
<p> 页面 </p>
</div>
</body>
</html>
1. 2. 文字大小不兼容。
1. 同样14px的宋体字，ie下实际占高16px，下留白3px，firefox下实际占高17px，上留白1px，下留白3px。
1. 文字大小不兼容解决方案：给所有文字设定通用line-height值
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*同样14px的宋体字，ie下实际占高16px，下留白3px，firefox*/
/*下实际占高17px，上留白1px，下留白3px。*/
/*文字大小不兼容解决方案：给所有文字设定通用line-height值*/
p{
border: 1px solid black;
height: 40px;
font-size: 14px;
/*line-height: 40px;*/
}
</style>
</head>
<body>
<p> 文字大小兼容性问题 </p>
</body>
</html>
## 问题27
根据 W3C CSS2.1 规范中的描述，position:fixed 固定定位是绝对定位的子类。与绝对定位不同的是，固定定位的包含块由视口（viewport）创建的。
'position' 特性的 fixed 值允许一个元素绝对的相对于浏览器窗口定位。
关于 'position:fixed' 的详细信息，请参考 CSS 2.1 规范 9.6.1 Fixed positioning 中的内容。
在 CSS 1 版中，没有 position 定位特性，仅支持 CSS 1 的浏览器将不会拥有人和定位效果。
问题描述
IE6 IE7(Q) IE8(Q) 不支持固定定位（position:fixed），对其设置 'position:fixed' 无任何效果。
造成的影响
由于 IE6 IE7(Q) IE8(Q) 将 'position' 特性的 fixed 值当作错误值处理，从而使用 'position' 特性的初始值 static，即这个元素在 IE6 IE7(Q) IE8(Q) 变成了普通流中的静态元素，这将会造成布局混乱等多种兼容性问题。
受影响的浏览器
IE6 IE7(Q) IE8(Q)
问题分析
对于此问题，我们通过以下的测试用例来说明。
分析以下代码：
<div id="DIV1" style="float:left; height:3000px;"></div>
<div id="DIV2" style="position:fixed; top:300px;">fixed div</div>■DIV1 的高度为 3000px，使浏览器窗口出现滚动条；
■DIV2 是固定定位元素，它的位置不会随页面滚动而变化。
根据 CSS2.1 规范中的描述可知，当页面中滚动条滚动时，DIV2 的位置应该不发生变化。
以上测试用例在不同的浏览器中打开，除 IE6 IE7(Q) IE8(Q) 外，滚动窗口，DIV2 中的文本“fixed div”会一直位于窗口中部。
【注】：从 IE6 开发以及发布时间可知，当时 CSS 2.0 的成文规范还没有推出。反观 MSND 中说明 IE 4.0 版本以上即支持除 'position:fixed' 外其定位特性值设置。这意味着 IE6 以及之前的 IE 版本所支持的 'position' 特性并非 CSS 2.0 规范中描述的定位特性，他是遵循 IE 自身定义的渲染规范的。
解决方案
在 IE6 IE7(Q) IE8(Q) 中为固定定位元素设置 'position:absolute'，再通过 JavaScript 脚本或者 CSS Expression 动态设置其偏移量。
参考代码如下：
<body style="font:12px Arial; _background-attachment:fixed; _background-image:url(about:blank);">
<div style="10000px; height:10000px;"></div>
<div id="d" style="position:fixed; top:0; left:0; _position:absolute; _top:expression(offsetParent.scrollTop); _left:expression(offsetParent.scrollLeft); background:#ddd; 100px; height:100px;"></div>
</body>
## 问题28
getyear()获取年份的兼容性
<script type="text/javascript">
function run() {
// var year= new Date().getYear();
// document.write(year);
// 在IE中得到的日期是"2015"，在谷歌中看到的日期是"115"，主要是因为在
// 谷歌 里面 getYear 返回的是 "当前年份-1900" 的值。
//
// 【兼容处理】
//
// 加上对年份的判断，如:
// var year= new Date().getYear();
// year = (year<1900?(1900+year):year);
document.write(year);
也可以通过 getFullYear getUTCFullYear 去调用:
var year = new Date().getFullYear();
document.write(year);
}
## 问题29
IE兼容性问题
在 IE6 IE7 下，当我们设置了 'background-image' 背景图,
并且 'background-attachment' 特性值为 'scroll' 时，元素的背景图片会随着元素内容滚动。
<div style="background:url(image/3page-img4.jpg) repeat-x scroll 0 0 #FFFFFF;300px;
height:200px;overflow:auto;">
<div style="background:yellow;height:200px;40px;">
inner content inner content inner content inner content inner content
</div>
<div style="400px;text-align:right;">
OUTER CONTENT
</div>
</div>
若需要在所有浏览器下元素图片不随元素内容滚动，则不给元素设置任何背景，并且在元素的父元素上设置背景图
<div style="background:url(image/3page-img4.jpg) repeat-x scroll 0 0 #FFFFFF;300px;">
<div style="300px;height:200px;overflow:auto;">
<div style="background:yellow;height:200px;40px;">
inner content inner content inner content inner content inner content
</div>
<div style="400px;text-align:right;">
OUTER CONTENT
</div>
</div>
</div>
若需要在所有浏览器下元素图片随元素内容滚动，则不设置元素背景，
而设置元素内容的背景图片并设置 'background-attachment : scroll'；
<div style="300px;height:200px;overflow:auto;">
<div style="background:url(image/3page-img4.jpg) repeat-x scroll 0 0 #FFFFFF;">
<div style="background:yellow;height:200px;40px;">
inner content inner content inner content inner content inner content
</div>
<div style="400px;text-align:right;">
OUTER CONTENT
</div>
</div>
</div>
## 问题30
渐变gradient
css代码
.gradient-chrome{
/*background:-moz-linear-gradient(bottom,red,green);*/
background:linear-gradient(bottom left,red,yellow,green);
background: -webkit-linear-gradient(bottom left,red,yellow,green);
background: -moz-linear-gradient(bottom,red,yellow,green);
/*最好加上前面的-webkit-，-moz-等*/
}
.gradient-IE{
filter: progid:DXImageTransform.Microsoft.gradient(
GradientType=0,
startColorstr=pink,
endColorstr=black
);
/*IE7*8*9有效*/
}
html代码
<h1>背景色渐变兼容写法：linear-gradient----IE10以下无效，部分支持IE10，支持chrome,火狐</h1>
<p>这是CSS3新属性：用线性渐变创建图像，一共有三个参数，见下<br/>
语法是：linear-gradien(线性渐变的方向,起点颜色，终点颜色)<br/>
关于第一个参数：可以不写，默认是从上到下。
其实，也可以在起点颜色和终点颜色中间加入更多的颜色参数，就能实现多色渐变<br/>
top:从上到下，left:从左到右，right:从右到左，top left:左上到右下，也可以用角度来指定比如-90deg</p>
<p>虽然说IE10支持，但是第一个参数（渐变方向）支持的不够多</p>
<h1>IE10以下的背景色渐变：</h1>
<p>实际上是利用了filter滤镜是来实现：
ie7*8*9有效，其他ie版本无效，ie6网上有说有效，然而我电脑并没有IE6，测不到，据传闻ieTester并不是真正的模拟了IE6, <br/>
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=red, endColorstr=blue);/*IE<9>*/
<br/>
其中：GradientType=1代表纵向，0代表横向;
<h2 class="gradient-IE">背景色渐变效果IE。
gradient [ˈgreidiənt]
n.坡度，斜度</h2>
<h2 class="gradient-chrome">背景色渐变效果chrome</h2>