[转]常见的CSS兼容性问题。

标签: | 发表时间:2011-08-22 16:00 | 作者:chajn
出处:http://blog.csdn.net/chajn

总体的来说就是:*_*+识别,IE专用的条件注释,对象的实际宽度不同,消除ul、ol等列表的缩进,透明,圆角,Select控件永远处于最上层,居中问题text-align、margin: auto,浮动后IE6解释外边距为实际边距的双倍加上display:inline,字体大小,空格大小。

---------------

1.CSS中几种浏览器对不同关键字的支持,可进行浏览器兼容性重复定义
!important 可被FireFox和IE7识别
* 可被IE6、IE7识别
_ 可被IE6识别
*+ 可被IE7识别
2.IE专用的条件注释

<!--其他浏览器 -->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<!-- 适合于IE7 -->
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if lte IE 6]>
<!-- 适合于IE6及一下 -->
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
3. 几个浏览器对实际像素的解释
IE/Opera:对象的实际宽度 = (margin-left) + width + (margin-right)
Firefox/Mozilla:对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)
4.鼠标手势问题:FireFox的cursor属性不支持hand,但是支持pointer,IE两个都支持;所以为了兼容都用pointer
5.FireFox中设置HTML标签的Style属性时,所有位置、宽高和尺寸值必须后跟px,IE也支持此写法,因此统一加px单位。如 Obj.Style.Height = imgObj.Style.Height + ‘px’;
6.FireFox无法解析简写的padding属性设置,如padding 5px 4px 3px 1px;必须改为 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px0;
7.消除ul、ol等列表的缩进时,样式应写成:list-style:none;margin:0px;padding:0px;其中margin属性对IE有效,padding属性对FireFox有效
8.CSS控制透 明:IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60);                                FireFox:opacity:0.6;
9.CSS控制圆角:IE:不支持圆角;
FireFox: -moz-border-radius:4px;或
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius- bottomright:4px;
10.CSS双线凹凸边框:IE:border:2px outset;
FireFox:
-moz-border-top-colors: #d4d0c8 white;
-moz-border-left-colors: #d4d0c8 white;
-moz-border-right-colors:#404040 #808080;
-moz-border-bottom-colors:#404040 #808080;
11.IE支持CSS方法cursor:url()自定义光标样式文件和滚动条颜色风格;FireFox对以上两者均不支持
12.IE有Select控件永远处于最上层的bug,且所有CSS对Select控件都不起作用
13.IE支持Form中的Label标签,包括图片和文字内容;FireFox不支持包含图片的Label,点击图片不能让标记 label for 的Radio或CheckBox产生效果
14.FireFox中的TextArea不支持onScroll事件
15.FireFox不支持display的inline和block
16.FireFox对Div设置margin-left, margin-right为auto时已经居中, IE中不行
17.FireFox对Body设置text-align时, Div需要设置margin: auto(主要是margin-left margin-right) 方可居中
18.对超链接的CSS样式设置最好遵从这样的顺序:L-V-H-A。即
<style type="text/css">
<!-- 
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>
这样可以避免一些访问过后的超链接就不具备hover和active样式了
19.IE中设置长段落自动换行在CSS中设置word-wrap:break-word。
20.在子容器加了浮动属性后,该容器将不能自动撑开
解决方法:在标签结束后下一个标签中加上一个清除浮动的CSS clear:both;
22.IE6下图片下方会有空隙
解决办法:为img加上display:block或设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom
23.IE6下两个层中间有空隙
解决办法:设置右侧div也同样浮动float:left或者相对IE6定义 margin-right:-3px;
24.LI中内容超过长度后以省略号的显示方法
<style type="text/css">
<!--
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
-->
</style>
25.将元素的高度和行高设为相同值,即可垂直居中文本
<style type="text/css">
<!--
div {
height:30px;
line-height:30px;
}
-->
</style>
26.对齐文本与文本输入框,须在CSS中增加vertical-align:middle;属性设置
<style type="text/css">
<!--
… …
vertical-align:middle;
}
-->
</style>
27.支持WEB标准的浏览器设置了固定高度值就不会像IE6那样被撑开,但是又想设置固定高度又想能够被撑开呢?解决办法是去掉height属性而设置min-height,为了兼容不支持min-height的IE6可以这样定义:
{
height:auto!important;
height:200px;
min-height:200px;
}
28.web标准中IE无法设置滚动条颜色
解决办法:在CSS中对body的设置改为对html的
<style type="text/css">
<!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
</style>
29.IE6由于默认行高问题无法定义1px左右高度的容器,
解决办法:在CSS中对容器设置如:overflow:hidden | zoom:0.08 | line-height:1px
30.给Flash设置透明属性可使层显示在Flash之上
<param name="wmode" value="transparent" />         <!-- 解决IE上的问题 //>
<embed wmode="transparent" …… >                     <!-- 解决FireFox上的问题 //>
31.FireFox设置Padding属性后会相应的增加Width和Height属性值,IE不会
解决办法:用!important方法多定义一套Height和Width
32.FireFox对div与div之间的空格是忽略的,但IE是处理的;因此尽量在两个相连的div之间不要有空格和回车,否则可能会造成不同浏览器之间格式不正确,比如著名的3px偏差;而且原因很难查明
33.形如如下格式
<div id="parent">
<div id="content"> </div>
</div>
当Content内容多时,即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展;解决办法在层的最下方产生一个高度为1的空格,代码如下
<div id="parent">
<div id="content"> </div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>
34.IE和FireFox对字体small的尺寸解释不同,FireFox为13px,IE中为16px
35.IE和FireFox对空格的尺寸解释不同,FireFox为4px,IE中为8px
36.在netvibes的CSS看到一个片断
.transparent{
filter:alpha(opacity=12);
-moz-opacity:0.12;
opacity:0.12;
background-color:#000;
}
filter:alpha(opacity=12); 支持IE
-moz-opacity:0.12; 支持FF
opacity:0.12; css 3标准

