CSS兼容问题大全_html/css_WEB-ITnose

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

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

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

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

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

4、IE6、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;后面。

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

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

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

8、IE6无法定义1px左右高度的容器
IE6下这个问题是因为默认的行高造成的
解决方法: overflow:hidden;或 zoom:0.08;

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

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

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

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

13、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;
}

14、清除浮动的几种方式：
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;
}

15、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无论设置多高都不起作用情况。这种情况发生的条件有两个：
1、父标签position属性为relative；2、问题标签含有浮动(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; }

p对象中的内容

解决方法：在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

* 可被IE6、IE7识别 IE8/9、ff不能识别
_ 只能被IE6识别
*+ 只能被IE7识别 /*测试下IE67都识别*/
\0 可被IE8、9、10识别
\9 只能被IE6、7、8、9、10识别
\9\0 能被IE8、9、10识别

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

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

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

3、//IE专用的条件注释

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准备的。

 

后期继续补充及改善