hack基础：

IE6：

_selector{property:value;}

selector{property:value;property:value !important;} //IE6 不支持同一选择符中的 !important

IE7：

+selector{property:value;}

IE8：

selector{property:value\0;}

IE6 & IE7：

*selector{property:value;}

IE6 & IE7 & IE8：

selector{property:value\9;}

1、屏蔽IE浏览器（也就是IE下不显示）

*:lang(zh) select {font:12px !important;} /*FF的专用*/ select:empty {font:12px !important;} /*safari可见*/ 这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

2、仅IE7识别hack

*+html {…} 当面临需要只针对IE7做样式的时候就可以采用这个HACK

3、IE6及IE6以下识别CSS HACK

* html {…} 这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。 html/**/ >body select {……} 这句与上一句的作用相同。

4，仅IE6不识别div hack

select { display /*IE6不识别*/:none;} 这里主要是通过CSS注释分开一个属性与值，流释在冒号前。

5、仅IE6识别支持

.yangshi{_height:20px;} 这里IE6支持识别CSS属性前“_”短下划线。

6、仅IE6与IE5不识别

select/**/ { display /*IE6,IE5不识别*/:none;} 这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。

7、仅IE5不识别

select/*IE5不识别*/ { display:none;} 这一句是在上一句中去掉了属性区的注释。只有IE5不识别

8、盒模型解决方法

selct {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度;} 盒模型的清除方法不是通过!important来处理的。这点要明确。

10、截字省略号

select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; } 这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。

11、只有Opera识别

@media all and (min-width: 0px){ select {……} } 针对Opera浏览器做单独的设定。

问题情境

bug-IE67下li的4px间隙

如果在IE6，7下li本身没浮动,但是li内容有浮动的时候，li下边就会产生几px的间隙

解决办法有两种:

给li加浮动
给li加vertical-align:top;

IE6 LI上下有空隙

其他浏览器正常--- LI上下没有空隙

给出相关解决代码:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