作者:chajn 发表于2011-8-22 16:00:29 原文链接
阅读:95 评论:0 查看评论

相关 [常见 css 兼容性] 推荐:

[转]常见的CSS兼容性问题。

- - ChaJn To The Dream
总体的来说就是:*_*+识别,IE专用的条件注释,对象的实际宽度不同,消除ul、ol等列表的缩进,透明,圆角,Select控件永远处于最上层,居中问题text-align、margin: auto,浮动后IE6解释外边距为实际边距的双倍加上display:inline,字体大小,空格大小. 1.CSS中几种浏览器对不同关键字的支持,可进行浏览器兼容性重复定义.

CSS对浏览器的兼容性

- - CSDN博客Web前端推荐文章
从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于浏览器的兼容性问题,请尽量用符合W3C标准格式写代码. 而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名,并且需要写到页面的最上面. input、br、img等为常用自闭合标签,需要加入“/”进行闭合,例如“”;其他闭合标签需要进行闭合,例如“
....
”.

EDM邮件中的html/css兼容性问题

- - ria之家--RIA三部曲:jquery、ext、flex
最近需要配合用研同学做个问卷调查的邮件模板,表现形式不是纯文本,需要有美观的布局和多彩的内容,也就是说邮件里面需要用html/css来表现内容. 这种应用已经非常普遍了,如今邮箱里面充斥着各种facebook动态、团购网站推荐、支付宝提醒等等的富文本邮件,这就是EDM(Email Direct Marketing )电子邮件营销,那如何利用html/css/js更好地在邮件客户端(web邮箱就不讨论了)中表现富文本内容呢.

CSS HACK:IE6、IE7、IE8、Firefox兼容性问题解决方案

- - 博客园_首页
1.区别IE和非IE浏览器. background:blue; /*非IE 背景藍色*/. background:red \9; /*IE6、IE7、IE8背景紅色*/. 2.区别IE6,IE7,IE8,FF. 【区别符号】:「\9」、「*」、「_」. background:blue; /*Firefox 背景变蓝色*/.

常见浏览器兼容性问题与解决方案

- - 浏览器 - 互联网 - ITeye博客
浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同. 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 解决方案:CSS里 *{margin:0;padding:0;}. 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0.

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形,你可以自由地修改文中的CSS代码. 经测试,IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.

用 Compass 寫 CSS

- Jay - Blog.XDite.net
最近在開發一個新產品,整體來說應該是接近寫完了,不過越接近完工,抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass,說這東西超神奇,超好用,還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了,只是文件實在看起來太他媽的眼花繚亂,因為專案進度一直在跑,不太敢貿然換掉寫 CSS 的方式.

CSS 入门

- - 博客 - 伯乐在线
级联样式表非常简单,也就是 (X)HTML 网页之上的分层设计. 使样式表 “级联”,这样您就可以跨站点应用它 — 也就是说,将样式应用到网站,它就会自行应用到每个网页的每个元素. ●XHTML:可扩展 HTML. 对于网站,将数据与设计分离是一个重要的概念:数据使用 (X)HTML 发送到 浏览器,而设计使用 CSS 应用到该数据.

css 圆角

- - CSDN博客推荐文章
作者:kangquan2008 发表于2012-2-20 22:32:24 原文链接. 阅读:6 评论:0 查看评论.

CSS架构

- - 博客 - 伯乐在线
英文原文: CSS Architecture,编译: CSDN-张红月. Philip Walton 在AppFolio担任前端工程师,他在Santa Barbara on Rails的聚会上提出了CSS架构和一些最佳实践,并且在工作中一直沿用. 擅长CSS的Web开发人员不仅可以从视觉上复制实物原型,还可以用代码进行完美的呈现.