forked from wteam-xq/testDemo
-
Notifications
You must be signed in to change notification settings - Fork 1
/
IESupport.html
208 lines (185 loc) · 12.2 KB
/
IESupport.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html>
<head>
<title>
低版本浏览器兼容相关
</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"/>
<meta http-equiv="content-type" content="charset=utf-8">
<!-- <script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script> -->
<!--[if lt IE 7]>
<script type="text/javascript" src="lib/unitpngfix/unitpngfix.js"></script>
<![endif]-->
<!-- IE6 png透明最佳实现库// <script type="text/javascript" src="lib/fixedpng.js"></script> -->
<script type="text/javascript" src="utils/client.js"></script>
<style>
/* 透明背景(黑色) */
.opactiyBg10{background: rgba(0,0,0,.1); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#11000000,endColorstr=#11000000);}
.opactiyBg20{background: rgba(0,0,0,.2); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#22000000,endColorstr=#22000000);}
.opactiyBg30{background: rgba(0,0,0,.3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3d000000,endColorstr=#3d000000);}
.opactiyBg40{background: rgba(0,0,0,.4); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#5b000000,endColorstr=#5b000000);}
.opactiyBg50{background: rgba(0,0,0,.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7d000000,endColorstr=#7d000000);}
.opactiyBg60{background: rgba(0,0,0,.6); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#95000000,endColorstr=#95000000);}
.opactiyBg70{background: rgba(0,0,0,.7); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#aa000000,endColorstr=#aa000000);}
.opactiyBg80{background: rgba(0,0,0,.8); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#bb000000,endColorstr=#bb000000);}
.opactiyBg90{background: rgba(0,0,0,.9); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#dd000000,endColorstr=#dd000000);}
.t3_wrap{ margin:20px 0px; width:400px; height:200px; background:#8DD9E7; position: relative; overflow: hidden; }
.t3_wrap ul{ height:auto; width:100%; }
.t3_wrap li{ display: inline-block; *zoom:1; *display: inline; }
.png-pos{ background: url('images/icon_user.png') no-repeat; width:63px; height:16px; }
.t8_wrap{ margin:20px 0px; width:200px; height:100px; background:#8DD9E7; position: relative; opacity:0.6; filter:alpha(opacity=60); }
.t8_ab{ width:20px; height:20px; background:#000; position: absolute; top:-10px; left:20px; }
.t8_2_wrap_cont{ height: 400px; width:600px; margin:0 auto; position: relative; }
.t8_2_wrap_cont .t8_2_wrap_bg{ position:absolute; z-index: 0; width:600px; height:400px; top:0px; left:0px; }
.t8_2_wrap{ width:500px; height:400px; position: relative; zoom:1; z-index: 3; margin:0 auto; }
.t8_2_wrap .next_page_btn,
.t8_2_wrap .prev_page_btn{ width:20px; cursor:pointer; position: absolute; top:0; height:100%; line-height: 100%; *height:400px; *line-height:400px; display: block; }
.t8_2_wrap .next_page_btn{ right:-50px; z-index:3; }
.t8_2_wrap .prev_page_btn{ left:-50px; z-index:3; }
.t8_2_wrap .box_list_wrap{ z-index: 1; *position: relative; overflow: hidden; width:100%; height:100%; float:left; background-color:#000; }
.tb_tip{ padding:20px 5px; }
.t15_wrap{ width:500px; height:200px; }
.t15_a, .t15_b{ width:250px; height:20px; margin:10px auto; }
.t15_wrap .t15_a{ background-color:#8eb7be; color:#fff; }
.t15_wrap .t15_b{ background-color:#fdcc5e; color:#000; }
.t15_wrap .t15_a.un_use{ color:#149399; background-color:#8eb7be; }
.t15_wrap .t15_b.un_use{ color:#eea902; cursor:default; }
.t2_wrap{ width:500px; height:200px; position: relative; }
.t2_wrap .t2_a{ display: block; position: absolute; }
.t2_wrap .t2_a:hover{ zoom:1; }
.t2_wrap .t2_a .t2_a_txt,
.t2_wrap .t2_a .t2_a_content{ display: none; }
.t2_wrap .t2_a:hover .t2_a_txt,
.t2_wrap .t2_a:hover .t2_a_content{ display: block; }
/* 关于 \9 更多详情：
* \9 IE8 ~ IE10 都是有效,
* 另： \9 的 hack 是因为 \9 是水平制表符，其他字符如 , \a, \b, \20 都是可以的。
* http://www.zhangxinxu.com/wordpress/2010/04/%E5%8C%BA%E5%88%86ie8ie7ie6%E5%8F%8A%E5%85%B6%E4%BB%96%E6%B5%8F%E8%A7%88%E5%99%A8-css-9hack/
*/
#tip{
background:blue;/*chrome Firefox等背景变蓝色*/
background:red\9;/*IE8背景变红色*/
*background:black;/*IE7背景变黑色*/
_background:orange;/*IE6背景变橘色*/
}
</style>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<h3>低版本浏览器兼容相关</h3>
<div class=""></div>
<div class="png_warp">
<img src="images/icon_user.png" alt="test-png" class="png-img"/>
<!-- 只要出现了 unitPng ，其他没该类名的节点将不处理png图片 -->
<div class="png-pos unitPng"></div>
<div class="png-pos"></div>
</div>
<!-- ie6 ie7常见排列样式 -->
<!-- <div class="t3_wrap">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div> -->
<div class="t8_wrap">
<!-- IE6下 该子节点会被截断 -->
<div class="tb_tip">IE6下灰色小方块会被截断</div>
<div class="t8_ab"></div>
</div>
<!-- IE6下 左右两个按钮可能会无法显示 -->
<div class="t8_2_wrap_cont">
<div class="t8_2_wrap_bg opactiyBg40"></div>
<div class="t8_2_wrap">
<div class="prev_page_btn opactiyBg50"></div>
<div class="next_page_btn opactiyBg50"></div>
<div class="box_list_wrap"></div>
</div>
</div>
<div class="t14_wrap">
<!-- IE6下 可能会出问题 -->
<a href="javascript:void(0);"></a>
<!-- 推荐用法 -->
<a href="####" onclick="return false;"></a>
</div>
<div class="t15_wrap">
<div class="t15_a un_use">IE6，下面的元素样式会被覆盖</div>
<div class="t15_b un_use">IE6，该元素样式会被覆盖</div>
</div>
<div class="t2_wrap">
<a href="#" class="t2_a">
<span>小面的文字hover能显示么？</span>
<div class="t2_a_content">鼠标hover显示</div>
<span class="t2_a_txt">鼠标hover显示2</span>
</a>
</div>
<script>
// 模拟低版本浏览器 安装虚拟机： virtualbox，然后 将文件放置在模拟服务器中让虚拟机配置host访问（同个网段可以相互访问）
// ie developer toolbar 查看某节点对应样式比较方便， firebug lite 则方便脚本操作，例如脚本报错，控制台日志，控制台代码执行等；
// 虚拟机相关教程：http://www.i7086.com/xunijivirtualboxanzhuangwindowscaozuoxitong
/*IE6 PSD图中的透明 均无法正常显示， 实现时得注意*/
var IEObj = {
init: function(){
var This = this;
this.topFunction();
// client是引入 client库后的全局变量
// if (client.browser.ie && parseInt(client.browser.ver, 10) < 7 ){
// invokeFixedPng();
// }
},
topFunction:function(){
var testTopVal = 2;
printLog();
// IE6 IE7函数声明 必须置顶
function printLog(){
// console.log 参见 EcmaScript5.html
try{
console.log('ie6 会报错，因为IE6没有console对象.');
} catch(e){}
}
}
};
IEObj.init();
// IE6下报错， console对象不存在
// console.log('xxxxx');
// 调用fixedpng.js
function invokeFixedPng(){
DD_belatedPNG.fix(".unitPng");
}
// IE兼容日志(IE6 IE7)：
// 1.低版本浏览器，js数组、对象注意不能有多余的“逗号”；
// 例如：var aArray = [{'arg1': '1'}, {'arg2': '2'},]; var aObj = {'arg1': '1',}; 别遗漏最后逗号；
// 2.IE7以下浏览器(主要IE6) 一般标签样式不支持 伪类hover ， 要使在IE5及IE6中也有效，则必须在外面包裹一个a标签且该a标签必须有href属性；
// 3.IE6 IE7下不太支持 inline-block, 反而对浮动支持较好； http://www.cnblogs.com/leejersey/archive/2012/07/11/2586506.html, http://www.cnblogs.com/leejersey/archive/2012/07/11/2586506.html
// IE6 下 inline-block vertical-align 中不是全文字，则无效；
// 4.IE6 下事件处理（参考 utils/base.js EventUtil ）
// 5.getAttribute("class") 在IE下可能无法获取正确类名， IE对应的应该为 getAttribute("className")
// 另：IE下获得float的方式也不同：obj.style.styleFloat=style; （IE） obj.style.cssFloat=style; （非IE）
// 6.position absolute; 在IE6下 定位很容易出问题，给父类zoom:1; 触发layout解决；http://blog.csdn.net/wuchengzhi82/article/details/7730207
// 7.IE6下 line-height 对应节点， 如果不是全文字的话（包含图片/input textarea/select等）会无效, 解决办法：在其中一个非文字对象中添加样式：margin: (容器的line-height - 对象本身的高度)/2px 0; vertical-align:middle;
// 8.IE6下 position:absolute; 如果父节点已经透明显示， 子类超出父节点部分会被隐藏（即使显示优先级 高于任何子节点）；
// 9.IE6下 ；css 三角形需注意背景色、border-style（IE6下, 设置余下三条边的border-style为dashed）, line-height(line-height为零); http://www.cnphp6.com/archives/63736
// 10.IE6下 ；margin 设置为负值无效， 父类添加zoom:1, 自身添加position：relative后方有效；(仍然不行， 就添加 top:-XXpx; 实现)
// 11.IE6下 position: fixed; 无效；absolute替代实现；http://www.cnblogs.com/blosaa/archive/2011/12/29/2305990.html
// 12.IE6下 左浮动（或右浮动）如果是最后一个节点， 则会自动换行；http://www.wangmengyu.cn/?p=139
// 13.IE6下 设置为 display:none;并且生效后的dom节点竟然不消失！！！（神奇，待模拟重现）解决：ie6 下在原有基础上新增样式：visibility:hidden; (还不行就用其他方式隐藏， 例如：宽高为零，绝对定位位置偏移至无法看见的位置；)
// 14.IE6下 a 标签去除默认跳转事件， 常规用法对比：javascript:void(0); 比较常见，但可能会导致问题，最佳方案： <a href="####" onclick="return false;"></a>
// 对应教程：http://segmentfault.com/q/1010000000339082
// 15.IE6下 IE6 CSS类名优先级；CSS多类选择符优先级不起作用，多么的令人气愤啊，经过测试：IE6下这种类组合的优先级不如单个类；（具体看demo）
// 16.IE6 IE7, 块级元素（如:div）如使用：white-space:nowrap;进行强制不换行，需要设置长度才能生效；
// 17.IE6的bug——div绝对定位，相邻的margin-top失效；
// 1、给相邻元素增加一个浮动。
// 2、两个div都设置宽度了，去掉第二个div的宽度，bug即可修复。
// 3、针对IE6： _position:relatvie; _top: xxpx;
// 18.css ie6、ie7、ie8中overflow:hidden无效
// 1.在父元素中使用position:relative;即可解决该bug;
// 2.增加了position:relative还不行的话， 给父元素添加zoom:1；
// 19.IE浏览器处理超出父节点 的子节点跟chrome不同，例如 A_sub 是 A的子节点，且A_sub宽高 比 A 大、A_sub背景色为默认的透明。
// 鼠标移动至A_sub ，chrome firefox 能检测到当前鼠标在A_sub上，而IE（edge 及以下所有IE版本）不能；
// 解决方案： 给A_sub添加背景色 + 设置透明度为零；
</script>
</body>
</html>