CSS兼容问题大全

一、chorme 最小字体的兼容性。

问题描述：ff和IE最小字体可设置为1px，但是chorme中文版最小字体是12px，小于12px的字体所有显示为12px.
解决方案：chorme支持CSS3的，可用
font-size : 12px;
-webkit-transform : scale(0.84,0.84) ;
*font-size:10px;
来解决，可是会发现整个容器都缩小了，变得不对齐了，再配合margin可解决

二、IE8及如下显示图片时多出一个边框而Chrome或Firefox下却没有
问题描述：显示效果就是Chrome、FireFox、IE10以上都没有问题，可是IE8就多出了一个蓝色边框（有时为黑色的）。
解决办法：须要指定img的边框样式便可： img{border-style:none;}

三、img图片下的莫名留白问题
问题描述：图片底部的空隙实际上涉及行内元素的布局模型，图片默认的垂直对齐方式是基线，而基线的位置是与字体相关的。因此在某些时候，图片底部的空隙多是 2px，而有时多是 4px 或更多。不一样的 font-size 应该也会影响到这个空隙的大小。
解决方法：给img设定 display:block或者vertical-align:top或bottom。

三、IE8下图片透明兼容写法：
问题描述：opacity时=是CSS3属性，ie8不支持
解决办法：opacity:0.7;
filter:alpha(opacity=70); /*兼容ie*/

四、IE六、7下不识别display:inline-block
解决方法以下：
让标准浏览器识别display:inline-block;
让ie6/7识别display:inline;来覆盖上面的display:inline-block;而后经过zoom:1;来触发haslayout让inline元素在ie中表现得和inline-block元素同样。
.list1 li{display:inline-block; width:150px; *zoom:1;*display:inline;}
加上*zoom:1;(触发ie6和ie7下的haslayout);
*display:inline(只有ie6和ie7识别);
注：必定要加在display:inline-block;后面。

五、IE6 双边距bug。
问题描述：ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。
解决方案：给浮动容器定义display:inline。

六、IE6下两个层中间有间隙
产生条件：当一个与浮动元素相邻的非浮动元素并无指定具体的高度或宽度时，非浮动元素中的内容会和浮动元素的边界产生3px的空隙。这个空隙只沿着非浮动元素显示。若是非浮动的元素指定了一个具体的宽度或高度，这个时候非浮动元素和浮动元素出现了3px的空隙。
解决办法：第一个浮动元素设置margin-right:-3px;

七、IE6下当多个浮动元素中间夹杂着HTML注释语句时，若是浮动元素宽度为100%，则在下一行多显示一个上一行最后一个字符。
解决办法：给全部浮动元素添加display:inline;。

八、IE6没法定义1px左右高度的容器
IE6下这个问题是由于默认的行高形成的
解决方法: overflow:hidden;或 zoom:0.08;

九、a连接的hover状态不起做用。
问题描述：a:hover img{width:300px} 咱们想让鼠标hover时，连接里包含的图片宽度变化，这样的样式ie6是不认的，在ie七、ff下才有效果。

十、a连接不起做用
问题描述：a连接内嵌button或者input type="button"按钮，ie8及如下点击无反应 ff chorme 正常
解决方法：给按钮添加onclick="javascript:location.href='***.html'"。这样操做a连接无心义

十一、block化的a连接不起做用
问题描述：block化的a连接，其内套absolute层，absolute层内放置img，ie7如下鼠标点击img不会有连接效果，ff chorme下正常。

十二、overflow:hidden对其下的绝对层position:absolute无效，absolute脱离文档流。
解决方案：给overflow:hidden加position:relative或者position:absolute。

1三、IE中设置滚动条颜色，在FF chorme中无效
html {
scrollbar-face-color:red;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:blue;
scrollbar-3dlight-color:blue;
scrollbar-arrow-color:green;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:red;
}

