Flip 是一个基于 jQuery 的插件，它模仿流行的卡片翻转的效果，可以轻易的让元素在左右上下四个方向翻转。先看看效果吧，查看 Demo

Flip 同时基于 jQuery UI ，所以，要使用 Flip 需要引入 jQuery 和 jQuery UI 。

Flip 使用很简单，只需让元素调用 flip 方法就可以了。

$('.flipbox').flip({})

不过，仅仅只是单纯的调用 flip 方法的话，很多属性是默认的，也许不一定符合你的要求，你可以根据自己的要求、喜好添加相应的属性，Flip 提供的全部属性有：

content

定义翻转后元素的新内容，可以是：文本 、 HTML 或 jQuery 对象

direction

定义元素翻转的方向，可选：tb/bt/lr/rl ，默认为 tb

color

定义元素翻转后的背景颜色，默认是 #999999 （从 Firebug 查看得知）

speed

定义翻转的速度，默认为 500 毫秒

onBefore

定义元素翻转之前的回调函数

onAnimation

定义元素翻转到一半时的回调函数

onEnd

定义元素翻转之后的回调函数

好了，到这里已经介绍完毕，具体应用大家可以根据自己的喜好或发挥想象，这里我做了一个简单的类似幻灯片的翻页效果，查看 Demo

如果你想了解关于 Flip 的原文介绍或最新动态，你可以前往该插件的官方地址：http://lab.smashup.it/flip/

©2010 一起CSS. All Rights Reserved.

相关日志

• jQuery插件Cloud Zoom (0)

HTML 5 作为新一代的超文本标记语言，增加了许多标签。这些标签不但更有语义，而且功能强大。具体有以下标签：

HTML 5 增加了许多新标签，同时也废除了一些标签：

上面这些标签在 XHTML 1.0 是不建议使用的，但仍然可以支持，而在 HTML 5 中则彻底不支持了。另外还有很多标签属性也不支持，如 aling 等。

下面是一些关于 HTML 5 的网站，有兴趣可以前往了解：

• 苹果 HTML 5 演示网站 http://www.w3school.com.cn/html5/
• google HTML 5 演示网站 http://www.html5rocks.com/ （好像打不开）
• HTML 5 教程 http://www.w3school.com.cn/html5/
• W3C 标签页面 http://dev.w3.org/html5/html-author/
• HTML 5 演示幻灯片 http://directguo.com/html5/ （请使用 Chrome 或 Safari 浏览器）
• HTML 5 Demos and Examples http://html5demos.com/

©2010 一起CSS. All Rights Reserved.

随机日志

• 再谈overflow清除浮动 (7)
• 各知名网站的团队博客、招聘网站 (0)
• h1,h2,h3和strong标签的seo解说 (0)
• IE 8 beta 2不识滤镜alpha ？ (8)
• 符合W3C标准网站 所具有一些优点的浅析 (0)
• 制作半透明效果 (0)
• 更具亲和力的文字隐藏方法 (0)
• 3D效果CSS圆角 (4)
• 有序列表项在IE里全部显示“1”的奇怪现象 (0)
• ie img 3px bug (2)

<input />
<input class="hide" type="hidden" />
<input class="hide" type="hidden" />
……（省略 8 个或更多）
<input type="submit" value="send" />

这样的代码出现的几率是比较小吧，一般情况下，不会有这么多隐藏域，而且表单标签可能会有其他如 p、li 等标签包裹，这样的话，此 bug 又不会出现。我们抛开这些情况，以此 bug 会出现来讨论。上面代码运行后在 IE6 或 IE7 和 FF 中的效果如下图：

在 IE6 或 IE7 中，输入框和提交按钮有很大的间隔，而在 FF 中则效果正常。如果隐藏域越多的话，IE6 或 IE7 中间隔就越大，而 FF 中则始终没有问题。你可以 查看Demo

解决此 bug 有以下几个办法：

把所有隐藏域写在同一行里

优点：不要借助其他标签，不要写样式

缺点：代码可读性下降

隐藏域浮动

优点：代码可读性好

缺点：需要借助 class，如果使用属性选择器的话，IE6 不支持

隐藏域绝对定位

优点：代码可读性好

缺点：需要借助 class，如果使用属性选择器的话，IE6 不支持

其实并不只是隐藏域会占空间，把 type 换成其他类型，同样会有这样的问题。比如把 type 换成 button，然后 display:none，效果是一样的。

上面的几种方法虽然可以解决这个问题，但个人认为都不是很完美，如果你有更好的办法，欢迎留言。

©2010 一起CSS. All Rights Reserved.

相关日志

• 纯css下拉菜单详解 (12)
• :hover伪类在IE6中的BUG (3)
• IE6支持PNG透明(alpha通道)的4种方法 (7)
• 别说IE6不认识!important (5)
• css2高级选择器 (4)
• IE6双倍margin bug (1)
• 如何在IE6里定义高度小于18px的盒子 (0)
• 让IE6也有最大高度max-height的效果 (7)

首先，名字和图标变样了，名字变成了 Minefield ，图标正和名字一样，是个地雷。如下图：

而功能上 Firefox 4.0 Beta 2 预览版除了修复了“浏览器窗口假死”问题外，其他并没有多大变化。

Firefox 4.0 Beta 2 预览版所提供的各平台版本很完整，涵盖了 Windows 平台、Linux 平台，Mac OSX 平台各自的 32 位和 64 位版本，下载地址如下：

• Mozilla Firefox v4.0 Beta 2 Pre For Windows 32Bit 下载地址
• Mozilla Firefox v4.0 Beta 2 Pre For Windows 64Bit 下载地址
• Mozilla Firefox v4.0 Beta 2 Pre For Linux 32Bit 下载地址
• Mozilla Firefox v4.0 Beta 2 Pre For Linux 64Bit 下载地址
• Mozilla Firefox v4.0 Beta 2 Pre For Mac 32Bit 下载地址
• Mozilla Firefox v4.0 Beta 2 Pre For Mac 64Bit 下载地址

©2010 一起CSS. All Rights Reserved.

相关日志

• Firefox 4.0 Beta 1发布 (1)
• Firefox 3.6.6发布 (0)
• Mozilla Firefox 4.0最新用户界面 (7)

Net Applications 将本次 IE 市场占有率上涨归功于微软的信心（Confidence）推广活动，但其他因素也起了一定的促进作用，比如 Windows 7 的成功以及欧洲地区对安装系统时浏览器选择窗口的规定。

微软负责 IE 浏览器业务和营销部门的高级经理瑞恩·加文（Ryan Gavin）本周四在博客上称这条消息“令人鼓舞”。但他同时也表示了谨慎的态度，他说：“市占率提升其实只是评估 IE 浏览器进步程度的一个方面。我们当然不会仅仅因为最近两个月的好成绩沾沾自喜。

©2010 一起CSS. All Rights Reserved.

相关日志

• “导”字导致样式失效 (5)
• ie img 3px bug (2)

安装好之后的界面如下图：

怎么和之前《Mozilla Firefox 4.0最新用户界面》不一样呢？别急，我们需要做一些设置：

把第一个选项（菜单栏）去掉就行了，我觉得这样更美观。

此次跟新应该是有史以来最的更行，简直就是脱胎换骨。UI 方面，把菜单按钮集中到左上角的一个按钮上，使浏览区域更宽敞、界面更紧凑美观。不过目前好像集中的菜单按钮没有所有的功能，要使用其他功能，还是得把菜单栏调出来。

你也喜欢吗？那就赶紧下载吧。点击下载

©2010 一起CSS. All Rights Reserved.

相关日志

• Firefox 4.0 Beta 2预览版发布 (1)
• Firefox 3.6.6发布 (0)
• Mozilla Firefox 4.0最新用户界面 (7)

该资料的大致内容为：

开发人员平台预览

3 月 10 日发布（首个平台预览版）

每隔 8 周发布一个新版本

并非完整浏览器

Beta

2010 年8 月

首次提供完整 IE9 功能

Beta 版发布意味着正式准备项目开始

RC 候选版本、RTM 版本

日期将在 Beta 版发布后确定

IE9 平台预览版的官方地址是：http://ie.microsoft.com/testdrive/ ，你也可以到该网站了解 IE9 的最新消息。

©2010 一起CSS. All Rights Reserved.

相关日志

• IE9平台预览第二版发布 支持HTML5 GPU加速 (5)
• IE的市场份额下降到历史最低 (3)

崩溃保护是 Firefox 3.6.4 新引入的功能，当一个插件崩溃并导致整个浏览器无响应后，Firefox 会在 10 秒后终止改插件，不会影响 Firefox 其它部分，你可以重新加载该页面并重启此插件。不过很多用户反应，他们的旧机器反应不快，所以希望可以延长浏览器等待无响应插件的时间，尤其是游戏，对于他们来说，10 秒钟太短了。

为了解决这个问题，Mozilla 延长了 Firefox 在终止某插件前等待其响应的时间，由 10 秒延至 45 秒。Firefox 自带的升级功能会提示升级此版本。

©2010 一起CSS. All Rights Reserved.

相关日志

• Firefox 4.0 Beta 2预览版发布 (1)
• Firefox 4.0 Beta 1发布 (1)
• Mozilla Firefox 4.0最新用户界面 (7)

目前，Cloud Zoom 的最新版本是 1.0.2，我们就此版本为例（1.0.2与之前版本有所不同），来看看 Cloud Zoom 是如何工作的。首先，当然是引入插件以及附带的 CSS 文件，当然，你喜欢的话，样式可以自己编写。然后编写 XHTML 代码：

<a href="http://www.17css.com/works/10/B/images/bigimage03.jpg" class="cloud-zoom">
	<img src="http://www.17css.com/works/10/B/images//smallimage-3.jpg" alt="" />
</a>

与其他插件不一样，Cloud Zoom 不需要再在 js 代码里调用了，只需要给 a 标签加上 class 为 “cloud-zoom” 就可以实现调用。看看上边代码产生的效果吧，查看Demo1

只加一个 class 效果是默认的，想要其他效果的话，需要给 a 标签的 rel 属性上加上一定的值，具体的值如下：

再看几个加上了非默认 rel 属性值的例子吧，Demo2 Demo3 Demo4

如果你认为要在 a 标签里加上 rel 属性不好，没做做到 “js” 与 XTHML 分离的话，那就把他们分离，把工作交给 js 吧：

$(function(){
	$('.cloud-zoom').attr('rel','tint:"#f00"');
})

