IE6/7常用的hack
来源:互联网 发布:131458查询淘宝账号 编辑:程序博客网 时间:2024/04/30 16:23
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做样式的时候就可以采用这个HACK3、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.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
- IE6/7/8/9的CSS HACK
- ie6,7 ff hack
- ie6 7css hack
- ie6的padding属性hack
- IE8 IE6 IE7 的 HACK
- IE6、7经典hack问题
- ie6、7、8 css hack
- CSS hack 属性的使用(兼容IE6、7、8、9)
- CSS hack是什么?IE6\7\8\9\10浏览器的CSS hack大全介绍
- CSS hack是什么?IE6\7\8\9\10浏览器的CSS hack大全介绍
- CSS hack是什么?IE6\7\8\9\10浏览器的CSS hack大全介绍
- ie6+ hack
- 常用CssHack的写法(IE6-9)以及主流浏览器hack写法
- 常用CssHack的写法(IE6-9)以及主流浏览器hack写法
- CSS HACK收集:在IE6下hack的方法详解
- FF, IE6, IE7的CSS hack
- IE6 IE7 Firefox 的CSS hack区分
- java.lang.ClassNotFoundException: org.springframework.transaction.interceptor.TransactionInterceptor
- 一个“蝇量级” C 语言协程库
- linux 安装ubuntu出现的问题及解决方法
- NYOJ 开心的小明
- 单点登录(五):SSL相关知识
- IE6/7常用的hack
- apache2.2.22 configuration error: couldn't perform authentication. AuthType not set!: /
- 用高版本vs编译旧VC代码时,如何处理无法从“const char [10]”转换为“LPCWSTR”的错误
- JavaScript——AJAX
- 为什么把中断分为两部分来处理
- MySQL字符集转换思路
- CSS3的一些新特性
- github README.md添加图片
- 高效程序猿之(一)VS2010快速生成代码模板