IE6/7常用的hack
hack基础：
IE6：_selector{property:value;}selector{property:value;property:value !important;} //IE6 不支持同一选择符中的 !importantIE7：+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浏览器做单独的设定。
问题情景：
ie6和ie7不支持块元素的“inline-block"属性
有的时候我们需要使用”display: inline-block“来让元素显示在一行。这效果除了ie6,ie7（再低的版本我没有测试），其他浏览器都是可以实现的。
分析原因：ie6,7不支持该属性是因为”display: inline-block“属性触发了ie的layout，但如果是行内元素将：display: inline-block”，在ie6,7下是没有问题的。
解决办法：
为有问题的元素后面添加以下代码即可。
*display:inline;zoom:1;ie6,7下效果无效
其他浏览器正常
给出相关解决代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title> </title><style>/* 可使用float:left; display:inline;代替display:inline-block;能很好的解决这种不兼容问题。*/
ul{list-style-type: none}ul li{display: inline-block;*display:inline;zoom:1;}div{width: 50px;height: 50px;background: #000;margin-right: 10px;display: inline-block;*display:inline;zoom:1;}span{ display: inline-block;width: 50px;height: 50px;float: left;background: red;margin-left: 10px;}</style>
</head>
<body><ul><li><a href="#" class="cur">home</a></li><li><a href="#">features</a></li><li><a href="#">about</a></li><li><a href="#">services</a></li><li><a href="#">work</a></li><li><a href="#">blog</a></li><li><a href="#">gallery</a></li><li><a href="#">contact</a></li></ul><div> </div><div> </div><div> </div><span></span><span></span><span></span></body>
</html>以上是大多数人常用的解决方法，但是我觉得不是最好的。话说是可以解决块元素的”display: inline-block“属性问题了，但是当前面后者后面是行内元素的时候，不管它是在html中拥有”display: inline-block“属性的行内元素之前还是之后，在其他浏览器中行内元素都跑到他的前面。Ie6 7还还算正常了，但是再增加多几个拥有”display: inline-block“属性的行内元素效果就变得异常奇葩了。
反正几个不同的种类元素，显示就是这么的奇葩，但是网页中这中情况不多见，大家看情况选择解决方式了，个人建议用“float”来代替“display: inline-block”。
用以上办法解决的效果：
ie6,7:
其他浏览器：
最佳解决方法---见代码-
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title> </title><style>/* 为有问题的元素后面添加display:inline;zoom:1即可。*/
ul{list-style-type: none}ul li{display: inline-block;/**display:inline;zoom:1;*/float: left;}div{width: 50px;height: 50px;background: #000;margin-right: 10px;display: inline-block;/**display:inline;zoom:1;*/float: left;}span{ display: inline-block;width: 50px;height: 50px;float: left;background: red;margin-left: 10px;float: left;}</style>
</head>
<body><ul><li><a href="#" class="cur">home</a></li><li><a href="#">features</a></li><li><a href="#">about</a></li><li><a href="#">services</a></li><li><a href="#">work</a></li><li><a href="#">blog</a></li><li><a href="#">gallery</a></li><li><a href="#">contact</a></li></ul><div> </div><div> </div><div> </div><span></span><span></span><span></span></body>
</html>总结：float不仅仅是布局利器，也是改变行内元素为块元素的好方法。
问题情景：
Ie6不支持容器div的“max-width"属性：
- 实现最小宽度：ie7+可以实现，但ie6不支持，ie6可用_width:expression((documentElement.clientWidth < 300) ? "300px" : "auto" );
- 最大宽度：ie7+可以实现，但ie6不支持，ie6可用 _width:expression((documentElement.clientWidth > 600) ? "600px" : "auto" );
见代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>min-width/max-width</title>
<style type="text/css">
div
{margin:20px auto;background-color:#f0f6f9;border:1px solid #606669;
}
#div1
{min-width:300px;_width:expression((documentElement.clientWidth < 300) ? "300px" : "auto" );
}
#div2
{max-width:400px;_width:expression((documentElement.clientWidth > 600) ? "600px" : "auto" );
}
</style>
</head>
<body>
<div id="div1">这里是测试如何实现最小宽度的div元素，你可以拖动窗口尺寸试试.对于ie6来说，如我我们设定一个宽度，超出这个宽度时会撑开容器的，所以起到一个min-width的作用。
</div>
<div id="div2">这里是测试如何实现最大宽度的div元素.
</div>
</body>
</html>问题情境
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.οnlοad=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.οnlοad=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相关推荐
- html 常见hack,常用CSS HACK问题及解决代码
1.樊篱IE阅读器(也等于IE下不展示) *:lang(zh) select {font:12px !important;} /*FF的专用*/ select:empty {font:12px !im ...
- VUE常用问题hack修改
vue-router router这里踩的坑主要是组件的重用.构建单页面大型应用的话,肯定要开启组件的缓存的,因为一般会要求后退的时候不要重新加载页面,而且要记住原始的滚动位置. 首先,引入route ...
- 兼容各大主流浏览器的常用CSS Hack汇总
.element{ color:#000; //w3c标准 [;color:#f00;]; //Webkit(chrome和safari) color:#666\9; //E8 *color ...
- IE6 IE7 IE8 IE9 IE10 Css hack及IE条件注释法
IE浏览器的csshack写法和IE条件注释语句 IE css hack 网络上有很多针对IE的css hack写法,但很多都缺乏实际的实战经验,今天我把我测试的结果来给大家分享下,注意:你们最好还是 ...
- html4.0.1兼容ie7,CSS 完美兼容IE6/IE7/FF的通用hack方法
CSS 完美兼容IE6/IE7/FF的通用hack方法 发布时间:2009-03-20 00:27:16 作者:佚名 我要评论 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. ...
- css hack 学习总结
css hack CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是 同一厂商的浏览器的不同版本,如IE ...
- CSS Hack汇总(转载)
CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助. 现在浏览器的 ...
- [css] 什么是hack？css的hack有哪些？
[css] 什么是hack?css的hack有哪些? 一.总结 1.CSS hack:由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chr ...
- js统计html页面访问的次数6,JS综合篇--[总结]Web前端常用代码片段整理
IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. 条件注释只能用于IE5以上,IE1 ...
最新文章
- Repeater嵌套绑定Repeater[转]
- Errors occurred during the build
- 下沉市场消费升级静悄悄？
- base64编码 springboot_Spring Boot 中如何实现 HTTP 认证？
- 个人觉得不错的网站或文章
- 2021年慈溪横河中学高考成绩查询,慈溪中学
- LeetCode之Nim Game
- LeetCode38.报数
- Dirichlet过程混合模型(DPMM)的Gibbs抽样程序
- 第 0 章 阳哥MySQL高级
- php $表达式,PHP表达式概念及实例详解
- SQL Server 2005 中的客户端 XML 处理
- 传感器的定义、构成、分类
- github+hexo搭建博客（一）
- linux lua 编译 开发,Linux CentOS 编译LUA。。搞半天终于对了= =
- 火山软件开发访问网页查找电话号和读写文件应用
- 富文本编辑器内容存储至Mysql
- java歌词解析器_Java LRC 歌词解析
- Windows系统C语言代码一览
- linux中怎么修改用户组名,Linux 下如何修改用户名（同时修改用户组名和家目录）...