不过要注意顺序哦，必须是：

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('.cloud-zoom').attr('rel','tint:"#f00"');
})
</script>
<script type="text/javascript" src="cloud-zoom.1.0.2.min.js"></script>

因为 Cloud Zoom 在加载的时候必须得到相应的 rel 属性值，如果之后再写上 rel 属性值，人家可不会再去读取哦。

至于到底是把 rel 写在 XHTML 里还是 js 里，就看个人喜好吧，作者是把 rel 直接写在 XHTML 里的。

另外要注意的是：

• rel 属性中涉及到数值的都不要单位，否则插件则运行不了
• rel 的最后一个属性值后面不要逗号，否则 IE6 、IE7 下插件运行不了

最后，附上此插件的主页地址：http://www.professorcloud.com/mainsite/cloud-zoom.htm，里面也有相关说明。

©2010 一起CSS. All Rights Reserved.

相关日志

• jQuery插件Flip (1)
• jQuery EasyUI (4)
• 修改：自动播放的jQuery幻灯片 (7)
• 自动播放的jQuery幻灯片 (15)
• jQuery写的一个幻灯片 (18)
• 用jQuery去除链接虚线 (20)
• 用标准W3C盒子模型 (2)

Windows：

Mac：

怎么样？不错吧。

虽然这是最新的界面，但设计师 Horlander 强调也不一顶是定稿，也有可能再改进。

Mozilla 指出，将于 6 月底对外发布 Firefox 4.0 的测试版。但到时候到底会是什么情况谁也不知道，毕竟 Mozilla 推迟发布 Firefox 已经不是一次两次的事情了。

©2010 一起CSS. All Rights Reserved.

相关日志

• Firefox 4.0 Beta 2预览版发布 (1)
• Firefox 4.0 Beta 1发布 (1)
• Firefox 3.6.6发布 (0)

一位朋友就因为混用编码引发了一个奇怪的问题：样式文件内的部分样式失效，而代码没有任何错误。你没遇见过这样的问题吧？来看看具体是什么情况：

这位朋友的 HTML 文件的编码为 gb2312 ，而 CSS 文件是 utf-8 的，CSS 文件里有一条注释为“/*导航条*/”。这些有问题吗？对！也许他们不同时存在就没问题，但他们存在了就产生了一个奇怪的问题：注释“/*导航条*/”与下一条注释之间的样式在 IE 下没有效果，如果没有下一条注释了，则下面的样式全部没有效果。不光是 IE6 、IE7 ，甚至 IE8 、IE9预览版都没有效果。用 IE 浏览器测试下面的地址试试吧。

查看Demo

从测试页面可以看到有两条样式失效了，分别是：字体红色和下划线。奇怪的是把“导”字或“航”字删掉，样式就起效果了。更奇怪的是“导”字或“航”字他们的总数是基数的时候，如“/*导导航条*”或"/*导导导条*/"，是偶数的时候又失效，如“/*导航导航条*/”或“/*导导航航条*/”。

避免问题的方法还有：

1. 统一编码
2. 注释用英文或拼音
3. 注释结束和开头与注释间留空格，如“/* 导航条 */”

最好的办法是统一编码，因为编码不统一，也许还有其他潜在的问题。

如果我们认为这个问题是中文文字引起的，那可能还会有其他文字会引起这样的问题。不过我国的文字有几万个，我们不可能一个一个去试，这只是根据上面情况的一种推测。

©2010 一起CSS. All Rights Reserved.

相关日志

• IE全球市占率重新超过60% (0)
• ie img 3px bug (2)

5 月份，Chrome 市场份额上升至 7.05%，较 4 月份的 6.73% 增长了 0.3 个百分点。相比很多人都还记得，4 月份 IE 的全球市场份额首次跌破了 60%，而 5 月份 IE 并没有振作起来，依旧延续了下滑趋势，由 59.95% 下降至 59.69%。

此前市场份额一直增长的 Firefox 却出现了小幅下跌，5 月份市场份额为 24.35%。总体来说，除了 IE 与 Firefox 在 5 月份的份额出现了下滑，其它浏览器都有不同程度的增长。其中，Safari 上升至 4.77%（4 月份为 4.72%），Opera 增至 2.43%（4 月份为 2.30%）。

点击查看大图

文章转载自：浏览器之家

原文地址：http://liulan7.net/a/top/2010/0601/1231.html

©2010 一起CSS. All Rights Reserved.

随机日志

• IE全球市占率重新超过60% (0)
• hoverbox (6)
• 让指定分类的文章在Wordpress首页不显示 (6)
• IE9平台预览第二版发布 支持HTML5 GPU加速 (5)
• 用标准W3C盒子模型 (2)
• Firefox 3.6.6发布 (0)
• IE6双倍margin bug (1)
• Firefox 4.0 Beta 2预览版发布 (1)
• ie img 3px bug (2)
• 有序列表项在IE里全部显示“1”的奇怪现象 (0)

在解决兼容方法上，想定出一个统一的规范，个人认为应该以下面3点为基本原则：

1. 权衡成本：在浏览器被淘汰后，如何快速清理掉无用代码
2. 可维护：在资源成本和完美间平衡的向后兼容
3. 可读：省力、易记

这里把成本放在了第一位，并不是说我们不愿意追求完美，而只是，太刻意追求完美有时候可能会阻碍我们前进；在成本后，应该是可维护和可读，这点对于团队的合作来说至关重要，而最终结果也是为了减少成本。

先把这三个原则存起来，来看看我们平时解决兼容的写法（后面会附详细的Hack方法列表）：

一、CSS 选择器 Hack

/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{head~body .sofish{display:block;}}

这种写法的优缺点是：

• 优点：全面，各种HACK都有；清理无用代码里易认
• 缺点：选择器名称不易记；代码量多（要重复写选择器）

二、CSS 属性 Hack

.sofish {
	padding:10px;
	padding:9px\9; /* all ie */
	padding:8px\0; /* ie8-9 */
	*padding:5px; /* ie6-7 */
	+padding:7px; /* ie7 */
	_padding:6px; /* ie6 */
}

这种写法的优缺点是：

• 优点：易记；代码少
• 缺点：不全面

三、IE 注释

<!--[if IE]>IE only<![endif]-->
<!--[if !IE]>NOT IE<![endif]-->

这种写法的优缺点是：

• 优点：安全；向后兼容好；易维护
• 缺点：用不好会增加HTTP请求；用得好代码又多

四、浏览器探测：JS/后端程序判断

// 以jQuery为例，检测是否是IE6，是则加上class="ie6"
if ($.browser.msie && $.browser.version = 6 ){
	$('div').addClass('ie6');
}

这种写法的优缺点是：

• 优点：全面；易维护；可读性高
• 缺点：占资源；代码量大（要重写选择器）

上面4种是我们最常用的方法。现在，让我们抽出心里存着的那3个原则，看看如何选择。要时间思考一下么？这里简单地说一下我的选择：

1. 尽量使用单独HACK

   这样维护起来成本比较低，改动不会影响其他的浏览器，而一旦有浏览器淘汰，只要搜索关键字，就可以批量去掉这些代码。比如，ie6的单独hack：_padding:6px;；

2. 向后兼容的目标：1年

   你想现在的网站兼容IE10么，谁不想，但这可预见性太低了，也可以说，成本太高了。暂时没必要。不过，IE9可能要发布了，所以，选择像padding:8px\0;这样的IE8+的hack，在删掉其他代码不影响向后兼容上，会更好；并且，如果IE10出来，一旦支持这个hack，而又没有这个bug，可能删掉只影响2个浏览器，也会更方便；

3. 尽可能省资源

   你要是不考虑页面加载速度，不考虑服务器承受能力的话，那在向后兼容和淘汰的处理上可以做得很完美（从代码上），但这从某种程度上，不如不做。

五、个人推荐写法

其实可以纠结的还真多，这里结合A-Grade浏览器的种类和HACK的种类，写两种个人认为比较合理的HACK和向后兼容相兼顾的写法，仅供大家参考的。

经济实惠型写法：注重单独的HACK。 IE的HACK比较多，选择省力易记的属性HACK；其他浏览器HACK少，选择块状的选择器HACK(推荐)

.sofish {
	padding:10px;
	padding:9px\9; /* all ie */
	padding:8px\0; /* ie8-9 目前应用于IE8的单独hack，情况比较少 */
	*padding:5px; /* ie6-7 */
	+padding:7px; /* ie7 */
	_padding:6px; /* ie6 */
}

/* webkit and opera */
@media all and (min-width: 0px){ .sofish{padding:11px;} }

/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} }

/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }

/* firefox * /
@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */
html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */

准完美主义写法：配合IE注释，一律采用选择器HACK（选择性推荐）

HTML: 添加body class
<!--[if IE6]--><body class="ie6"><![endif]-->
<!--[if IE7]--><body class="ie7"><![endif]-->
<!--[if IE8]--><body class="ie8"><![endif]-->
<!--[if IE9]--><body class="ie9"><![endif]-->
<!--[if !IE]--><body class="non-ie"><![endif]-->

.sofish { padding:10px;}
.non-ie .sofish { padding:12px;}
.ie9 .sofish { padding:9px;}
.ie8 .sofish { padding:8px;}
.ie7 .sofish { padding:7px;}
.ie6 .sofish { padding:6px;}

/* webkit and opera */
@media all and (min-width: 0px){ .sofish{padding:11px;} }

/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} }

/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }

/* firefox */
@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */
html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */

然后，从第二种方式我们也可以发现。把IE注释用在body class上，而不是添加单独的<link />或者@import会是更好的选择。虽然分文件也是一种不错的选择，但了为页面加载速度，HTTP请求一个都不能浪费。

至于利用JS或者后端程序来判断，除非你有足够的资源，除非你解决不了（90%不会发生），不然，并不推荐用。附上一个表（via），可以参考参考：

六：全面的IE6+ / Firefox / Webkit / Opera CSS HACK列表：

/***** Selector Hacks ******/
/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#diez  { color: red }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
	#veintiseis { color: red }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red } 

/* Everything but IE6-8 */
:root *> #quince { color: red }

/* IE7 */
*+html #dieciocho { color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red }

/***** Attribute Hacks ******/
/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

其他的就不多说了。不过，还是要提醒一下: 注释也是很重要的。虽然是HACK了，但现实中情况有时候比想象中的复杂得多，给代码一个注释，好过千言万语。

最后，还是那句，希望看到你更好的方法！

文章转自：幸福收藏夹

原文地址：http://www.happinesz.cn/archives/1331/

©2010 一起CSS. All Rights Reserved.

