最近工作写CSS比较多,写完之后发现问题很多,尤其是浏览器兼容问题,现将学到的和一些总结的写下来。
1、什么是CSS |
Cascading Style Sheets(层叠样式表)的简称.
一种标记语言,它不需要编译,可以直接由浏览器解释执行(属于浏览器解释型语言).
在标准网页设计中负责网页内容的表现.
例如 background-color: red; 被描述的元素的背景颜色为红色。
2、CSS Hack 是什么 |
由于不同的浏览器比如IE6,IE7,火狐等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack!
3、CSS Hack 分类 |
1、CSS类内部Hack
* _ !important等
2、选择器Hack
* html和 *+html等
3、HTML头部引用Hack(if IE)
<!--[if IE 8]>引入CSS<![endif]—>
4、CSS Hack 都有哪些 |
以下列出一些css hack用到的符号,并不是所有,只是当前用这些就足够了。
CSS Hack |
IE6 |
IE7 |
IE8 |
火狐/chrome等 |
* |
√ |
√ |
X |
X |
!important |
X |
√ |
√ |
√ |
- |
√ |
X |
X |
X |
_ |
√ |
X |
X |
X |
+ |
√ |
√ |
X |
X |
\9 |
√ |
√ |
√ |
X |
\0 |
X |
X |
√ |
X |
*注意写法(多数情况下是将hack写在正常CSS属性的下面)
5、区分IE与其他浏览器 |
.class {
color:#F00;
color:#FFFFFF\9;
}
在IE下文字颜色为白色。
在火狐及chrome下文字颜色为红色。
color:#F00;
color:#FFFFFF\9;
}
在IE下文字颜色为白色。
在火狐及chrome下文字颜色为红色。
6、区分IE6与其他浏览器 |
.class {
background-color:#F00;
_background-color :#FFFFFF;
}
只有IE6能够识别 _
在IE6下背景颜色为白色。
在其他浏览器下背景颜色为红色。
background-color:#F00;
_background-color :#FFFFFF;
}
只有IE6能够识别 _
在IE6下背景颜色为白色。
在其他浏览器下背景颜色为红色。
7、支持IE6 & IE7的写法 |
.class {
background-color:#F00;
+background-color :#FFFFFF;
}
在IE6、IE7下背景颜色为白色。
在其他浏览器下背景颜色为红色
background-color:#F00;
+background-color :#FFFFFF;
}
在IE6、IE7下背景颜色为白色。
在其他浏览器下背景颜色为红色
8、选择器Hack的使用 |
#test
{
300px;
height: 300px;
border: 3px solid #0f0;
}
*html #test
{
background-color: #eee; //IE6下可识别
}
*+html #test
{
background-color: #000; //IE7下可识别
}
{
300px;
height: 300px;
border: 3px solid #0f0;
}
*html #test
{
background-color: #eee; //IE6下可识别
}
*+html #test
{
background-color: #000; //IE7下可识别
}
9、HTML头部引用Hack(if IE) |
工作中用到的
<!--[if lt IE 8]>
<link rel="stylesheet" href="/stylesheets/blueprint/ie.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="/stylesheets/app/ie-hack.css" type="text/css" media="screen, projection">
<![endif]--><!--[if IE 6]>
<link rel="stylesheet" href="/stylesheets/app/ie6.css" type="text/css" media="screen, projection">
<![endif]-->
<!--[if IE]> 、<!--[if !IE]> 、<!--[if !IE]>
<!--[if lt IE 8]>
<link rel="stylesheet" href="/stylesheets/blueprint/ie.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="/stylesheets/app/ie-hack.css" type="text/css" media="screen, projection">
<![endif]--><!--[if IE 6]>
<link rel="stylesheet" href="/stylesheets/app/ie6.css" type="text/css" media="screen, projection">
<![endif]-->
<!--[if IE]> 、<!--[if !IE]> 、<!--[if !IE]>
10、在所有浏览器实现inline-block |
在做导航条的时候,一般会用到ul li结构,大多数时候我是把li设置为浮动(float=left),让其并排显示在同一行,最后再清除浮动(clear:both)防止影响后面的元素。另外一种方法 display:inline-block, ie6和ie7并不完全支持inline-blockli{display:inline-block;} IE6/7下无效li{display:inline-block; *display:inline;zoom:1;} 开启haslaout
内部PPT文件