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 ...
随机推荐
- jqxGrid 绑定格式化
var cellsrenderer = function(row, columnfield, value, defaulthtml, columnproperties) { ) || (row == ...
- 分类指标准确率(Precision)和正确率(Accuracy)的区别
http://www.cnblogs.com/fengfenggirl/p/classification_evaluate.html 一.引言 分类算法有很多,不同分类算法又用很多不同的变种.不同的分 ...
- 我的AngularJS 学习之旅(二)
记得某位大神说过,"时间就像海绵里的水,挤挤总是有的.".大多时候,与其说我是很忙而没时间去做自己想做的事, 倒不如说是懒得去做罢了. 废话不多说,接前一篇继续吧 3.3 指令(D ...
- 20145320《Java程序设计》第4周学习总结
20145320<Java程序设计>第4周学习总结 教材学习内容总结 第六章 继承与多态 继承 继承作为面向对象的第二大特征,避免多个类间重复定义共同行为.即当多个类中存在相同属性和行为时 ...
- sprint3终极演示
目标功能: 已实现功能: 首页.订单.资料界面 首页.订单.资料按钮 化妆师.化妆品.化妆视频按钮 化妆师.化妆品的详细分类 化妆师.化妆品的详细信息显示 化妆师的预约按钮和联系按钮 化妆品的购买按钮 ...
- Git使用方法
一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是自己的电脑,所以 ...
- 夺命雷公狗-----React---9--map数据的遍历
比如我们要实现的是这种效果: 用这种方法来写,她只能写死在哪,没啥意思,所以我们定义一个数据,然后来测试下map方法对她遍历出来的数据 <!DOCTYPE html> <html l ...
- cpp异常详解
1. 异常介绍 在函数在执行过程中如果碰到对错误的处理可以有两种方式, 1. 返回错误,2. 使用异常. 如果作为函数的调用者想要知道具体的错误信息, 就需要维护一套错误列表, 或者用string类型 ...
- Repeater控件三层嵌套-内层Repeater添加绑定事件
用Repeater三层嵌套,最外层Repeater可以生成自己的ItemCommand事件.但接下来中间层因为是嵌套了的,所以无法在属性窗口中生成自己的事件.如果手动敲入则无效. 解决办法是需要通过编 ...
- MSDeploy
http://blogs.iis.net/jamescoo/default.aspx Web Deployment Tool Now Works With Credential Store Feb ...