相关日志

• css hack (19)

相较于第一次发布的技术预览版本，该版本具有众多的改进。重点改进性能、大屏幕显示器的支持、Web标准的兼容、开发工具也有很大提升、特别是实现了 HTML5 的 GPU 硬件加速。同时，微软也更新了 Test Drive 官网，用户可以通过下载 IE9 平台预览版2来测试和体验 IE9 浏览器的新变化。

由于 IE9 很多特性还未定型，“平台预览版”这个名称表明该版本仅（主要针对网页开发人员）展示新 IE 在速度、HTML5、CSS3、图形渲染等方面的改进，并没有包含完整的浏览器功能，也不能说明正式版的IE9就是什么样子。

下载：IE9 平台预览第二版

©2010 一起CSS. All Rights Reserved.

相关日志

• IE9将于8月进行公试 (0)
• IE的市场份额下降到历史最低 (3)

相比之下，StatCounter 的统计显示，IE 的市场份额为 51.42%，Firefox 占 32.62%, Chrome 占 8.82%，Safari 为 4.27%，Opera 为 1.99%。

Net Applications 同时发布了操作系统市场调查数据。据悉，操作系统市场份额并没有明显变化。WindowsXP依旧以63%的份额占据首位。

©2010 一起CSS. All Rights Reserved.

相关日志

• IE9将于8月进行公试 (0)
• IE9平台预览第二版发布 支持HTML5 GPU加速 (5)

其他浏览器方面，Firefox 从 24.2% 上涨到 24.5%，Safari 也随着 Mac 的大卖从 4.5% 增长到 4.7%，而跌幅最惨烈的当然是 IE —— 从 61.6%直跌到60.7%。

文章转载自：中文业界资讯站

原文地址：http://www.cnbeta.com/articles/107690.htm

©2010 一起CSS. All Rights Reserved.

随机日志

• SEO/搜索引擎优化视频教程 (0)
• IE6双倍margin bug (1)
• CSS hack区分浏览器（IE6、IE7、FF） (1)
• HTML4和浏览器默认样式 (0)
• Firefox 4.0 Beta 2预览版发布 (1)
• 使用CSS定位页面的“footer” (1)
• jQuery插件Cloud Zoom (0)
• 纯css下拉菜单详解 (12)
• IE的条件注释 (0)
• Mozilla公布Firefox占有率数据 全球接近30% 俄罗斯达到60% (3)

最有震撼力的数据是俄罗斯，Firefox使用量高达60%，成为主流浏览器，另外一个有趣数据是Firefox典型用户一般只会使用2-3个tab浏览网页，而最多的一个则为同时打开600个……以下是数据图表：

FF 用户打开 tab 数量的图片。

夏威夷、怀俄明州和纽约不同时段 FF 使用率。

FF 在 7 大洲占有率。

文章转载自：中文业界资讯站

原文地址：http://www.cnbeta.com/articles/107592.htm

©2010 一起CSS. All Rights Reserved.

随机日志

• 视频教程 (0)
• 用CSS滤镜制作圆角 (0)
• CSS中英文双语导航菜单 (0)
• 别说IE6不认识!important (5)
• IE 8 beta 2不识滤镜alpha ？ (8)
• hoverbox (6)
• CSS Sprites (0)
• 浏览器兼容常见问题 (0)
• 让搜索更友好 (1)
• Firefox 4.0 Beta 2预览版发布 (1)

ExtJs 和 jQuery EasyUI 对比。

jQuery EasyUI 树形菜单、表格应用、弹出窗口等。

jQuery EasyUI 弹出对话框。

jQuery EasyUI 遮罩弹出窗口。

怎么样？不错吧。那就赶快去体验吧！

jQuery EasyUI 的官方地址是：http://jquery-easyui.wikidot.com/

©2010 一起CSS. All Rights Reserved.

相关日志

• jQuery插件Cloud Zoom (0)
• 修改：自动播放的jQuery幻灯片 (7)
• 自动播放的jQuery幻灯片 (15)
• jQuery写的一个幻灯片 (18)
• 用jQuery去除链接虚线 (20)
• 用标准W3C盒子模型 (2)

在公司，电脑里的浏览器是 ie6，除了开发部和技术部外，其他部门的同事很少装其他浏览器（不过有小部分可能会升级到 ie7/ie8）。而开发部和技术虽然会装 ff，但装好之后一般不会升级，因为他们不一定是前端开发人员，他们装 ff 的目的也只是看看自己做的东西在 ff 下是否正常，所以这就导致了公司里有各个版本的 ie 和 ff 都有。其实这不是最严重的，因为我做的东西除了在 op 下可能会有些差异外，在上面所有浏览器和 sa 、ch 下都表现的很好。最严重的是之前的有些东西他们做的时候可能只考虑到 ie6，所以如果要修复的话，会把我给郁闷坏，因为我不仅要针对浏览器修复，还有可能要针对浏览器版本修复。如果是你的话，你会头疼吗？所以我收集了一些我认为是比较简单方便的 css hack，一来是自己在工作可能需要，二来算是分享吧。这些 css hack 注意顺序一起使用，能区分不同的浏览器和版本。当然，如果你没必要考虑这么复杂的情况，就挑选需要的用咯。通过实例来体现吧。

html 代码

<body>
	<p>您的浏览器是</p>
</body>

css hack 代码

p { margin:0; padding:0 55px 0 0; height:30xp; line-height:30px; font-size:14px;}
p { background:url(llq.gif) 90px -170px no-repeat;} /* all */
p,x:-moz-any-link { background:url(llq.gif) 90px -80px no-repeat;} /* for ff */
p,x:-moz-any-link,x:default { background:url(llq.gif) 90px -140px no-repeat;} /* for ff2+ */
p {[;background:url(llq.gif) 90px -260px no-repeat;]}  /* for sa/ch */
p { background:url(llq.gif) 90px -50px no-repeat\9;}  /* for ie */
*+html p { background:url(llq.gif) 90px -20px no-repeat;} /* only for ie7 */
p { _background:url(llq.gif) 90px 10px no-repeat;} /* only for ie6 */

查看Demo

因为没有找到 op10 的 css hack，所以标准的写法是给 op10 的，然后针对其他浏览器写 css hack。

另外，在修复过程中，我发现了网上流传的一个 css hack 有问题，这个 css hack 也许有很多人在用，就是[属性：值\0]，有的人说这是 ie8 专用的，但我在测试过程中发现这个 css hack 除了 ie8 识别外，ff3 和 op10 也能识别（ff2 和 ff3.5 不能识别）。你可以使用对应的浏览器（如果你有的话）点击这个例子查看。

所以有些 css hack 还是尽量在多个浏览器里测试测试，以免误导别人。

注：op 代表 opera，sa 代码 safari，ch 代表 chrome。

©2010 一起CSS. All Rights Reserved.

相关日志

• 说说CSS Hack和向后兼容 (0)

要修复上面的问题，加上一条判断语句即可：如果有动画正在执行，鼠标移到缩略图上就不执行动画函数。具体代码如下（和原来的相比就多了一句判断）：

var theInt = null;
var curclicked = 0;

$(function(){
	$('#transparence').css('opacity','0.4');
	$('#pic_list img').css({'opacity':'0.6'});
	$('#pic_list img:eq(0)').css({'top':'0','opacity':'1'});
	$('#pic_list a').click(function(){return false});
	t(0);
	$('#pic_list img').mouseover(function(){
		if($('#this_pic').attr('src') == $(this).attr('src')) return;
		if(!$(this).is(':animated')){
			t($('#pic_list img').index($(this)));
		}
	})
})

t = function(i){
	clearInterval(theInt);
	if( typeof i != 'undefined' )
	curclicked = i;
		$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
		$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
		$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
		$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
	theInt = setInterval(function (){
		i++;
		if (i > $('#pic_list img').length - 1) {i = 0};
		$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
		$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
		$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
		$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
	},3000)
}

查看Demo

©2010 一起CSS. All Rights Reserved.

相关日志

• 自动播放的jQuery幻灯片 (15)
• jQuery写的一个幻灯片 (18)
• jQuery插件Cloud Zoom (0)
• jQuery EasyUI (4)
• 用jQuery去除链接虚线 (20)
• 用标准W3C盒子模型 (2)

做一个列子吧，就拿最近做的一个东西来做吧，是一个列表，如果这个列表中的某个连接是直接打开 pdf 文件，就给这个链接后面加上 pdf 的小图标，以示提醒作用。看代码吧，XHTML 和 CSS 代码就省略了，看主要的 JS 代码：

window.onload = function(){
	var list = document.getElementById('list');
	var listA = list.getElementsByTagName('a');
	for(var i = 0; i < listA.length; i++){
		var href = listA[i].href;
		if(href.indexOf('pdf') != -1){
			listA[i].className = 'haspdf';
		}
	}
}

查看Demo

因为这段代码主要针对 IE6 及以下版本，所以可以加上 IE 条件注释。

©2010 一起CSS. All Rights Reserved.

随机日志

• 更具亲和力的文字隐藏方法 (0)
• 3D效果CSS圆角 (4)
• IE和FF下的margin-top (7)
• 我的简历 (0)
• 纯css下拉菜单详解 (12)
• 超过宽度显示省略号（无js全兼容） (11)
• :hover伪类在IE6中的BUG (3)
• 遵循Web标准的网页设计工作流程(一) (0)
• 语义化的HTML结构到底有什么好处？ (4)
• IE的条件注释 (0)

从上面可以看出 CSS Expressions 是如此的可怕。但也许单纯的文字说明还不能使你深入的明白 CSS Expressions 的可怕，那就引用子鼠的例子来实际说明吧：

XHTML 和 JS 代码：

<body>
计算了<input id="c" />次
<script type="text/javascript">
var k = 0;
function test() {
	k++;
	document.getElementById('c').value = k;
	return;
}
</script>
<div>
	<ul>
		<li><a href="11111111111111111111">22222</a></li>
		<li><a href="11111111111111111111">22222</a></li>
		<li><a href="11111111111111111111">22222</a></li>
		<li><a href="11111111111111111111">22222</a></li>
	</ul>
</div>
</body>

JS 代码是用来计算 CSS Expressions 的计算次数。

CSS Expressions 表达式代码：

body {
	font-size:12px;
	font-family:Verdana;
	line-height:1.9
}
div a {
	display:block;
	border:1px solid #FF3366;
	width:expression(this.offsetWidth > 750 ? test() : test());
}

查看Dome （用 IE6/IE7 查看）

