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 ...
随机推荐
- asp.net identity 2.2.0 中角色启用和基本使用（六）
创建用户管理相关视图 第一步:添加视图 打开UsersAdminController.cs 将鼠标移动到public ActionResult Index()上 右键>添加视图 系 ...
- The Python Tutorial
1. >>> print('C:\some\name') # here \n means newline! C:\some ame >>> print(r'C:\s ...
- nginx优化 突破十万并发
一.一般来说nginx 配置文件中对优化比较有作用的为以下几项: 1. worker_processes 8; nginx 进程数,建议按照cpu 数目来指定,一般为它的倍数 (如,2个四核的cpu ...
- HTTPS与强制门户
强制门户 http://www.whatis.com.cn/word_5182.htm 强制网络门户(captive portal)是一个Web页面,它是使用公共访问网络的用户在被授予访问权限前必须访 ...
- 史上最全的SpringMVC学习笔记
SpringMVC学习笔记---- 一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于Spring ...
- Redis linux 下安装 及扩展配置
1.首先在/usr/local/ 创建文件夹 reids Cd /usr/local/ mkdir redis 2.把redis安装包放在redis目录下面进行解压phpredis-2.2.4.tar ...
- IIS7 应用程序池设置成 经典 v2.0
HTTP 错误 500.21 - Internal Server Error 处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipe ...
- jQuery----函数和选择器
1. $(document).ready 几乎所有的jQuery代码都是以如下方式开始的 $(document).ready(function() { Do something }); $(docum ...
- Excel应该这么玩——4、命名区域：搞定下拉框
前三篇都是讲的给Excel元素命名,本篇再介绍一种命名的使用方式:命名区域.区域是多个单元格的集合,可以是单行.单列或者类似表格的单元格矩阵,也可以是不连续的多个单元格,但很少用到.当然,一个单元格也 ...
- Session与cookie的区别？
1.cookie 是一种发送到客户浏览器的文本串句柄,并保存在客户机硬盘上,可以用来在某个WEB站点会话间持久的保持数据. 2.session其实指的就是访问者从到达某个特定主页到离开为止的那段时间. ...