IE6/7常用的hack
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;
<!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>
图片下的空隙
<!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
解决办法:
<!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透明
<!--[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>
<!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>
技巧-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
<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 ...
随机推荐
- php如何遍历多维的stdClass Object 对象，php的转换成数组的函数只能转换外面一丛数组
php如何遍历多维的stdClass Object 对象,php的转换成数组的函数只能转换外面一丛数组 (2012-09-10 19:58:49) 标签: 杂谈 分类: 网页基础知识 php如何遍历多 ...
- Linux下安装vsftpd
一.安装vsftpd及相关依赖包 #vsftpd安装程序 yum install vsftpd #vsftpd虚拟登陆账户必要依赖包 yum install pam* db4* 安装完之后,vsftp ...
- PHP unset 后恢复数组索引
unset($arr[3]); $arr = array_values($arr); array_values() 函数返回一个包含给定数组中所有键值的数组,但不保留键名,被返回的数组将使用数值键,从 ...
- Python学习【第二篇】Python入门
Python入门 Hello World程序 在linux下创建一个叫hello.py,并输入 print("Hello World!") 然后执行命令:python hello. ...
- Ruby 类案例
#!/user/bin/ruby # -*-coding:UTF-8-*- class Customer @@no_of_customers=0 def initialize(id,name,addr ...
- Trace-跟踪高消耗的语句需添加哪些事件
通常接手一台数据库服务器后,我们会开启Profiler跟踪来了解SQL Server的繁忙情况.我们首先会想到的是监控CPU或Duration超过某一阈值的语句/过程.那么所创建的Trace添加哪些事 ...
- px、em、rem区别介绍
px.em.rem区别介绍 PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能 ...
- RDIFramework.NET 框架兼容各种数据库类型事务使用范例参考
RDIFramework.NET 框架兼容各种数据库类型事务使用范例参考 RDIFramwork.NET框架对数据库的事务做了很好的控制,对多表或多条语句需要在同一事务执行提供了很好的支持,同时支持任 ...
- NULLIF()函数使用讲解
NULLIF()函数接受两个参数.如果它们相等,那么返回空值:否则,返回第一个参数. 等价于下面的表达式: case when expression1=expression2 then null el ...
- Scrum项目4.0
4.0----------------------------------------------- 1.准备看板. 形式参考图4. 2.任务认领,并把认领人标注在看板上的任务标签上. 先由个人主动领 ...