从上面的例子就可以明显的看到 CSS Expressions 的计算的如此的频繁，由此可见它的可怕。

子鼠还提供了一个稍好一点的写法：

body {
	font-size:12px;
	font-family:Verdana;
	line-height:1.9
}
div a {
	display:block; border:1px solid #FF3366;
	width:expression(function(abc){
		abc.style.width = "750px";
		test();
	}(this));
}

查看Dome （用 IE6/IE7 查看）

另外 CSS Expressions 的兼容性很差，所以 CSS Expressions 能不用就不用。

©2010 一起CSS. All Rights Reserved.

随机日志

• 修改：自动播放的jQuery幻灯片 (7)
• IE6下!important的bug (1)
• “导”字导致样式失效 (5)
• Mozilla Firefox 4.0最新用户界面 (7)
• 百度有啊CSS圆角方案 (4)
• wordpress自动升级成功 (11)
• 2010年3月浏览器市场占有率 Chrome再次上涨0.5个百分点至6.13% (2)
• 再谈overflow清除浮动 (7)
• 用CSS制作彩色文字 (0)
• 隐藏域在ie中占空间的bug (2)

结构和样式都没有变，只有 jQuery 代码有变，具体的代码如下：

var theInt = null;
var curclicked = 0;

$(function(){
	$('#transparence').css('opacity','0.4');
	$('#pic_list img').css({'opacity':'0.6'});
	$('#pic_list img:eq(0)').css({'top':'0','opacity':'1'});
	$('#pic_list a').click(function(){return false});
	t(0);
	$('#pic_list img').mouseover(function(){
		if($('#this_pic').attr('src') == $(this).attr('src')) return;
		t($('#pic_list img').index($(this)));
	});
});

t = function(i){
	clearInterval(theInt);
	if( typeof i != 'undefined' )
	curclicked = i;
		$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
		$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
		$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
		$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
	theInt = setInterval(function (){
		i++;
		if (i > $('#pic_list img').length - 1) {i = 0};
		$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
		$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
		$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
		$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
	},3000)
}

查看Dome

©2010 一起CSS. All Rights Reserved.

相关日志

• 修改：自动播放的jQuery幻灯片 (7)
• jQuery写的一个幻灯片 (18)
• jQuery插件Cloud Zoom (0)
• jQuery EasyUI (4)
• 用jQuery去除链接虚线 (20)
• 用标准W3C盒子模型 (2)

HTML样式

html, address,blockquote,body, dd, div,dl, dt,
fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6,
noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }
/*以上均为块状显示，未列出为内联元素显示，部分元素在XHTML1中将废弃*/
li { display: list-item }/*默认以列表显示*/
head { display: none }/*默认不显示*/
table { display: table }/*默认为表格显示*/
tr { display: table-row }/*默认为表格行显示*/
thead { display: table-header-group }/*默认为表格头部分组显示*/
tbody { display: table-row-group }/*默认为表格行分组显示*/
tfoot { display: table-footer-group }/*默认为表格底部分组显示*/
col { display: table-column }/*默认为表格列显示*/
colgroup { display: table-column-group }/*默认为表格列分组显示*/
td, th { display: table-cell; }/*默认为单元格显示*/
caption { display: table-caption }/*默认为表格标题显示*/
th { font-weight: bolder; text-align: center }
/*默认为表格标题显示，呈现加粗居中状态*/
caption { text-align: center }/*默认为表格标题显示，呈现居中状态*/
body { margin: 8px; line-height: 1.12 }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4, h5, h6, b,strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,var, address { font-style: italic }
pre, tt, code, kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea, input, object, select { display:inline-block; }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }/*定义sub元素默认为下标显示*/
sup { vertical-align: super }/*定义sub元素默认为上标显示*/
table { border-spacing: 2px; }
thead, tbody, tfoot { vertical-align: middle }
/*定义表头、主体表、表脚元素默认为垂直对齐*/
td, th { vertical-align: inherit }
/*定义单元格、列标题默认为垂直对齐默认为继承*/
s, strike, del { text-decoration: line-through }
/*定义这些元素默认为删除线显示*/
hr { border: 1px inset }/*定义分割线默认为1px宽的3D凹边效果*/
ol, ul, dir, menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "A" }/*定义换行元素的伪对象内容样式*/
:before, :after { white-space: pre-line }/*定义伪对象空格字符的默认样式*/
center { text-align: center }
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
 /* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
/*定义BDO元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
/*定义BDO元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
/*定义任何元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
/*定义任何元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/
@media print { /*定义标题和列表默认的打印样式*/
    h1 { page-break-before: always }
    h1, h2, h3,    h4, h5, h6 { page-break-after: avoid }
    ul, ol, dl { page-break-before: avoid }
}

浏览器默认样式

1、页边距

IE 默认为 10px，通过 body 的 margin 属性设置；FF 默认为 8px，通过 body 的 padding 属性设置。要清除页边距一定要清除这两个属性值：

body {
	margin-top:0;
	margin-bottom:0;
}

2、段间距

IE 默认为 19px，通过 p 的 margin-top 属性设置；FF 默认为 1.12em，通过 p 的 margin-bottom 属性设。p 默认为块状显示，要清除段间距，一般可以设置：

p {
	margin-top:0;
	margin-bottom:0;
}

3、列表样式

IE 默认为 40px，通过 ul、ol 的 margin 属性设置；FF 默认为 40px，通过 ul、ol 的padding 属性设置。dl 无缩进，但起内部的说明元素dd 默认缩进 40px，而名称元素 dt 没有缩进。要清除列表样式，一般可以设置：

ul, ol, dd {
	list-style-type:none;/*清除列表样式符*/
	margin-left:0;/*清除IE左缩进*/
	padding-left:0;/*清除非IE左缩进*/
}

4、元素居中

IE 默认为 text-align:center ；FF 默认为 margin-left:auto;margin-right:auto 。

5、鼠标样式

IE 默认为 cursor:hand ；FF 默认为 cursor:pointer 。该声明在IE中也有效。

更详细的介绍，您可以查看这里：http://www.w3.org/TR/CSS21/sample.html

文章整理自网络

©2010 一起CSS. All Rights Reserved.

随机日志

• hoverbox (6)
• 超过宽度显示省略号（无js全兼容） (11)
• 门户网站与大型网站的CSS架构与组织 (1)
• 说说CSS Hack和向后兼容 (0)
• 我的简历 (0)
• 图片对网站速度的测试 (4)
• 作品之每天物流平台 (0)
• 2010年3月浏览器市场占有率 Chrome再次上涨0.5个百分点至6.13% (2)
• CSS Sprites (0)
• 让IE6也有最大高度max-height的效果 (7)

语义化的HTML结构首先要强调HTML结构

HTML结构是页面的骨架，一个页面就好像一幢房子，HTML结构就是钢精钢筋混泥土的墙，一幢房子如果没有钢精钢筋混泥土的墙那就是一堆费砖头，不能住人，不能办公。css是装饰材料，是原木地板，是大理石，是油漆，是用来装饰房子的，CSS的强大就不用多说了，css如果没有html结构那就是一堆木板，一同油漆，没有了实际使用价值。CSS完全依靠引用它的(X)HTML文档。如果你想使CSS的能力充分发挥到极致，提供一个用既干净又有结构的内容的html是非常必要的，“HTML是在互联网上发布超文本的通用语……HTML使用标签来对文本结构化”

语义化的HTML结构怎么写？

HTML是一种对文本内容进行结构和意义（或者说“语义”）进行补充的方法。它会告诉我们说：“这行是一个标题，这几行组成了一个段落。这些文字是项目列表，这些文字是链接到互联网上另一个文件的超链接。”值得注意的是，不应该让HTML来告诉我们：“这些文字是蓝色的，这些文字又是红色的。这部分内容是最最靠右的一栏，这行内容是斜体字。”这些和表现相关的信息是CSS的工作。在做前端开发的时候要记住：HTML告诉我们一块内容是什么（或其意义），而不是它长的什么样子。当我们提到“语义标记”的时候，我们所说的HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。

写语义化的HTML结构其实很简单，首先掌握html中各个标签的语义，<div>是一个容器；<strong>是表示强调；<ul><li>是一个无序列表等等；在看到内容的时候想想用什么标签能更好的描述它，是什么就用什么标签。

语义化的HTML结构到底有什么好处？

我们知道HTML5新增的标签，比如<header>和<footer>，html正在朝着更加健壮的语义化的HTML结构发展，xhtml2在这点上没html5先进，这也是xhtml2死亡的一个原因，这一点也说明了语义化的HTML结构是html的发展趋势。

1.去掉或样式丢失的时候能让页面呈现清晰的结构

html本身是没有表现的，我们看到例如<h1>是粗体，字体大小2em，加粗；<strong>是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。

2.屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页

例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音。

3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）

使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页. 语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面.

4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重

过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问。

5.你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记

因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为。SEO主要还是靠你网站的内容和外部链接的。

6.便于团队开发和维护

W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现实现模块化开发。 如有不同观点，补充，欢迎留言讨论。 文章转载自：WEB前段开发 原文地址：http://www.css88.com/archives/1668

©2010 一起CSS. All Rights Reserved.

相关日志

• HTML标签strong和em的区别 (3)

XHTML 代码：

<div id="slide">
	<a href="#" id="this_a"><img src="images/1.jpg" id="this_pic" alt="" /></a>
	<ul id="pic_list">
		<li><a href="http://www.qq.com"><img src="images/1.jpg" alt="" /></a></li>
		<li><a href="http://www.sina.com"><img src="images/2.jpg" alt="" /></a></li>
		<li><a href="http://www.163.com"><img src="images/3.jpg" alt="" /></a></li>
		<li><a href="http://www.baidu.com"><img src="images/4.jpg" alt="" /></a></li>
		<li><a href="http://www.17css.com"><img src="images/5.jpg" alt="" /></a></li>
	</ul>
	<span id="transparence"></span>
</div>

说明：#slide是最外面的容器，#this_pic是要显示的大图，#pic_list是图片缩略图，#transparence是一个半透明的层，因为想给#pic_list和里的缩略图应用半透明效果，但半透明效果会继承，无法更改，所以模拟了这个层。

CSS 代码：

