浏览器兼容性总结
2015-10-12 10:55
337 查看
IE6~8 CSS hack
各类写法如下:
.test{
_color:#FF0000; /*仅 IE6支持 */
*color:#FFFF00; /* 仅 IE6、7支持 */
color:#0000FF\0; /* 仅 IE8支持 */
color:#0000FF\9; /* 所有IE浏览器(IE6+)支持 */
}
更详细的信息见: http://blog.csdn.net/freshlover/article/details/12132801
IE6 float 换行
在浮动元素上添加如下代码
display: inline-block;
overflow: hidden;
IE6 a:hover 问题
原因:是ie6对a:hover子标签的解读是建立在父标签的hover设置上的,换句话说如果不设置任何父标签a:hover{}则ie6就会停止对a的子标签hover解读
比如
a:hover em{color:#F00;}
<a href ="#">鼠标经过时改变我的<em>颜色</em></a>
上述代码不会生效。需改成 (只要存在 a:hover {} 即可,不管里面是什么规则)
a:hover {zoom: 1;}
a:hover em{color:#F00;}
<a href ="#">鼠标经过时改变我的<em>颜色</em></a>
参考文档:
http://www.jb51.net/css/149472.html
IE6 CSS高度height:100% 无效
IE6~8 a 超链接被击穿问题
描述:当用超链接 a 绝对定位在某个元素 ele(内含图片或者文字)上时,超链接 a 会被击穿,鼠标放在 ele 上的图片或者文字上时,超链接无效,并且无法跳转。
解决方案:设置超链接的背景(不能为transparent),然后通过 filter 设置透明度。
IE6和IE7下 margin-bottom 失效
http://blog.csdn.net/ximenxiafeng/article/details/8871158
IE6 不支持 png24 的透明图片,要用 png8
IE6 多类选择器 bug(避免使用)
比如
.first.second {}
.third.second {}
上述两句都只会应用的 .second 上,并且第二句会覆盖第一句
两种方法
给父层设置zoom:1触发layout
给父层设置宽度(width(定位left)/height(定位bottom))
详见: http://blog.csdn.net/zhouyong0/article/details/6318485
IE6 固定定位
IE6不支持固定定位,但是可以依靠绝对定位和 JS 来模拟。具体代码为:
var pos6 = function(){
var scrollHeight = $(window).scrollTop();
var bodyHeight = $('body').height();
floatwrap.css('top', (scrollHeight - 532) + 'px');
floatwrap.css('right','-48px');
};
var ie6float = function(){
if (!$.isIE6){
return ;
}
floatwrap.css('display','block').css('position','absolute');
pos6();
var ie6timer;
var _goPos = function(){
floatwrap.css('display','none');
clearTimeout(ie6timer);
ie6timer = setTimeout(function(){
floatwrap.css('display','block');
},200);
pos6();
};
$(window).on('scroll',function(){
_goPos();
});
$(window).on('resize',function(){
_goPos();
});
};
ie6float();
IE 6~8(9及以上没有测) 输入框内容高度兼容性问题
对于下面一段代码:phone-text是输入框,输入框 height + 上下pading + 上下border = 48
.phone-text {
width: 180px;
height: 40px;
font-size: 24px;
border: 2px solid #fd5c47;
padding: 2px 5px;
vertical-align: middle;
}
chrome下,会自动将输入的文字垂直居中
IE 6~8下:,不会将输入的问题垂直居中
将代码改成
.phone-text {
width: 180px;
height: 24px;
font-size: 24px;
border: 2px solid #fd5c47;
padding: 10px 5px;
vertical-align: middle;
}
IE 6、7下将 块级元素设置为display:inline-block失效
解决方法:
{
display: inline-block;
/*在 display: inline-block 下面添加以下两个规则*/
*zoom: 1;
*display: inline;
}
IE 6 overflow: hidden; 失效
IE6对overflow属性的理解有误,说白了是IE6的一个bug,IE7开始已经修复这个问题,也就是说IE7/IE8下overflow:hidden可以清除浮动造成的影响--张鑫旭
http://www.zhangxinxu.com/wordpress/2010/01/%E5%AF%B9overflow%E4%B8%8Ezoom%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%E7%9A%84%E4%B8%80%E4%BA%9B%E8%AE%A4%E8%AF%86/
通用的清楚浮动的方法,在浮动元素的父元素上添加类:clearfix
.clearfix:after {
content:"020";
display:block;
height:0;
clear:both;
visibility:hidden
}
.clearfix {
zoom:1
}
七夕不虐狗,单身大拯救+陈晓龙+chenxiaolong04@baidu.com
版本\hack | _ | * | \0 | \9 |
IE 6 | √ | √ | × | √ |
IE 7 | × | √ | × | √ |
IE 8 | × | × | √ | √ |
.test{
_color:#FF0000; /*仅 IE6支持 */
*color:#FFFF00; /* 仅 IE6、7支持 */
color:#0000FF\0; /* 仅 IE8支持 */
color:#0000FF\9; /* 所有IE浏览器(IE6+)支持 */
}
更详细的信息见: http://blog.csdn.net/freshlover/article/details/12132801
IE6 float 换行
在浮动元素上添加如下代码
display: inline-block;
overflow: hidden;
IE6 a:hover 问题
原因:是ie6对a:hover子标签的解读是建立在父标签的hover设置上的,换句话说如果不设置任何父标签a:hover{}则ie6就会停止对a的子标签hover解读
比如
a:hover em{color:#F00;}
<a href ="#">鼠标经过时改变我的<em>颜色</em></a>
上述代码不会生效。需改成 (只要存在 a:hover {} 即可,不管里面是什么规则)
a:hover {zoom: 1;}
a:hover em{color:#F00;}
<a href ="#">鼠标经过时改变我的<em>颜色</em></a>
参考文档:
http://www.jb51.net/css/149472.html
IE6 CSS高度height:100% 无效
IE6~8 a 超链接被击穿问题
描述:当用超链接 a 绝对定位在某个元素 ele(内含图片或者文字)上时,超链接 a 会被击穿,鼠标放在 ele 上的图片或者文字上时,超链接无效,并且无法跳转。
解决方案:设置超链接的背景(不能为transparent),然后通过 filter 设置透明度。
IE6和IE7下 margin-bottom 失效
http://blog.csdn.net/ximenxiafeng/article/details/8871158
IE6 不支持 png24 的透明图片,要用 png8
IE6 多类选择器 bug(避免使用)
比如
.first.second {}
.third.second {}
上述两句都只会应用的 .second 上,并且第二句会覆盖第一句
IE6相对父容器绝对定位的bug
两种方法
给父层设置zoom:1触发layout
给父层设置宽度(width(定位left)/height(定位bottom))
详见: http://blog.csdn.net/zhouyong0/article/details/6318485
IE6 固定定位
IE6不支持固定定位,但是可以依靠绝对定位和 JS 来模拟。具体代码为:
var pos6 = function(){
var scrollHeight = $(window).scrollTop();
var bodyHeight = $('body').height();
floatwrap.css('top', (scrollHeight - 532) + 'px');
floatwrap.css('right','-48px');
};
var ie6float = function(){
if (!$.isIE6){
return ;
}
floatwrap.css('display','block').css('position','absolute');
pos6();
var ie6timer;
var _goPos = function(){
floatwrap.css('display','none');
clearTimeout(ie6timer);
ie6timer = setTimeout(function(){
floatwrap.css('display','block');
},200);
pos6();
};
$(window).on('scroll',function(){
_goPos();
});
$(window).on('resize',function(){
_goPos();
});
};
ie6float();
IE 6~8(9及以上没有测) 输入框内容高度兼容性问题
对于下面一段代码:phone-text是输入框,输入框 height + 上下pading + 上下border = 48
.phone-text {
width: 180px;
height: 40px;
font-size: 24px;
border: 2px solid #fd5c47;
padding: 2px 5px;
vertical-align: middle;
}
chrome下,会自动将输入的文字垂直居中
IE 6~8下:,不会将输入的问题垂直居中
将代码改成
.phone-text {
width: 180px;
height: 24px;
font-size: 24px;
border: 2px solid #fd5c47;
padding: 10px 5px;
vertical-align: middle;
}
IE 6、7下将 块级元素设置为display:inline-block失效
解决方法:
{
display: inline-block;
/*在 display: inline-block 下面添加以下两个规则*/
*zoom: 1;
*display: inline;
}
IE 6 overflow: hidden; 失效
IE6对overflow属性的理解有误,说白了是IE6的一个bug,IE7开始已经修复这个问题,也就是说IE7/IE8下overflow:hidden可以清除浮动造成的影响--张鑫旭
http://www.zhangxinxu.com/wordpress/2010/01/%E5%AF%B9overflow%E4%B8%8Ezoom%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%E7%9A%84%E4%B8%80%E4%BA%9B%E8%AE%A4%E8%AF%86/
通用的清楚浮动的方法,在浮动元素的父元素上添加类:clearfix
.clearfix:after {
content:"020";
display:block;
height:0;
clear:both;
visibility:hidden
}
.clearfix {
zoom:1
}
七夕不虐狗,单身大拯救+陈晓龙+chenxiaolong04@baidu.com
相关文章推荐
- centos7安装nginx+mariadb+php-fpm
- ios 国际化(项目名和内容)
- 74个Swift标准库函数
- 在安卓JNI/NDK中使用C++11
- vs2008打包过程图解
- SSH与MVC
- VIM常用快捷键
- Javer的漫谈
- 移动App崩溃的测试用例设计
- 资源管理——对象池
- lintcode 容易题:Merge Sorted Array II 合并排序数组 II
- linux下安装wine
- scikit-learn
- Android studioAPK获取签名的方法
- Oracle按时间段分组统计
- 浅谈ThreadPool 线程池
- Android Studio 编译不通过,报错“找不到org.apache.http。。。”
- 【Android】实现雷达扫描效果
- 数据可视化常用的五种方式及案例分析
- ibatis insert语句的用法及selectKey的使用