常用 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" …

通过OpenSearch向IE7、Firefox添加自定义搜索

前几天IE被微软强制升级到了IE7,在升级成功后的浏览器配置过程中,注意到了OpenSearch这个功能。
Search了一下,基本的创建方法非常容易。

第一步,创建一个XML文档,格式如下:

1
2
3
4
5
6
7
8
9
10
< ?xml version="1.0" encoding="UTF-8"?>
<opensearchdescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
	<shortname>Uiland</shortname>
	<description>从“一方天”中搜索</description>
	<tags>Uiland 一方天</tags>
	<contact>email@yourdomain.com</contact>
	<inputencoding>UTF-8</inputencoding>
	<image width="16" height="16" type="image/ico">/favicon.ico</image>
	<url type="text/html" template="/?s={searchTerms}"></url>
</opensearchdescription>

也可以通过微软提供的向 Internet Explorer 7 添加搜索提供商页面引导创建。 Read more about "通过OpenSearch向IE7、Firefox添加自定义搜索" …

IE7 被什么捆住了脚?

引:为什么还不去下载Internet Explorer 7.0(以下简称IE 7)?我们终于可以摆脱令人讨厌的WGA(Windows Genuine Advantage,Windows正版验证)了,不知道这是否会让IE 7走进世界的速度加快.

前不久,微软推出了IE 7浏览器的最新升级版,新版本的最大改进是安装过程中不再需要进行Windows正版验证(WGA).

根据微软的说法,该做法的目的是让所有Windows用户都可以体验到IE 7更好的安全性能,从而改善整个Windows系统的安全环境,使用盗版Windows的用户同样可以使用新的IE 7,相较于IE 6,IE 7可以更好地抵御病毒、蠕虫和其他互联网攻击.

当然很多人也在猜测,微软放宽对使用IE 7的限制是否是为了在与Firefox的竞争中获得更大的市场份额,我无法判断微软的真实目的,但我一直对一个问题有疑问:与2001年随Windows XP一起发布的IE 6相比,IE 7被世界接受的速度是快了还是慢了? Read more about "IE7 被什么捆住了脚?" …

Page 2 of 19 :1[2]345678910>|