#slide {
	position:relative;
	width:740px;
	height:240px;
	margin:20px auto;
}
#pic_list {
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	list-style: none;
	overflow:hidden;
	z-index:2;
}
#pic_list li {
	float:left;
	width:100px;
	height:52px;
	padding-top:10px;
}
#pic_list li img {
	position:absolute;
	top:18px;
	width:65px;
	height:35px;
	margin:0 20px;
	border:1px solid #fff;
}
#this_pic {
	position:absolute;
	width:100%;
	height:100%;
	border:none;
}
#transparence {
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:50px;
	border-top:1px solid #fff;
	background:#000;
	z-index:1;
}

jQuery 代码：

$(function (){
	$('#pic_list img').mouseover(function(){
	//如果鼠标移到的缩略图的地址和大图地址相等，则返回
	if($('#this_pic').attr('src') == $(this).attr('src')) return;
		//大幅图片淡出
		$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$(this).attr('src'));
		//把缩略图的链接地址传给大图的链接
		$('#this_a').attr('href',$(this).parents('a').attr('href'));
		//除此之外的缩略图位置和半透明还原
		$(this).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
		$(this).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
		//当前的缩略图上升动画效果
		$(this).animate({top:0},500).css('opacity','1');
	});
});
//初始化
$(function(){
	//模拟层半透明
	$('#transparence').css('opacity','0.4');
	//所有缩略图半透明
	$('#pic_list img').css({'opacity':'0.6'});
	//第一张缩略图的位置和不透明
	$('#pic_list img:eq(0)').css({'top':'0','opacity':'1'});
	//阻止缩略图链接
	$('#pic_list a').click(function(){return false});
});

为了通过验证，把半透明的代码写在 JS 里，半透效果的 CSS 代码不能通过验证就不用说了吧，而且要兼容浏览器得写三句。

查看Dome

代码不多，但效果我觉得还可以。如果您觉得有什么地方不够好，或有更好的实现方法，欢迎留言。

©2010 一起CSS. All Rights Reserved.

相关日志

• 修改：自动播放的jQuery幻灯片 (7)
• 自动播放的jQuery幻灯片 (15)
• jQuery插件Cloud Zoom (0)
• jQuery EasyUI (4)
• 用jQuery去除链接虚线 (20)
• 用标准W3C盒子模型 (2)

当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加，如图：

元素的顶边界与前面元素的底边界发生叠加。

当一个元素包含在另一个元素中时（假设没有填充或边框将边界分隔开），它们的顶和/或底边界也发生叠加，如图：

元素的顶边界与父元素的顶边界发生叠加。

尽管初看上去有点儿奇怪，但是边界甚至可以与本身发生叠加。假设有一个空元素，它有边界，但是没有边框或填充。在这种情况下，顶边界与底边界就碰到了一起，它们会发生叠加，如图：

元素的顶边界与底边界发生叠加。

如果这个边界碰到另一个元素的边界，它还会发生叠加，如图：

空元素中已经叠加的边界与另一个空元素的边界发生叠加。

边界叠加初看上去可能有点儿奇怪，但是它实际上是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的顶边界。如果没有边界叠加，后续所有段落之间的边界将是相邻顶边界和底边界的和。这意味着段落之间的空间是页面顶部的两倍。如果发生边界叠加，段落之间的顶边界和底边界就叠加在一起，这样各处的距离就一致了，如图：

边界叠加在元素之间维护了一致的距离。

margin 叠加只发生在普通文档流中块框的垂直，行内框、浮动框或绝对定位框之间的边界不会叠加。

margin 叠加虽然是合理的，但如果处理不当，会产生不期望的效果，解决的办法有以下几种：

1. 用外元素的 pading 代替元素的 margin；
2. 给外元素加透明边框，即：border:1px solid transparent; 也就是有分隔的时候不会产生 margin 叠加；
3. 元素绝对定位；
4. 外元素设置 overflow:hidden；
5. ……

©2010 一起CSS. All Rights Reserved.

随机日志

• IE6双倍margin bug (1)
• 门户网站与大型网站的CSS架构与组织 (1)
• IE条件注释续 (2)
• IE全球市占率重新超过60% (0)
• 让搜索更友好 (1)
• 3D效果CSS圆角 (4)
• web标准的开始——DOCTYPE (0)
• 别说IE6不认识!important (5)
• 2010年3月浏览器市场占有率 Chrome再次上涨0.5个百分点至6.13% (2)
• Mozilla公布Firefox占有率数据 全球接近30% 俄罗斯达到60% (3)

$(function(){
	$('a').bind('focus',function(){
		if(this.blur){ //如果支持 this.blur
			this.blur();
		};
	});
});

细心的您可能发现了按钮点击后也会出现虚线框，那就一起把它去掉吧：

$(function(){
	$('a,input[type="button"],input[type="submit"]').bind('focus',function(){
		if(this.blur){ //如果支持 this.blur
			this.blur();
		};
	});
});

查看Demo

很简单吧，简单的都没有什么技术含量了。。。

©2010 一起CSS. All Rights Reserved.

相关日志

• jQuery插件Cloud Zoom (0)
• jQuery EasyUI (4)
• 修改：自动播放的jQuery幻灯片 (7)
• 自动播放的jQuery幻灯片 (15)
• jQuery写的一个幻灯片 (18)
• 用标准W3C盒子模型 (2)

思路：

我们要达到的效果是：当“字符超过额定宽度”，则“显示三个小点”。

1. 当“字符超过额定宽度”，对于页面来说可能发生的一个改变就是：换行！
2. 换行将导致该范围的底线降低。
3. 那么，我们的目的则可以换算成：该范围的底线降低时显示三个小点。

图片说明：

查看效果

上图是经过我（即29楼的“xfcmamb”）的优化之后，作者发布的第二个方案，要看作者的第一个方案及我第二次优化的方案请点击下面相应的链接：

原作者的方案：http://bbs.blueidea.com/thread-2915238-1-2.html

第二次优化的方案：http://bbs.blueidea.com/thread-2916138-1-1.html

在目前我所知道的方法中，我认为这种方法是最好的方法，但缺点还是有的，比如：要更具具体的行高制作合适的背景图片，也就是说如果图片做的不合适，“省略号”的显示位置可能会不合理。

如果您有什么观点或更好的办法，欢迎发表留言。

©2010 一起CSS. All Rights Reserved.

随机日志

• XHTML各标签对搜索引擎的权重 (0)
• DIV+CSS网页设计视频教程 (5)
• IE9将于8月进行公试 (0)
• 5月份IE与Firefox市场份额双双下滑 (1)
• 仿淘宝UED主题imitate tb-ued发布 (2)
• CSS图像替换技术之Rundle的方案 (2)
• 网页版”Firebug” (9)
• 门户网站与大型网站的CSS架构与组织 (1)
• CSS中英文双语导航菜单 (0)
• HTML标签strong和em的区别 (3)

那这东西在哪呢？下面的代码就是了：

用法：

1. 复制上面的代码（并把它改成一行，我把它换行是为了防止代码过长而自动隐藏了）
2. 打开个网页，等它加载完
3. 在地址栏粘贴刚才复制的代码
4. 出来一个黑框框了吧，OK，可以用了，用鼠标点击某个地方，就能显示DOM 结构和一些 CSS 样式。

©2010 一起CSS. All Rights Reserved.

随机日志

• 5月份IE与Firefox市场份额双双下滑 (1)
• HTML标签strong和em的区别 (3)
• 让IE6也有最大高度max-height的效果 (7)
• Firefox 4.0 Beta 1发布 (1)
• web设计辅助利器——FF必备插件 (5)
• 3D效果CSS圆角 (4)
• css2高级选择器 (4)
• CSS hack区分浏览器（IE6、IE7、FF） (1)
• CSS中英文双语导航菜单 (0)
• 去除点击链接时出现的虚线框 (2)

IE6支持png8透明:

IE6与生俱来就支持png8的索引色透明度，但不支持png或8位以上的 alpha 透明度。而对于非动画的GIF建议你使用PNG8，因为体积会更小。 测试实例：http://blog.gulu77.com/demo/200809/test_IE6png8/

1、AlphaImageLoader 筛选器

使用简介：在每个标签样式中插入： filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’) 官方原文：http://support.microsoft.com/kb/294714/zh-cn go 测试实例：http://blog.gulu77.com/demo/200809/test_AlphaImageLoader/

2、PNG Transparency in IE

使用简介：相对来说比较简洁，使用一段包含滤镜的JavaScript 就可以模拟图片或背景 PNG alpha 透明度。 官方原文：http://codingforums.com/archive/index.php?t-80555.html go 测试实例：http://blog.gulu77.com/demo/200809/test_PNGTransparncyinIE/

3、IE PNG Fix v1.0 / 2.0 Alpha 2

使用简介：页面标签使用behavior:url(”iepngfix.htc”);来调用外部包含js、css的iepngfix.htc文件來修正PNG alpha 透明度。 官方原文：http://www.twinhelix.com/css/iepngfix/ go 测试实例：http://blog.gulu77.com/demo/200809/test_iepngfix/

4、IE7/IE8 JavaScript library

使用简介：ie7/ie8-js是一个解决IE与W3C标准的冲突的JS库，使微软的IE的行为像一个Web标准兼容的浏览器，支持更多的W3C标准。 官方原文：http://code.google.com/p/ie7-js/ go 测试实例：http://blog.gulu77.com/demo/200809/test_ie7-js/ 全部实例打包下载：http://blog.gulu77.com/demo/200809/test_png.rar 以上内容转自：Gulu77 原文地址：http://blog.gulu77.com/?p=147 还发现一个方法：belatedPNG 。具体方法是将下面的代码插到<head></head>之间：

此方法能同时解决图片和背景问题。 所用到的 js 文件您可以到作者的博客上下载，地址是： http://www.dillerdesign.com/experiment/DD_belatedPNG/

©2010 一起CSS. All Rights Reserved.

相关日志

• 隐藏域在ie中占空间的bug (2)
• 别说IE6不认识!important (5)
• 制作半透明效果 (0)
• 纯css下拉菜单详解 (12)
• css2高级选择器 (4)
• :hover伪类在IE6中的BUG (3)
• IE6双倍margin bug (1)
• 如何在IE6里定义高度小于18px的盒子 (0)
• 让IE6也有最大高度max-height的效果 (7)

<div class="box1">
    <span class="tl"></span><span class="tr"></span>
    <div class="cc">
        <p>圆角一</p>
    </div>
    <span class="bl"></span><span class="br"></span>
</div>

CSS 代码：

