2009年08月14日

一些常用兼容性CSS技巧记录

1
2
/* 1 鼠标经过指针显示为手型 */
cursor:pointer;
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
/* 2 透明层里的层都透明,要把不透明的层放在透明层外 */
.opaque {
/* for IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* for IE5-7 */
filter: alpha(opacity=50);
/* for all other browsers */
opacity: .5;
}
/* 3 长单词自动换行(没有任何空格的英文字符和半角标点符号串) */
* {word-wrap:break-word; word-break:break-all;}
/* IE6下对多有标签起作用,ff3.5下只在定宽容器标签中(比如p、div)有效,
而非容器标签或非定宽容器标签中无作用 */


/* 4 li在ie和firefox下的兼容性问题 */
/*
两点因素:
1).在ie下如果为li指定高度可能会出现排版错位,用line-height即可。
2).ie下list-style-position默认为inside,firefox默认为outside,css中指定为outside即可解决兼容性问题。
*/


/* 5 IE加注释段尾重影bug */
在段末加入
<p style="padding: 0; margin: 0;">&nbsp;</p>

/* 6 使链接点击没有边框 */
a:focus {outline:none}  /* ie8+, 其他浏览器 */
<a href=”#” hidefocus=”true” >hidefocus</a>  /* ie6/7 */
/* 不要使用<a href="#"  onfocus="this.blur()">this blur</a>,
否则按Tab键到该链接光标将跳回到第一个链接,影响盲人阅读 */

 

Views – 1984

分享到:
Copyright © 2009 流水孟春 版权所有
Web技术,LAMP,Nginx,Web2.0,前端技术
Powered by WordPress & UI Designed by 流水孟春