常用 CSS hacks 整理


  1. 浏览器 hack 特性
  2. 不同浏览器区分方法
  3. 其他 hack 用法

一、浏览器 hack 特性

Firefox, Chrome, Safari, Opera, IE8, IE7可识别:

1
2
3
4
[xmlns] #item {
    color: red;
}
/*html标签属性hack*/
1
2
3
4
html>body #item {
    color: red;
}
/*子选择符hack*/
1
2
3
4
#content>#item {
    color: red;
}
/*子选择符hack,这里#content必须为#item的直接父级*/

Firefox, Chrome, Safari, Opera, IE8可识别:

1
2
3
html>/**/body #item {
    color: red;
}

Chrome, Safari, Opera可识别:

1
2
3
4
5
@media all and (min-width:0px) {
    #item {
        color: red;
    }
}

所有IE可识别:

1
2
3
#item {
    color: red\9;
}

Read more about "常用 CSS hacks 整理" …

可同时区分IE8、IE7、IE6、Firefox3、Firefox2的CSS hacks

可同时区分IE8、IE7、IE6、Firefox3、Firefox2的CSS hacks:

1
2
3
4
5
6
7
8
9
10
11
12
13
.test{
    color:/*\**/#00f\9; /* IE8 */
}
.test,
.test:-moz-any-link{
    color:#f60; /* Firefox2 */
}
.test,
.test:default{
    color:#000; /* Firefox3 */
    *color:#f00; /* IE7 */
    _color:#0f0; /* IE6 */
}

可同时区分IE8、IE7、IE6、Firefox的CSS hacks:

1
2
3
4
5
6
.test{
    color:#000; /* Firefox */
    color:/*\**/#00f\9; /* IE8 */
    *color:#f00; /* IE7 */
    _color:#0f0; /* IE6 */
}

关于IE8的hacks:

1
2
3
4
.test{
    color:/*\**/#00f\9; /* IE8 only */
    color:#00f\9; /* 适用于所有IE版本 */
}

任意分栏式布局 Any Order, Any Layout Columns

为了适应新项目的布局需求,总结之前搜狐博客HOME平台的经验,研究出了一种尊重HTML结构,并且可以任意调整分栏比例的分栏布局方法,不多废话看代码!

HTML:

1
2
3
4
<div class="r">
	<div class="cMain">①. 主要内容栏,以下简称“主栏”。</div>
	<div class="cSub">②. 次要内容栏,以下简称“次栏”。</div>
</div>

CSS:

为了清除分栏浮动对后面内容的影响和闭合主容器,主容器需要“clearfix”一下:

1
2
.r{zoom:1;}
.r:after{content:'\0020';display:block;clear:both;height:0;}

对于两栏按百分比对开的布局应该不需要我介绍了,主要和大家分享一下实现一栏定宽,另一栏自适应的几种基本情况:

1. 主栏居左显示,定宽200px;次栏居右显示,宽度自动补足余下空间

任意分栏布局 Any Order, Any Layout Columns

1
2
3
.r{padding-left:200px;}
	.cMain{float:left;width:200px;margin:0 0 0 -200px;}
	.cSub{float:right;width:100%;}

Read more about "任意分栏式布局 Any Order, Any Layout Columns" …

黄金周的八达岭长城

十一黄金周真不适合出来玩儿,为了带姐姐去看眼长城,起了个大早,一路各种排队,体会最深的却是的雄伟人墙:

八达岭长城

八达岭长城人海

Page 14 of 47 :|<678910111213[14]1516171819202122>|