.box1 {
	background:url(images/bg1.gif) repeat-x #1d6cb7;
	margin-top:1em;
	position:relative;
	zoom:1;
	width:778px;
}
.box1 .tl, .box1 .tr, .box1 .bl, .box1 .br {
	width:5px;
	height:5px;
	position:absolute;
	background:url(images/bg3.gif) no-repeat;
	overflow:hidden;
}
.box1 .cc {
	height:40px;
	padding:5px;
}
.box1 .tl {
	left:0;
	top:0;
}
.box1 .tr {
	right:0;
	top:0;
	background-position:0 -5px;
}
.box1 .bl {
	left:0;
	bottom:0;
	background-position:0 -10px;
}
.box1 .br {
	right:0;
	bottom:0;
	background-position:0 -15px;
}

查看效果（上面的代码是第一个圆角的）

看看上面代码所用到的图片能更好的理解（下面）： 第一部分是左上角的，第二部分是右上角的，第三部分是左下角的，第四部分是右下角的。

©2010 一起CSS. All Rights Reserved.

相关日志

• CSS3圆角属性和浏览器私有圆角属性 (6)
• 用CSS滤镜制作圆角 (0)
• 一张图片实现圆角 (5)
• 上下两张图片CSS圆角 (0)
• 3D效果CSS圆角 (4)
• 流行的CSS圆角 (1)

<div id="wrap">
	<div id="left">
		<p>left</p>
		<p>left</p>
		<p>left</p>
		<p>left</p>
		<p>left</p>
	</div>
	<div id="center">
		<p>center</p>
		……（20个或更多个）
		<p>center</p>
	</div>
	<div id="right">
		<p>right</p>
		<p>right</p>
		<p>right</p>
	</div>
</div>

CSS 代码：

* {
	margin:0;
	padding:0;
}
#wrap {
	overflow:hidden;
	width:1000px;
	margin:0 auto;
}
#left, #center, #right {
	margin-bottom:-10000px;
	padding-bottom:10000px;
}
#left {
	float:left;
	width:250px;
	background:#00FFFF;
}
#center {
	float:left;
	width:500px;
	background:#FF0000;
}
#right {
	float:right;
	width:250px;
	background:#00FF00;
}

查看效果 从效果中可以看到，左右两列虽然内容少，但高度和内容最多的中间列等高。其核心代码（拿本例来说）是：

#wrap {
	overflow:hidden;
}
#left, #center, #right {
	margin-bottom:-10000px;
	padding-bottom:10000px;
}

其中的 10000px 可以修改为其他值，但不能小于最高列的高度。 经测试，此方法兼容 IE6/IE7/IE8 beta 2/FF/Opera/Chrome 。 方法很简单吧。从这里可以看出：看似简单的 CSS,其实并不简单。 ======= 华丽的分割线（2009/02/18） ================================== 前两天做网页的时候运用这样方法发现一个问题：如果子列有边框 border 属性的话，下边框不会将不显示（查看效果）。因为他们下面还有很长一部分，都被隐藏了，看图理解：

半透明部分都被隐藏了，所以看不到下边框。

©2010 一起CSS. All Rights Reserved.

随机日志

• 让IE6也有最大高度max-height的效果 (7)
• 解决下拉菜单被flash遮住问题 (0)
• IE6双倍margin bug (1)
• 自动播放的jQuery幻灯片 (15)
• IE条件注释续 (2)
• 用CSS滤镜制作圆角 (0)
• 修改：自动播放的jQuery幻灯片 (7)
• 百度有啊CSS圆角方案 (4)
• CSS图像替换技术之Rundle的方案 (2)
• XHTML各标签对搜索引擎的权重 (0)

因为该公司没有提供logo，所以用了一个临时的，该平台所属广州华正道物流有限公司，德立物流有限公司好像其公司在香港开的分公司，具体什么关系不清楚，反正就是这么一个平台了。

查看大图 查看网页

©2010 一起CSS. All Rights Reserved.

随机日志

• 符合web标准的css网站相当于已经做了30%的SEO工作 (0)
• 使用CSS定位页面的“footer” (1)
• IE6下!important的bug (1)
• 自动播放的jQuery幻灯片 (15)
• 门户网站与大型网站的CSS架构与组织 (1)
• IE的市场份额下降到历史最低 (3)
• Firefox 3.6.6发布 (0)
• IE全球市占率重新超过60% (0)
• 百度有啊CSS圆角方案 (4)
• 用CSS滤镜制作圆角 (0)

em 表示强调，strong 表示更强烈的强调。言简意赅，表明了 em 和 strong 的命名来历。并且在浏览器中，em 默认用斜体表示，strong 用粗体表示。这是第一个层次上的区别。

em 用来局部强调，strong 则是全局强调。从视觉上考虑，em 的强调是有顺序的，阅读到某处时，才会注意到。strong 的强调则是一种随意无顺序的，看见某文时，立刻就凸显出来的关键词句。斜体和粗体刚好满足了这两种视觉效果，因此也就成了 em 和 strong 的默认样式。 感觉上面已经解释得很清楚了？我们再来看看第三个层次上的区别。HTML5 草案 中做了详尽解释：

em 表示内容的着重点（stress emphasis），strong 表示内容的重要性（strong importance），strong 不会改变所在句子的语意，em 则会改变所在句子的语义。并且举了一个非常好的例子：

<p><em>Cats</em> are cute animals.</p>

强调猫，讨论的是哪种动物聪明可爱。

<p>Cats <em>are</em> cute animals.</p>

强调是，讨论的是猫是不是聪明可爱。

<p>Cats are <em>cute</em> animals.</p>

强调聪明可爱，讨论的是猫究竟是聪明可爱呢还是愚蠢讨厌。

<p><strong>Warning.</strong> This dungeon is dangerous.<strong>Avoid the ducks.</strong> Take any gold you find.<strong><strong>Do not take any of the diamonds</strong>,they are explosive and <strong>will destroy anything within ten meters.</strong></strong> You have been warned.</p>

strong 表示的是重要性上的强调，不会引起句子意思的变化。最后注意 em 和 strong 都可以有多重，比如可以用两个 strong 来表示内容很重要。 可以看出，第二个层次上所说的局部强调和全局强调是不够准确的。em 和 strong 区别的玄妙处，在 HTML5 草案里才得到淋漓尽致的阐释。推荐大家有时间的时候，仔细阅读 HTML5 草案。有很多元素的语义，都阐释得非常清楚，对于我们如何在最恰当的地方使用最恰当的标签，非常具有价值。 em 是句意强调，加与不加会引起语义变化。 strong 是重要性强调，和局部还是全局无关，局部强调用 strong 也可以，strong 强调的是重要性，不会改变句意。

文章转自：岁月如歌

原文地址：http://lifesinger.org/blog/?p=909

©2010 一起CSS. All Rights Reserved.

相关日志

• 语义化的HTML结构到底有什么好处？ (4)

单纯的页面重构，所涉及到的工作内容一般是“分析设计稿=>切图=>写HTML和CSS”，虽然看起来很少，但要做好这份工作，绝非所想的那么容易。原因很简单：工作内容单一，在时间和工作量上必会很苛刻，往往跟设计师的工作时间是3:1，即设计师给三天的时间，制作只给一天的时间完成；在这种工作强度下，很多人都是靠着对这份工作的喜爱在维持着，一旦工作热情消失，很容易就会变得枯燥，保持热情也成了重构工作者（也许是所有参加工作的人）应该具备的能力。

跟“前端工程师”所要求的有所不同，“页面重构”虽然也是“前端工程师”的一个范畴，在职业化中，对专职的页面重构者，要求当然也更高。不单是做出页面，而是做出好页面。又引出另一个话题，“何为好页面？”，一般包括下面几点：

1. 结构完整，可通过标准验证
2. 标签语义化，结构合理
3. 充分考虑到页面在站点中的“作用和重要性”，并对其进行有针对性的优化

很多同学多少都遇到过方向不明，不知道自己应该提高些什么，我们可以从“分析设计稿=>切图=>写HTML和CSS”这个工作内容，针对每一点提出一些要求，以方便我们分析自己的能力水平，为继续提高确定个方向：

一，设计稿的分析

设计稿的分析是指对设计稿如何制作成页面的分析，即哪一块的内容可以做为公共的部分、哪一块的内容结构可以如何实现等。对设计稿的分析能力可以划分成下面的几个阶段：

1. 能分清设计稿中的公共与私有的部分
2. 在1的基础上对各部分的实现方式有一个初步的方案（包括如何切图、写结构、写样式）
3. 在1的基础上，准确的给出各部分的实现方案（包括如何切图、写结构、写样式）
4. 在3的基础上，能同时考虑方案的扩展性、复用性及页面性能（包括如何切图、写结构、写样式）
5. 在4的基础上，考虑整站的结构分布（包括文件分布、目录结构）

上面这些都是在还没开始动手制作之前所要做的。

二，切图

切图是指将设计稿切成便于制作成页面的图片。都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，还包括把切出来的图片合并到一起，怎么切、从哪切才能将性能最大化，说“切图是一门艺术”完全不为过。切图也可以划分成几个阶段：

1. 切成所需要的图片（如何将需要的部分切出来）
2. 在1的基础上，对切出来的图片进行一些优化（包括压缩文件大小、选择图片类型）
3. 在2的基础上，规划切出来的图片（包括文件分布）
4. 在3的基础上，考虑整体的性能（包括合并图片、压缩文件大小）

HTML和CSS的编写

HTML和CSS的编写是指将上面完成的内容，通过HTML和CSS的编写，将设计稿转换成WEB页面最重要的一块，也是我们所要重点掌握的内容，把它们放在一起，是因为它们相互的关联性太强，HTML的写法会影响到CSS的写法，它又可以划分成下面几个阶段：

1. 还原设计稿视觉效果，并通过标准验证（HTML）
2. 在1的基础上，实现多浏览器的兼容（HTML）
3. 在2的基础上，标签语义化（HTML）
4. 在3的基础上，选择较优的实现方式（包括模块化结构，方便程序脚本使用，HTML和CSS）
5. 在4的基础上，考虑到扩展性、复用性和可维护性（HTML和CSS）
6. 在5的基础上，考虑到整站的样式分布（包括如何实现分布）
7. 在6的基础上，样式写法的优化（包括技巧的应用）

是对所遇到问题的解决能力，这一点在不同的阶段都可能会遇到，所以没有写到上面。

如果你已经达到或超过3、4、5，恭喜你，你已经是一个职业的“页面重构工作者”了。为了我们自身的发展，关注新技术、技术创新、提高用户体验、审美观、程序脚本的实现方式等，也是十分必要的。大家一起进步吧。

文章转自：Webteam

原文地址：http://webteam.tencent.com/?p=133

©2010 一起CSS. All Rights Reserved.