1四、清除浮动的几种方式：
1.添加空元素且设置clear:both;缺点：这个方式添加了添加了无心义的标记
2.对父元素也进行浮动。缺点：与父元素同级的元素会受到影响。
3.为父元素设置overflow:hidden; 缺点：这会自动清理包含的任何浮动元素：
4.结合使用:after伪类和内容声明在指定的现有内容的末尾添加新的内容：
对父元素添加clear类
.clear:after {
content:".";
　 height:0;
　 visibility:hidden;
display:block;
　 clear:both;
}
缺点：在IE6/7和更低版本中不起做用。
解决方法：
.clear {
zoom:1;
}

1五、ff不识别background-position-y 或background-position-x;
解决办法：background-position:x y;两个都写；

5 //Ie6下，不识别最大宽高度和最小宽高度，意即min-width/height和 Max-width/height
解决方法：
(1)：.abc{border:1px blue solid;width:200px;height:200px;}
html>body .abc{width:auto;height:auto;min-width:200px;min-height:200px;}
(2)：.abc{width:200px;height:200px;_width:200px;_height:200px;}
（由于ie6有一个特征，当定义一个高度时，若是内容超太高度，元素会自动调整高度。）

15 //ie6 不支持 fixed

/*对于非IE6能够这样写*/
#top{
position:fixed;
bottom:0;
right:20px;
}

/*可是IE6是不支持fixed定位的，须要另外重写*/
#top{
position:fixed;
_position:absolute;
top:0;
right:20px;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}

/*使用hack使IE6实现该效果，但这个东东会闪烁，须要如下代码*/
*html{
background-image:url(about:blank);
background-attachment:fixed;
}

/*使固定在顶部*/
#top{
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}

/*固定在底部*/
#top{
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop)||0)-(parseInt(this.currentStyle.marginBottom)||0)));
}
/*垂直居中*/
#top{
position:fixed;
top:50%;
margin-top:-50px;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2));
}

17//ie6下z-index不起做用的 bug

1）首先讲讲第一种z-index不管设置多高都不起做用状况。这种状况发生的条件有两个：
一、父标签position属性为relative；二、问题标签含有浮动(float)属性。
2）全部浏览器：父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。

11.//高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。 例： #box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } <div id="box"> <p>p对象中的内容</p> </div>
解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

11.//为何FF下文本没法撑开容器的高度 标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开须要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 能够这样定义: { height:auto!important; height:200px; min-height:200px; }

CSS hack
css hack是指一种兼容css在不一样浏览器中正确显示的技巧方法
IE各个版本hack

* 可被IE六、IE7识别 IE8/九、ff不能识别
_ 只能被IE6识别
*+ 只能被IE7识别 /*测试下IE67都识别*/
\0 可被IE八、九、10识别
\9 只能被IE六、七、八、九、10识别
\9\0 能被IE八、九、10识别

.header {_width:100px;} /* IE6专用*/
.header {*+width:100px;} /* IE7专用*/
.header {*width:100px;} /* IE六、IE7共用*/
.header {width:100px\0;} /* IE八、IE9共用*/
.header {width:100px\9;} /* IE6/7/8/9共用*/
.header {width:330px\9\0;} /* IE9专用*/

/*选择器Hack：*/
*html .header{} /*IE6*/
*+html .header{} /*IE7*/

一、！important
IE789/firefox能够识别!important,看到此语句后就不会在执行第二句
IE6会跳过!important语句（不识别）直接执行第二句
这是一个误区
你们注意一下，IE6只是在某些状况下不识别
例：div{background:red!important} div{background:green}，这时全部浏览器统一解释为背景色red。

三、//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]-->

Firefox 与 Chrome 的 Hack
Firefox:@-moz-document url-prefix() /*写在选择器外层时（只可写在此处）：Firefox only*/
Chorme:@media screen and (-webkit-min-device-pixel-ratio:0) /*写在选择器外层时（只可写在此处）：Chrome only*/

before/after伪类IE67不识别
.example:before, .example before {}
.example:after, .example after {}
一个有冒号，一个是空格分隔。前者IE8+及其余现代浏览器；后者为IE6-7准备的。

 

后期继续补充及改善