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 ...
随机推荐
- J2EE用户CPU占用过大后的分析过程
1.找到最耗CPU的java线程ps命令 命令:ps -mp pid -o THREAD,tid,time 或者 ps -Lfp pid 结果展示: 2.可以获取到 ...
- smaller programs should improve performance
COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION In this section, we l ...
- 使用Mongo官方驱动操作Mongo数据库
首先到 https://github.com/mongodb/mongo-csharp-driver/downloads 下载Mongo官方驱动 下载完成后引用到项目中 public class Co ...
- favicon.ico的制作
1.选取需要的图片(jpg的格式等) 2.在网上搜索favicon.ico的制作,将jpg转为ico 3.在html中输入<link rel="shortcut icon" ...
- Inside Flask - signal 信号机制
Inside Flask - signal 信号机制 singal 在平常的 flask web 开发过程中较少接触到,但对于使用 flask 进行框架级别的开发时,则必须了解相关的工作机制.flas ...
- Android ListView 子控件点击事件
android:descendantFocusability beforeDescendants:viewgroup会优先其子类控件而获取到焦点 afterDescendants:viewgroup只 ...
- [PCL]FPFH描述子
fpfh_est.setSearchSurface(data); 如果没有设置SearchSurface,使用input数据集作为查找的表面 // If no search surface has b ...
- 微信的redirect_uri参数错误原因分析
我们可以根据微信的开发者文档 http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html 网页授权获取用户验证这一章来 ...
- 11.写一个函数，尽可能高效的，从一个标准 url 里取出文件的扩展名
//首先列出需要被操作的url $url_path = "http://www.sina.com.cn/abc/de/fg.php?id=1"; 方法一: ...
- 大型网站演化（转载 http://homeway.me/2014/12/10/think-about-distributed-clusters/）
0x01.大型网站演化 简单说,分布式是以缩短单个任务的执行时间来提升效率的,而集群则是通过提高单位时间内执行的任务数来提升效率. 集群主要分为:高可用集群(High Availability Clu ...