随机日志

• 门户网站与大型网站的CSS架构与组织 (1)
• “导”字导致样式失效 (5)
• 网页版”Firebug” (9)
• 流行的CSS圆角 (1)
• 让IE6也有最大高度max-height的效果 (7)
• 别说IE6不认识!important (5)
• 3D效果CSS圆角 (4)
• IE9将于8月进行公试 (0)
• 百度有啊CSS圆角方案 (4)
• Firefox 4.0 Beta 2预览版发布 (1)

1、设置的是自动隐藏

自动隐藏，那肯定有一个参考的宽度。如果这个宽度不能正好的容纳标题，那么后面的字就会被“剪掉”，只显示半部分。也许你会说：那就设一个正好的宽度。但是你有没有想过：如果标题中有标点符号、英文字母或数字呢？标点符号还好解决，中文的标点符号和汉字的宽度一样。但英文字母和数字就不好解决了，英文和数字的宽度会因为字体、个数的不同而不同。这就使原本“正好的宽度”变成“不是正好的宽度”。

2、设置的是显示省略号

设置显示省略号就不会出现文字被“剪掉”的情况。但有的浏览器不兼容，不兼容的浏览器仍然可能出现换行或撑破容器的情况。

3、自动隐藏于显示省略号一起用

一般情况下都是自动隐藏于显示省略号一起用，但不显示省略号的浏览器仍然有可能出现文字被“剪掉”的情况。

下面看一个例子，请点击这里，这个例子出现了上面三种情况。下图是该例在能显示省略号和不能显示省略号的浏览器中的效果：

从效果图可以看到：能显示省略号的浏览器效果还不错，但不能显示省略号的浏览就出现了文字被“剪掉”的情况，而且“剪”的部分都不一样。

另：如果加上 -o-text-overflow:ellipsis ，Opera 也可以显示省略号。

虽然 IE6 、IE7 、Opera 、Chrame 都能显示省略号，但还是有一些不同。比如截取的字数不一样、链接下划线长度不一样。所以，由于目前种种情况，我认为用 CSS 并不合适。

©2010 一起CSS. All Rights Reserved.

随机日志

• 遵循Web标准的网页设计工作流程(一) (0)
• 说说CSS Hack和向后兼容 (0)
• IE6双倍margin bug (1)
• 浏览器兼容常见问题 (0)
• 让搜索更友好 (1)
• IE全球市占率重新超过60% (0)
• 纯CSSTab面板/选项卡 (4)
• CSS中英文双语导航菜单 (0)
• 纯css下拉菜单详解 (12)
• CSS Expressions有多可怕 (3)

我又用 IE 8 beta 2 查看以前《制作半透明效果》的例子，也是没有效果。其他浏览器都没有问题，为何 IE 8 beta 2 却没有效果？难道 IE 8 beta 2 连自家的滤镜都不认识？但是我曾经看过一个也使用了 alpha 滤镜例子，在 IE 8 beta 2 里有效果。难道是我的例子不兼容 IE 8 beta 2 ？于是我试图修改代码，然而无论我增加或删除某些属性，始终没有效果。最后来了个狠的——把 DOCTYPE （最顶上的那行）声明删掉，终于，IE 8 beta 2 里有效果了。

效果是有了，但 DOCTYPE 声明是不能删的啊。删了的话，兼容就是个问题了，最起码盒子模型的解释都不一样（详情请查看《用标准W3C盒子模型》）。就为了 IE 8 beta 2 ，而使例子在 IE 系列浏览器中都错位，不值得。当然可以用 CSS hack ，但是不推荐。更好的解决办法我认为是：1）使用 jQuery ；2）把提示文字定位到其他地方。

才用 IE 8 beta 2 没多久，就发现几个问题，看来 IE 8 beta 2 真是不怎么样，希望正式版会更好。

©2010 一起CSS. All Rights Reserved.

随机日志

• css hack (19)
• 用js模拟css属性选择器 (6)
• 用js让“footer”处于底部 (0)
• 符合web标准的flash调用方法 (0)
• :hover伪类在IE6中的BUG (3)
• Firefox 3.6.6发布 (0)
• HTML4和浏览器默认样式 (0)
• IE9将于8月进行公试 (0)
• “导”字导致样式失效 (5)
• 3D效果CSS圆角 (4)

基本思路

其实很简单。把 img 标签放到 a 标签里面，给 a 标签设置一个较小的宽度，并且设置超过部分隐藏。当鼠标经过 a 标签时，把 a 标签的宽度改变为与图片大小相同。

代码实现

XHTML 代码：

<ul>
	<li><a href="#"><img src="images/sky.jpg" alt="" /></a></li>
	<li><a href="#"><img src="images/flow.jpg" alt="" /></a></li>
	<li><a href="#"><img src="images/tree.jpg" alt="" /></a></li>
	<li><a href="#"><img src="images/bord.jpg" alt="" /></a></li>
</ul>

CSS 代码：

* {
	margin:0;
	padding:0;
}
img {
	width:240px;
	height:300px;
	border:none;
	display:block;
}
ul {
	width:384px;
	margin:20px auto;
	list-style:none;
	background:#e6e6e6;
	border:7px solid #e6e6e6;
	overflow:hidden;
}
li {
	float:left;
}
a {
	position:relative;
	display:block;
	width:48px;
	text-decoration:none;
	color:#000;
	overflow:hidden;
	cursor: default;
}
a:hover {
	width:240px;
}
a:hover {
	background:no-repeat;
}

查看Demo

当然，和 js 制作的相比，还是差点，比如 js 制作的有动画缓冲效果，用户体验好些。

再看一个有提示的例子，查看Demo

©2010 一起CSS. All Rights Reserved.

随机日志

• CSS选择器的优先级 (0)
• web设计辅助利器——FF必备插件 (5)
• Firefox 4.0 Beta 1发布 (1)
• CSS中英文双语导航菜单 (0)
• 让IE6也有最小高度min-height的效果 (1)
• SEO/搜索引擎优化视频教程 (0)
• 三种有效的清除浮动的方法 (4)
• 符合web标准的css网站相当于已经做了30%的SEO工作 (0)
• 自动播放的jQuery幻灯片 (15)
• 解决下拉菜单被flash遮住问题 (0)

IE6 对 !important 的支持存在 bug ，有很多人因此作为 IE6 的 hack 。用多了，传多了，很多人就说 IE6 不支持 !important ，给新人带来一些影响。

在《IE6下!important的bug》中已经说了这个问题，现在再举几个例子说明这个问题，以下面的 XHTML 代码为例：

第一个例子的 CSS 代码：

点击这里查看效果

在 IE6 里，第一行文字为红色，!important 起作用了。如果 .first 不加 !important ，那么在所有浏览器中第一行都显示蓝色，因为 #list li 的权重比 .fisrt 高。当然 .first 改写成 #list .first 会更好，但为了举例子，所以不这样写。

第二个例子的 CSS 代码：

点击这里查看效果

同样，!important 在 IE6 里起效果了。

再看第三个例子的 CSS 代码：

点击这里查看效果

这次 !important 在 IE6 里就不起效果了。

综合上面三个例子得出这么一个结论：在同一个选择器内有重复的属性的话，此选择器内的此属性的 !important 在 IE6 里无效。

所以，并不能说 IE6 不支持 !important ，只是支持的不够好。

©2010 一起CSS. All Rights Reserved.

相关日志

• 隐藏域在ie中占空间的bug (2)
• IE6支持PNG透明(alpha通道)的4种方法 (7)
• 纯css下拉菜单详解 (12)
• css2高级选择器 (4)
• :hover伪类在IE6中的BUG (3)
• IE6双倍margin bug (1)
• 如何在IE6里定义高度小于18px的盒子 (0)
• 让IE6也有最大高度max-height的效果 (7)
• IE6下!important的bug (1)

对于一些浏览器，它们有其私有的圆角属性。如 FF 的 -moz-border-radius ，Safari 和 Chrome 的 -webkit-border-radius 。效果见下图：

FF 的圆角

Safari 和 Chrome 的圆角(Safari 和 Chrome 使用的是同一种内核，这里就只附 Chrome 的效果了)

IE 和 Opera 就没有私有的圆角属性了，如果有的话，那制作圆角应该就简单多了，把各自的私有属性全部写上，让各个浏览器“对号入座”，就达到了“兼容”的效果。

©2010 一起CSS. All Rights Reserved.

相关日志

• 百度有啊CSS圆角方案 (4)
• 用CSS滤镜制作圆角 (0)
• 一张图片实现圆角 (5)
• 上下两张图片CSS圆角 (0)
• 3D效果CSS圆角 (4)
• 流行的CSS圆角 (1)

首先来看一个例子，点击这里查看（用 IE 浏览器喔）。

看了上面的例子，也许你就知道制作的原理了。我们只用《一张图片实现圆角》例子中圆圈图片的1/4（左上部分）： ，放 4 张，对相应的图片进行相应的翻转，然后定位到父容器的相应位置，就实现了圆角。

代码实现

XHTML代码：

CSS代码：

查看效果

和《一张图片实现圆角》一样，如果父容器的高度为基数，圆角在 IE6 里下方也会出现一条横线。

©2010 一起CSS. All Rights Reserved.

相关日志

• 百度有啊CSS圆角方案 (4)
• CSS3圆角属性和浏览器私有圆角属性 (6)
• 一张图片实现圆角 (5)
• 上下两张图片CSS圆角 (0)
• 3D效果CSS圆角 (4)
• 流行的CSS圆角 (1)

原文地址：http://sonspring.com/journal/hoverbox-image-gallery

例子地址：http://host.sonspring.com/hoverbox/

效果预览：

从上面的例子可以看到，为了兼容 IE6 ，用了两张样式表。我在想：能不能只用一张样式表？我把他的两张样式表合在一起后，在 IE6 、IE7 、FF 、opear 中浏览没有任何问题，然而在 Chrome 中去没有效果了。我就在想：能不能修改修改，只用一张样式表，并且能在上述所有浏览器中实现效果。经过多次修改实验后，终于实现了。我给第二张图片套了一个 span 标签，CSS 代码也做了一定的修改。详细例子请点击这里查看。

原先我一直都认为 CSS 没有逻辑性，所以不会有太大的灵活性或可变性（不知道用词是否恰当），但现在却越来越觉得：CSS 虽然是死的，但人是活的。活生生的人有各种各样不一样的想法。就如的这个例子，要制作这种效果，我们一般会想到 javascript ，但他却突破常规，完全只用 CSS 。