body{margin:0;background:#000;color:#fff;font-size:16px;font-family:"微软雅黑";text-align:center;}

.list{ width:300px;margin:0;padding:0;margin:100px auto;}

.list li{ list-style:none;height:30px;border:1px solid #fff; font-size:12px; line-height:30px;}

.list a{float:left;color:#fff;}

.list span{float:right;}

/*

	IE6，7下li的间隙

	如果在IE6，7下li本身没浮动,但是li内容有浮动的时候，li下边就会产生几px的间隙

	解决办法有两种:

    1.给li加浮动

	2.给li加vertical-align:top;

*/

</style>

</head>

<body>

<ul class="list">

	<li>

    	<a href="#">文字文字文字文字文字</a>

        <span>作者</span>

    </li>

    <li>

    	<a href="#">文字文字文字文字文字</a>

        <span>作者</span>

    </li>

    <li>

    	<a href="#">文字文字文字文字文字</a>

        <span>作者</span>

    </li>

    <li>

    	<a href="#">文字文字文字文字文字</a>

        <span>作者</span>

    </li>

</ul>

解决方案：在li中加入vertical-align:top/middle/bottom;

</body>

</html>

问题情境

图片下的空隙

当几个图并列一排的时候所有浏览器都会图片和父元素的底部出现一点距离。

解决办法：

为图片添加vertical-align:bottom/top/middle;任意一个

IE6/其他浏览器图片并列出现空隙

解决后

给出相关解决代码:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

.box{border:20px solid #000;background:Red;}

img{ vertical-align:top;}

/*

当几个图并列一排的时候如果不添加vertical-align:bottom/top/middle;所有浏览器都会图片和父元素的底部出现一点距离

*/

</style>

</head>

<body>

<div class="box">

	<img src="img/bigptr.jpg" /><img src="img/bigptr.jpg" /><img src="img/bigptr.jpg" />

</div>

在图片中加上vertical-align:top

</body>

</html>

问题情境

bug-IE6下的双边距BUG

在IE6下，块元素有浮动和横向margin的时候，横向的margin值会被放大成两倍

解决办法:

有问题的元素添加display:inline;

ie6下双边距

其他浏览器正常

给出相关解决代码:

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<style>

body{margin:0;}

.wrap{float:left;border:2px solid #000;}

.box{width:100px;height:100px;background:red;margin:0 100px;float:left;_display: inline;}

/*

	IE6下的双边距BUG

	在IE6下，块元素有浮动和横向margin的时候，横向的margin值会被放大成两倍

	解决办法: display:inline;

*/

</style>

</head>

<body>

<div class="wrap">

<div class="box"></div>

</div>

</body>

</html>

问题情境

IE6-png透明

ie6完全不支持24位png格式图片，透明的地方显示白底。

解决办法：

先引入兼容脚本

<!--[if IE 6]><script src="js/DD_belatedPNG.js"></script><![endif]-->

对需要处理的类使用脚本，下文是对.ie6png类起作用。

<script>

window.onload=function(){

	if(navigator.userAgent.indexOf("MSIE 6.0") > 0) {

	 	DD_belatedPNG.fix(".ie6png,.ie6png:hover");

	}

}

</script>

ie6下png格式图片透明位置为白色

其他浏览器正常

给出相关解决代码:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>ie6png透明</title>

<!--[if IE 6]><script src="js/DD_belatedPNG.js"></script><![endif]-->

<script>

window.onload=function(){

	if(navigator.userAgent.indexOf("MSIE 6.0") > 0) {

	 	DD_belatedPNG.fix(".ie6png,.ie6png:hover");

	}

}

</script>

<style>

  div{width: 600px;height: 500px;background:url(img/woman.png);}

</style>

</head>

<body style="background:#000;">

<img src="img/woman.png" class="ie6png"/><!--  图片形式 -->

<div class="ie6png"></div> <!-- 背景形式 -->

</body>

</html>

方案2：

技巧-png透明滤镜

利用滤镜实现png图在IE6下透明

_background:none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/woman.png')

注意：

用滤镜使png在ie6下透明后就不能对背景图片进行定位，譬如background里的left right top bottom center就不起作用了，所以在做这类背景的时候最好定一个外框和图片尺寸一致，这样就不会因为定位出现浏览器兼容问题！

给出相关解决代码:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>png透明滤镜</title>

<style>

body{background:#000;margin:0;font-size:16px;font-family:"微软雅黑";color:#ff0000;padding:100px;line-height:40px;text-indent:2em;}

.demo{background:url(img/woman.png) no-repeat center center;width:214px;height:377px;_background:none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='img/woman.png')}

</style>

</head>

<body>

<div class="demo"></div>

用滤镜使png在ie6下透明后就不能对背景图片进行定位，譬如background里的left right top bottom center就不起作用了，所以在做这类背景的时候最好定一个外框和图片尺寸一致，这样就不会因为定位出现浏览器兼容问题！

</body>

</html>

问题情景

让ie低版本支持css3属性box-shadow，border-radius，text-shadow

让ie8以下低版本浏览器支持CSS3属性box-shadow，border-radius，text-shadow

解决办法：

引用兼容脚本，注意要先引入jq库，对.box类起作用。

<script src="js/jquery-1.4.2.min.js"></script>

<!--[if lt IE 9]>

<script type="text/javascript" src="js/PIE_IE678.js"></script>

<![endif]-->

<script>

$(function() {

    if (window.PIE) {

        $('.box').each(function() {

            PIE.attach(this);

        });

    }

});

</script>

ie6没有文字阴影，盒子阴影和圆角效果

其他浏览器正常

给出相关解决代码:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>让ie低版本支持css3属性</title>

<script src="js/jquery-1.4.2.min.js"></script>

<!--[if lt IE 9]>

<script type="text/javascript" src="js/PIE_IE678.js"></script>

<![endif]-->

<script>

$(function() {

    if (window.PIE) {

        $('.box').each(function() {

            PIE.attach(this);

        });

    }

});

</script>

<style>

.box{width:900px;margin:0px auto;border:1px solid #ccc;overflow:hidden;zoom:1;border-radius:10px;-moz-box-shadow: 0 5px 20px #888888;-webkit-box-shadow: 0 5px 20px #888888;box-shadow: 0 5px 20px #888888;margin:30px auto;overflow:hidden;-ms-border-radius:10px;height:50px;background:#fff;text-shadow:0 0 5px #000;}

</style>

</head>

<body>

<div class="box">标题</div>

</body>

</html>

IE6/7常用的hack的更多相关文章

常用CSS HACK
常用CSS HACK IE6 3像素bug和双边距bug一样的经典现象: IE6下浮动元素和不浮动元素之间会有3px间隙(3px bug,div.float-left + div.float-non ...
CSS Hack技术介绍及常用的Hack技巧集锦
一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...
CSS Hack技术介绍及常用的Hack技巧
一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CS ...
css中常用的hack
<!DOCTYPE html> <html> <head> <title>Css Hack</title> <style> #t ...
什么是Css Hack？ie6,7,8的hack分别是什么？
针对不同的浏览器写不同的CSS code的过程,就是CSS hack. 示例如下: 1 2 3 4 5 6 7 8 9 10 11 12 #test { width:300px; heig ...
css中使用if条件在各大浏览器(IE6\IE7\IE8)中hack方法解决教程
一个滚动代码,其他浏览器都滚的好好的,就IE出现错误,DIV+CSS if条件hack,这里DIVCSS5为大家介绍针对各大浏览器(IE6\IE7\IE8)中使用if条件hack方法教程,DIV CS ...
IE6,7,8 CSS HACK
1.区别IE和非IE浏览器CSS HACK代码 #divcss5{ background:blue; /*非IE 背景藍色*/ background:red \9; /*IE6.IE7.IE8背景紅色 ...
IE6~9的css hack写法
_color: red; /* ie6 */ *color: red; /* ie6/7 */ +color: red; /* ie6/7 */ color: red\0; /* ie8/9 */ c ...
1.各个浏览器内核？经常遇到的浏览器兼容性有哪些？解决办法？常用的hack技巧？
IE: trident内核 Firefox(火狐):gecko内核 Safari(苹果):webkit内核 Opera(欧鹏):以前是presto内核,现在是Blink内核 Chrome:Blink ...

随机推荐

Yii源码阅读笔记（二十一）——请求处理流程
Yii2请求处理流程: 首先:项目路径/web/index.php (new yii\web\Application($config))->run();//根据配置文件创建App实例,先实例化y ...
LightOj 1278 - Sum of Consecutive Integers（求奇因子的个数）
题目链接:http://lightoj.com/volume_showproblem.php?problem=1278 题意:给你一个数n(n<=10^14),然后问n能用几个连续的数表示; 例 ...
deleteRow
如果是删除某一行的话,直接delete就可以,行数要在删除之前剪掉,否则会崩溃. 但是,如果section要减一的话,是不能删掉section的 Terminating app due to unca ...
Windows7中IIS简单安装与配置(详细图解)
最近工作需要IIS,自己的电脑又是Windows7系统,找了下安装的方法,已经安装成功.在博客里记录一下,给需要的朋友,也是给自己留个备份,毕竟我脑子不是很好使. 一.首先是安装IIS.打开控制面板, ...
小试牛刀C#作为脚本语言执行解密
背景我们知道Unity3d是通过C#脚本语言的形式来实现游戏的逻辑代码编写,同样SCOTT服务器也设置了通过C#脚本来实现游戏逻辑,但是本文并不是想真正分析解密他们的运行机制,只是想通过自己的一个需 ...
node与Elment以及子节点childrenNode与children的区别(2)
测试代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
html5中的clip
定义和用法 clip() 方法从原始画布中剪切任意形状和尺寸. 提示:一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域).您也可以在使用 clip() 方法前通 ...
PHP安全性
一.防sql注入用户通过输入完整的字符,来和sql语句拼接成带有破坏性的sql语句,服务器执行该语句,造成破坏. 1使用mysql_real_escape_string()过滤数据,该方法在未来版本 ...
Qt之键盘讲解
QWSInputMethod详解注意:这个类不仅仅在嵌入式环境下有效一个输入法包括了过滤器和可选的图形界面,用来过滤服务器和客户端应用程序之间的输入事件. 创建自定义的输入法,需要得自QWSIn ...
ECMAScript 6教程 (一)
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为 http://www.cnblogs.com/jasonnode/ .该系列课程是 ...

IE6/7常用的hack

hack基础：

1、屏蔽IE浏览器（也就是IE下不显示）

2、仅IE7识别hack

3、IE6及IE6以下识别CSS HACK

4，仅IE6不识别div hack

5、仅IE6识别支持

6、仅IE6与IE5不识别

7、仅IE5不识别

8、盒模型解决方法

10、截字省略号

11、只有Opera识别

bug-IE67下li的4px间隙

图片下的空隙

bug-IE6下的双边距BUG

IE6-png透明

技巧-png透明滤镜

让ie低版本支持css3属性box-shadow，border-radius，text-shadow

IE6/7常用的hack的更多相关文章

随机推荐

热门专题