=======华丽的分割线=========================================

读者“老鼠”提出上面修改的例子不兼容 IE8 beta 2 ，所以特意装上了 IETester 进行查看，看到确实不行。在 IE8 beta 2 里的效果是：鼠标第一次移动到小图片上的时候，效果正常，大图片出现在了指定的位置。然而第一次之后，大图却跑到浏览器左上角去了，似乎第一次之后，大图的绝对定位是以浏览器窗口为基准。经过检查之后，发现是 .img1{display:block} 导致的，原本此属性是为了修复 img 3px bug 的，没想到却导致在 IE8 beta 2 里出现异常（不知道这算不算 IE8 的 bug），让人不能理解。既然这条属性有问题，那就换一种解决办法，改成 .img1{vertical-align:top} ,次属性也能修复 img 3px bug ,并且使例子在 IE8 beta 2 里正常。修复后的例子请点击这里查看。

再次感谢“老鼠”的测试！（2008.12.18）

©2010 一起CSS. All Rights Reserved.

随机日志

• 让搜索更友好 (1)
• jQuery插件Flip (1)
• IE的条件注释 (0)
• h1,h2,h3和strong标签的seo解说 (0)
• 网页版”Firebug” (9)
• 让IE6也有最小高度min-height的效果 (1)
• 几种常见浏览器内核简介 (0)
• 制作半透明效果 (0)
• CSS图像替换技术之Fahrner的方案 (0)
• 解决下拉菜单被flash遮住问题 (0)

其实这张图片是一个小圆圈，如下面的例子将要使用的图片为 10 * 10 大小的图片： ，太小了是吧，不过已经够了。

基本思路

准备四个小容器，分别放小圆圈图片的左上、右上、左下、右下四个部分，然后再分别定位到父容器的四个角上。

图片示意：

代码实现

XHTML代码：

四个 b 为小容器，不要管它们，放上去就是了。

CSS代码：

查看效果

这种方法似乎很完美，但遗憾的是：如果父容器（本例为 #container）的高度为基数时，在 IE6 里下方会出现一条横线，如下图：

所以，如果使用这种方法，就要控制好父容器，使它的高度为偶数。

另外：由于 IE 默认行高，b{height:5px} 会没有效果，所以加上了 font-size:0 消除了这个 bug ，虽然 overflow:hidden 也可以消除这个 bug ，但本例中不适合用这种方法，否则在 IE 中下半部分的圆角会没有效果或效果不完美（IE bug 真多 -_-!）。

©2010 一起CSS. All Rights Reserved.

相关日志

• 百度有啊CSS圆角方案 (4)
• CSS3圆角属性和浏览器私有圆角属性 (6)
• 用CSS滤镜制作圆角 (0)
• 上下两张图片CSS圆角 (0)
• 3D效果CSS圆角 (4)
• 流行的CSS圆角 (1)

搜索功能的 XHTML 代码一般如下：

默认情况下，在各个浏览中的效果如下图：

给它加上样式：

加上样式之后，在各个浏览器中的效果都如下图：

我们再给它添加提示：在 XHTML 代码中，给文本框加上默认的文字 value="请输入关键字" ，然后再加上 javascript 代码，使用户用鼠标点击文本框时，默认的文本消失，能够直接输入关键字。

javascript代码：

相关解释：

onfocus —— 元素聚焦时触发的事件

onblur —— 元素失去焦点时触发的事件

至此，制作完成。查看效果。

©2010 一起CSS. All Rights Reserved.

相关日志

• 用js让“footer”处于底部 (0)

圆角上半部分和下半部分图片：

上下两张图片和中间元素的左右边框就组成了完整的圆角。

例子代码

XHTML代码：

XHTML代码不一定要这样写，您可以根据您的实际情况写出更有语义的XHTML代码，这里这样写是为了更好的理解这种制作方法。

CSS代码：

查看效果

#top 放圆角上半部分图片，#bottom 放圆角下半部分图片，#content 设置左右边框，合起来就成了完整的圆角。

©2010 一起CSS. All Rights Reserved.

相关日志

• 百度有啊CSS圆角方案 (4)
• CSS3圆角属性和浏览器私有圆角属性 (6)
• 用CSS滤镜制作圆角 (0)
• 一张图片实现圆角 (5)
• 3D效果CSS圆角 (4)
• 流行的CSS圆角 (1)

这种3D效果CSS圆角和《流行的CSS圆角》制作方法是一样的，只是左右上下边框颜色不一样，左上浅，右下深，看上去有阴影，因此就产生了这种3D效果。

既然制作方法和《流行的CSS圆角》一样，这里就不啰嗦了，下面给出相应的代码。

XHTML代码：

CSS代码：

查看效果

由于不同的边框要设置不同的颜色，所以 CSS 代码较多，容易混淆，请多看几遍。

更多例子：

• 3D效果CSS圆角2
• 3D效果CSS圆角3
• 3D效果CSS圆角4

©2010 一起CSS. All Rights Reserved.

相关日志

• 百度有啊CSS圆角方案 (4)
• CSS3圆角属性和浏览器私有圆角属性 (6)
• 用CSS滤镜制作圆角 (0)
• 一张图片实现圆角 (5)
• 上下两张图片CSS圆角 (0)
• 流行的CSS圆角 (1)

先看效果：

制作方法

为了更好的理解，先用简单的代码为例。

XHTML代码：

CSS代码：

这段代码效果如下图：

.top 是一个容器，.b1 是圆角顶部的横线，.b2 .b3 .b4 分别是设置递减的左右 margin 和相应的 border ，他们便组成了圆角圆弧中的几个点。合在一起，就组成了上半部分的圆角。看下面的动态图就能很好的理解了。

为了看的更清楚，图中用了较粗的“线”和“点”，看起来锯齿比较明显，而网页上设置的 1px、2px 就不容易看出锯齿了。

下半部分和上半部分的原理是一样的，只是“倒”过来了。

完整的代码

XTHML代码：

CSS代码：

查看效果

注意各个数值的设置。

©2010 一起CSS. All Rights Reserved.

相关日志

• 百度有啊CSS圆角方案 (4)
• CSS3圆角属性和浏览器私有圆角属性 (6)
• 用CSS滤镜制作圆角 (0)
• 一张图片实现圆角 (5)
• 上下两张图片CSS圆角 (0)
• 3D效果CSS圆角 (4)

基本思路

以常见的架构来为例，容器 #container 内有上中下三部分，分别为 #header 、#content 、#footer。首先分别获取容器 #container 和浏览器的实际高度，如果容器 #container 的高度小于浏览器的高度，就让 #footer 绝对定位到底部。

代码实现

XHTML 代码：

javascript 代码：

解释一下两个重要的属性 scrollHeight 和 clientHeight：

scrollHeight 层的实际高度，实际有多高就多高，与当前网页高度无关；

clientHeight 层在当浏览器屏幕的高度，非该层的实际高度。

为了让例子效果更明显，再加上一些 CSS 代码：

这样，如果网页的高度小于浏览器的高度，那么 footer 部分就会定位到底部。

查看效果

©2010 一起CSS. All Rights Reserved.

相关日志

• 让搜索更友好 (1)

首先考虑外层设置一个容器 div ，id 设为 #container ，使他的高度为浏览器窗口的高度，然后将 #footer 这个 div 设置为 #container 的子 div，并使用绝对定位的方式，使他固定到 #container 的底端，以实现希望的效果。

点击这里察看案例页面效果。 改变浏览器的高度和宽度，可以看到 Footer 部分的效果。

代码实现

下面先考虑HTML结构，这个演示页面的HTML代码非常简单。

然后设置CSS，

1：首先要给 html 和 body 元素设置高度（height属性）为100% （第5行），这样先保证根元素的高度撑满整个浏览器窗口，然后下面才能使 #container 的高度撑满整个浏览器窗口。至于为什么用同时设置 html 和 body 元素，是因为 Firefox 和 IE 认为的根元素不一样，因此这里都给他们设置上。

2：然后把 #container 的高度也设置为 100% （第8行），但是要注意，这里使用了“min-height”属性，而不是普通的 height 属性，这是因为我们要考虑到，如果 #content 中的内容如果增加了，他的高度超过了浏览器窗口的高度，那么如果把 #container 的高度仍然是 100%，就会导致 #footer 仍然定位在浏器窗口的下端，从而遮盖了 #content 中的内容。而使用 min-height 属性的作用就是使 #container 的高度“至少”为浏览器窗口的高度，而当如果它里面的内容增加了，他的高度会也跟随着增加，这才是我们需要的效果。

但是需要说明的是，在 Firefox 和 IE7 中，支持 min-height 属性，而 IE6 中，并不支持 min-height 属性，但是“歪打正着”的是，IE6 中，会把 min-height 属性解释为 height 属性，但是 IE6 中 height 属性的效果却是 min-height 本来应该具有的效果，也就是说，在 IE6 中，子 div 的高度会撑大父 div 的高度。所以这样正好可以实现在 IE6、IE7 和 Firefox 中都可以正确实现我们希望的效果了。

3：接下来，将 #container 设置为相对定位（第9行），目的是使他成为它里面的 #footer 的定位基准，也就是所谓的“最近的定位过的祖先元素”。

4：然后把 #foooter 设置为绝对定位（第17行），并使之贴在 #container 的最下端（第18行）。

5：但是要注意，如果当我们把 #foooter 贴在 #container 的最下端以后，他实际上已经和上面的 #content 这个div 重叠了，为了避免覆盖 #content 中的内容，我们在 #contetn 中设置了下侧的 padding，使 padding-bottom 的值等于 #footer 的高度（第13行），就可以保证避免覆盖 #content 的文字了，这个高度的计算注意代码中的注释中给出的计算方法（第14行）。

点击这里察看案例页面效果。

文章摘自：前沿视频教室

原文地址：http://learning.artech.cn/20080328.css-footer-position.html

©2010 一起CSS. All Rights Reserved.

随机日志

• 纯CSSTab面板/选项卡 (4)
• CSS hack区分浏览器（IE6、IE7、FF） (1)
• 几种常见浏览器内核简介 (0)
• 各知名网站的团队博客、招聘网站 (0)
• 纯css下拉菜单详解 (12)
• Mozilla公布Firefox占有率数据 全球接近30% 俄罗斯达到60% (3)
• 我看超过部分自动隐藏或显示省略号 (4)
• XHTML各标签对搜索引擎的权重 (0)
• 上下两张图片CSS圆角 (0)
• web设计辅助利器——FF必备插件 (5)