新增的 input 元素类型

也许你看到一些类型就知道它是用来干什么的，如 email、date 等，下面就来更详细的说明和在一些浏览器中的效果。

color

color 类型用来选取颜色，它提供了一个颜色选取器，值为 16 进制符号，如：#ff0000。目前只在 Opera 和 Blackberry 浏览器中支持。

date

date 类型是一个日期选择器，有了这个就不需要用 JavaScript 编写日历控件了，非常方便。

datetime 和 datetime-local

datetime 类型是用来输入 UTC 日期和时间的文本框，而 datetime-local 类型是用来输入本地日期和时间的。它们与 date 类型的区别是后面多了一个时间框和“UTC”。

month 和 week

month 类型是月份选择器，它的值为：年-月，如：2012-01；week 类型是周选择器，它的值为：年-W周数，如：2011-W02。

time

time 类型是时间文本框，可以手动输入或用右边上线箭头控制。显示效果可以查看 datetime-local 效果的右边。

email 和 url

email 类型用来输入 E-mail 地址，它会验证文本框内的内容是否为合法的 E-mail 地址。 url 类型是用来输入 url 地址的，它会验证 url 地址是否合法。

number 和 range

number 类型是专门用来输入数字的，并且在提交时会检验是否为数字。number 类型有 max、min 和 step 属性。max 是允许的最大值，min 是允许的最小值，step 是间隔。设置了这些属性后，如果手动填入的数字不符合这些属性条件，将不能提交。 range 类型是一个数字滑动条。它与 number 类型功能类似，也有 max、min 和 step 属性，在 Opera 中，可以用左右方向键控制。range 类型自身没有一个明显的“数值”表示当前值，但可以使用 output 输出当前值。

search

search 类型的是用来输入搜索关键词的文本框，它与 text 类型在功能都没有太大区别，只在外观上有细微的区别。在 Chrome 10 和 Safari 5 中，当用户输入内容时，输入框右侧会有一个“×”按钮，单击该按钮，将清空输入框内的内容，使用非常方便。

tel

tel 类型是用来输入电话号码的，它没有特殊的验证规则，不强制输入数字，因为各个国家、地区的电话号码不一样，但可以根据具体情况用 pattern 属性来验证。

在 HTML 5 中，除了新增 input 元素的类型外，还新增了一些表单元素，如：datalist、keygen、output 等。

datalist

datalist 元素是用来辅助表单中文本框输入的，它本身是隐藏的，与表单文本框的“list”属性绑定，即将“list”属性值设置为 datalist 元素的 id 值。绑定成功后，当输入内容时，datalist 元素以列表的形式显示在文本框的底部，提示输入字符的内容。

keygen

keygen 用于生成页面的密钥。一般情况下，如果表单中使用了该元素，在表单提交时，该元素将生成一对密钥：一个保存在客户端，称为私密钥（Private Key）；另一个发送至服务器，由服务器进行保存，称为公密钥（Public Key），公密钥可以用于客户端证书的验证。

output

output 元素用于显示各种不同类型表单元素的内容，如输入的值、JavaScript 代码执行后的结果等。该元素必须从属于某个表单，或通过属性指定某个表单。为了获取表单的值，需要设置 output 元素的“onFormInput”事件，以便在表单输入框中输入内容是，监测到其中的值。

HTML 5 新增表单属性

HTML 5 不但新增加了表单元素、表单类型，还增加了一些表单属性，同时使用的话，能更好的提高率开发者的工作效率，同时也提高了用户的操作体验。

autocomplete

是否自动填充表单，默认值是 no。有些搜索引擎，如百度、google 等，它们会自动匹配当前热门搜素，所以禁止表单自动填充。此属性原本是 Microsoft 的专有属性，现在 HTML 5 也支持了。

autofocus

自动聚焦。加入这个属性后，页面加载时，光标会自动聚焦到加入了此属性的输入框。比如登录页面，加入此属性后，页面加载后就可以直接输入，而不需要点击鼠标或使用 Tab 键聚焦后再输入。

form

HTML 5 之前，表单元素必须在表单里面，如 input 必须在 form 里面，而 HTML 5 出现后，只要加上 form 属性，表单元素可以放到页面的任意位置。

formnovalidate 和 novalidate

表单的验证很重要，但有的时候出于某种特殊情况，不需要对表单验证时，可以使用 formnavalidate 或 novalidate，它们都可以不验证提交表单，却别在于：novalidate 用户 form 标签；formnavalidate 用于 submit 或 image 类型的提交按钮。

formmethod、formenctype 、formnovalidate 和 formtarget

这几个属性和 formnovalidate 类似，将这些属性添加到 submit 按钮将会覆盖 fomr 元素对应属性的值或默认值。例如，如果 form 元素中的 method 属性被设置为 post ，则当点击一个特定的按钮时，你可以使用 formmethod="get" 覆盖它。

<form action="check.php" method="post">
	<label for="username">帐号：</label>
	<input id="username" name="username"><br>
	<label for="password">密码：</label>
	<input type="password" id="password" name="password"><br>
	<input type="button" value="用户登录">
	<input type="button" formmethod="post" value="以get方式提交">
</form>

list

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。效果可以查看 datalist

min、max 和 step 属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。 max 属性规定输入域所允许的最大值；min 属性规定输入域所允许的最小值；step 属性为输入域规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）。

multiple

当设置为 true 是，表单可以有多个值，用英文逗号分隔。例如，file 类型的表单中加入此属性后，选择文件时，可以按住 Ctrl 进行多选。

pattern

使用正则表达式验证 input 元素的内容，和之前用 JavaScript 写正则验证一样，只是把正则表单写在 pattern 的值里。

placeholder

输入框占位符，常用作输入提示，如搜索框。在光标聚焦时，占位符自动消失，不要担心还需要手动删除。

required

是否允许为空，加入了这个属性后，表单不允许为空。如果为空，在提交的时候会出现相应的提示，并聚焦到该表单域。上面的那些新增表单类型默认都不会验证是否为空，它们只会验证输入的内容是否合法。

上面就是 HTML 5 主要的新增表单、表单类型以及属性，大部分都有配图，如果配图没看明白，你也可使用最新的 Opera 浏览器（目前这款浏览器对表单的支持情况较好）点击这个 Demo 自行测试。

HTML 5 给我们带来了更丰富的内容，更好的体验，虽然 HTML 5 的普及道路是曲折的，但未来是光明的。

©2012 一起CSS. All Rights Reserved.

相关日志

• W3C发布HTML5官方Logo (5)
• HTML 5新标签 (3)

这一成不变的颜色，有没有让你的视觉感到疲劳。你有没有想过换成自己喜欢或者其他颜色呢？也许你会问这个可能吗？之前不可能，但现在，CSS 3 让这个成为可能。

要改变选中文本的颜色和背景颜色，需要使用 CSS3 新增的伪 ::selection，设置颜色 color 和背景颜色 background-colcr 即可，如：

::selection { color:#333; background-color:#cce8cf;}
::-moz-selection { color:#333; background-color:#cce8cf;}
::-webkit-selection { color:#333; background-color:#cce8cf;}

上面的代码效果如下图（截自 Firefox 5 浏览器）：

当然，你也可以结合CSS选择器，指定标签或区域文本选中后的样式状态。如：

h2::selection { color:#f60; background-color:#cce8cf;}
p::selection { color:#333; background-color:#cce8cf;}

h2::-moz-selection { color:#f60; background-color:#cce8cf;}
p::-moz-selection { color:#333; background-color:#cce8cf;}

h2::-webkit-selection { color:#f60; background-color:#cce8cf;}
p::-webkit-selection { color:#333; background-color:#cce8cf;}

大部分标签使用 selection 没有问题，但 a 标签在不同的浏览器下有差异，有的浏览器 a 标签不会应用上 ::selection 样式（如 FF5，Chrome12），有些浏览器则会应用上 ::selection 样式（如 Opera 11.50）。这可能是有的浏览器认为a比较重要，为了让用户知道这是链接，所以不改变颜色。

查看 Demo 页面：CSS3 ::selection 属性 Demo

目前 Firefox、Safari、Chrome 以及 Opera 浏览器都支持 ::selection 属性，如果浏览器不支持该属性，则会被忽略它，不会产生任何不良的影响。

参与测试的浏览器及支持情况

注意：图片表示支持，表示不支持，表示部分支持或需要加前缀。

如果你想让自己的页面更有特色、个性，不妨加上 CSS 3 ::selection 属性，设置自己喜欢的颜色，让“选择”五彩缤纷。

©2012 一起CSS. All Rights Reserved.

相关日志

• 愚你一下 美团网翻转 (2)
• 令人难以置信的纯CSS3图标和Logo (11)

前段时间我就遇到这样的问题，用 Firebug 查看，看到代码有一个地方“断”开了，点击那块区域竟然能编辑，里面全是空格。把这些空格删掉之后页面就正常了。好吧，既然是页面上多了空格，那就删掉。然后在源文件里没有看到空格，甚至连标签的缩进都删除了，那些空格依然存在。

经过排查，发现是 include 的文件问题，但是为什么这个文件会有问题呢？百度 GG 后，才知道这个问题由 utf-8 文件 Unicode 签名 (BOM) 产生的。

什么是 Unicode 签名 (BOM)？

BOM(Byte Order Mark)，是 utf 编码方案里用于标识编码的标准标记，在 utf-16 里本来是 FF FE，变成 utf-8 就成了 EF BB BF。这个标记是可选的，因为 utf-8 字节没有顺序，所以它可以被用来检测一个字节流是否是 utf-8 编码的。微软做这种检测，但有些软件不做这种检测，而把它当作正常字符处理。

微软在自己的 utf-8 格式的文本文件之前加上了 EF BB BF 三个字节, Windows 上面的 Notepad 等程序就是根据这三个字节来确定一个文本文件是 ASCII 的还是 utf-8 的, 然而这个只是微软暗自作的标记, 其它平台上并没有对 utf-8 文本文件做个这样的标记。也就是说一个 utf-8 文件可能有 BOM，也可能没有 BOM。

如何解决？

知道了原因，问题就好解决了，就是让 utf-8 文件不包含或者取消 Unicode 签名 (BOM)，以下方法可以解决此问题：

1. 用 UltraEdit-32 打开文件，切换到十六进制编辑模式，察看文件头部是否有 EF BB BF
2. 用 Dreamweaver 打开，察看页面属性，看“包括 Unicode 签名 (BOM)”前面是否有个勾（默认是没有勾的）

其他编辑器请查看相应的方法。

据了解，utf-8 文件 include 还可能产生以下问题：

1. 页面显示一个“锘”字，其他一片空白
2. 不能登入或者不能登出
3. 页顶出现一条空白
4. 页顶出现错误警告
5. 其它不正常的情况
6. 生成的图片浏览器无法识别

所以，如果你遇到这些问题，不妨看看是不是文件“包括 Unicode 签名 (BOM)”。

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

因为本人一直用 Dreamweaver ，上面说过 Dreamweaver 默认不“包括 Unicode 签名 (BOM)”，所以我没有遇到过这个问题，所以就没有例子来截图。今天去浏览一个博客发现有这个问题，截图如下：

截图上蓝色的区域就是产生的空格，索性他用的是绝对定位，所以没有被空格撑破页面。或许这也算是一种解决问题的办法。

具体是那个地址就不说了，这个不重要，只是拿来举个例子，没有其他意思。

©2012 一起CSS. All Rights Reserved.

随机日志

• Firefox 3.6.6发布 (0)
• DIV+CSS网页设计视频教程 (5)
• IE的市场份额下降到历史最低 (3)
• web标准的开始——DOCTYPE (0)
• 用Minify加快你的网站速度 (11)
• css hack (19)
• 更具亲和力的文字隐藏方法 (0)
• wordpress中文工具箱使用方法 (8)
• 九月份全球主流浏览器市场排行榜 (1)
• 我的简历 (0)

微软在今年 3 月 14 日发布了 IE9 ，而 Mozilla 基金会在 3 月 22 日推出了 Firefox4 。尽管 Firefox4 发布时间更晚，但截至 3 月末，IE9 占据了全球浏览器市场 1.0% 的份额，而 Firefox4的市场份额却达到了 1.7%。

在使用战略上， Firefox4 相对于 IE9 具有明显的优势。Mozilla 基金会的 Firefox4 能够与 Windows XP 操作系统兼容，但 IE9 却只能与 Vista SP2 或是 Windows 7 兼容。考虑到当前全球使用 Windows XP 操作系统上网的电脑占到了上网电脑总量的 54.4%，而 Windows 7 和 Vista 的份额分别为 24.2% 和 10.6%，如果微软让 Windows XP 兼容 IE9，那么即便是 Windows 7 市场份额不断提升，IE9 的市场份额仍将会获得很大的提升。

把各种版本的浏览器都计算在内，IE 仍然是全球浏览器市场的龙头，但市场份额继续处于下滑之中。IE 浏览器在 3 月份的市场份额为 55.92%，低于 2 月份的 56.77%。 Firefox 浏览器份额略有上升，从 21.74%上升至 21.80%。谷歌 Chrome 浏览器的份额获得了大幅提升，市场份额从 10.93% 上升至 11.57%。苹果 Safari 排名第四，市场份额从 6.4% 上升至 6.6%。Opera 排名第五，市场份额未发生任何变化，仍为 2.2%。

不过单在美国市场，这一情况却发生了明显的变化。IE 浏览器的市场份额上升了 0.19 个百分点，达到 72.44%，而 Chrome 和 Firefox 浏览器的份额则分别下滑了 0.10% 和 0.08%。

Mozilla 基金会此前曾表示，在 Firefox4 发布的当日，该款浏览器的下载总次数达到 700 万次，较 IE9 首日 230 万次的下载量多出一倍以上。不过这并未给整体浏览器市场的排名带来太大的变化。

文章转自：cnBeta.COM

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

©2012 一起CSS. All Rights Reserved.

相关日志

• 尽享网络之美 微软正式发布IE9 (2)
• 1月份IE市场份额环比下滑1.1个百分点至56% (0)
• 12月份浏览器市场排行榜 (1)
• 10月浏览器市场排行 Chrome增长快 (1)
• 九月份全球主流浏览器市场排行榜 (1)
• IE9公测版本发布：简洁 极速 (8)
• IE6全球份额继续下跌 中国是最大用户群 (3)
• 7月份全球主流浏览器市场份额 (2)
• Firefox 4.0 Beta 2预览版发布 (1)
• IE全球市占率重新超过60% (0)

搞怪之余，我们也可以看看他是如何实现的。查看源代码能明显的看到是通过 CSS3 的变形、变换属性 transform 实现的，可惜的是，这个属性还没有任何浏览器支持（包括 Firefox4、Chrome12、Opera11、IE9）,但他们却都有各自的私有属性能实现这个效果，所以几乎是在所有浏览器中打开今天的美团网，都能看到同样的效果。

transform 可用于内联(inline)元素和块级(block)元素，它有几个属性值参数：

1. translate 位移基于 X 和 Y 坐标重新定位元素，当使用一个参数时表示 X 轴和 Y 轴的参数相同，效果类似 position:relative 。
2. scale 缩放可以让任一元素变大、变小。它使用一个或者两个正数和负数以及小数作为参数，当使用一个参数时表示 X 轴和 Y 轴的缩放相同。
3. rotate 旋转通过传递一个度数值来转动一个对象。
4. skew 倾斜参数是度数，当使用一个参数时表示 X 轴和 Y 轴的参数相同。
5. matrix 矩阵变换基于 X 和 Y 坐标重新定位元素，它使用 6 个参数。

至于 IE，虽然不支持 transform，但 IE 的 fliph 滤镜能实现这样的效果，之前在《用CSS滤镜制作圆角》中介绍过 fliph。

如果你也想愚弄一下你的访客，不妨像美团网一样，把下面的代码加到网页中。

html {
	filter: fliph; /* for ie */
}
body {
	transform: rotateY(180deg); /* css3 */
	-moz-transform:skew(0deg, 180deg) scale(-1, 1); /* for ff */
	-webkit-transform: rotateY(180deg); /* for chrome and safari */
	-o-transform:skew(0deg, 180deg) scale(-1, 1); /* for opera */
	overflow-x:hidden;
}

©2012 一起CSS. All Rights Reserved.

相关日志

• 用 selection 让“选择”五彩缤纷 (9)
• 令人难以置信的纯CSS3图标和Logo (11)

微软 IE 副总裁 Dean Hachamovitch 在发布会上表示："最好的网络体验是通过 IE9 在 Windows 上实现的。现在，互联网上丰富的内容可通过 Windows 和 IE 来呈现并发挥 PC 硬件的最佳性能。凭借'网站固定'等一系列创新功能，用户访问互联网网站的体验越来越流畅，就像在 Windows 7 中打开本地程序一般。"

全面提速，充分利用硬件加速

IE9 充分利用了现代电脑硬件的潜能，全面提高网络浏览性能——包括引入新的脚本引擎 Chakra，它采用多核 CPU 来提高性能，使 IE9 的浏览渲染速度达到 IE8 的 11 倍。同时 IE9 还是第一个采用全面硬件加速的浏览器，它充分利用图形处理单元（GPU）的能力，把更多的图形处理重新分配给 GPU 而不是 CPU。简言之，IE9 释放了以前浏览器所没有充分利用的电脑硬件性能中的 90%。

IE9 硬件加速的文本、视频和图形意味着网站可像安装在计算机上的程序一样执行。高清视频十分流畅，图形清晰且响应及时，颜色逼真，网站具有前所未有的交互性。通过子系统增强功能，网站和应用程序的加载速度更快且响应更及时。IE9 与 Windows 7 提供的强大图形功能相结合，你可在 Windows 上获得最佳 Web 体验。

对于开发者来说，开发者现在能够创建更快、更逼真的网站，感觉就像使用互操作式 HTML5 的本地应用程序或通过使用 Adobe Flash Player 和 Microsoft Silverlight 等插件而运行的本地应用程序，同时 Adobe Flash Player 和 Microsoft Silverlight 都将在其下个版本完全支持 IE9 中的硬件加速。

此外，经过简化的 IE9 安装速度更快，安装步骤更少，加载页面的时间更短，并且不需要你单独安装更新。

极简设计

IE9 界面设计简洁，并与 Windows 7 良好集成，为网站提供更大的显示区域，从而让用户聚焦于应用本身，而不是浏览器。浏览器控件减少并且处于半透明状态，避免干扰用户的视线，真正让网络内容成为用户关注的焦点。此外，IE9 也运用了 Windows 7 的设计原则，让网站更像电脑上的本地应用程序。

1. 网站固定

   通过网站固定功能，用户可以在 Windows 任务栏上直接访问最常使用的网站，而不必首先打开浏览器。这将让用户得以快捷地访问所关心的内容。导航按钮呈现网站的图标和颜色，凸显以网站为中心的体验。

2. 跳转列表

   跳转列表是无需首先打开浏览器即可迅速访问常用网站的一种方式。对于开发者已经创建跳转列表功能的锁定网站，用户可以快速地编写电子邮件、检查收件箱、变更音乐台、接受朋友邀请或者查看突发新闻，使网络浏览精彩无限。

3. 分离选项卡和鼠标拖拽

   用户经常需要浏览多个网站或页面，通过分离选项卡和鼠标拖拽功能，用户可以并排显示两个网站或选项卡页面。这样用户就可以在不同的网站上对比产品，在看视频的同时浏览电子邮件，或者看地图的同时查看旅行日程。若要分离选项卡，用户只需点击选项卡并将其拖到屏幕边缘，与此同时不会影响网站内容的显示，例如，在拖拽选项卡时视频会保持播放，提供类似本地应用的流畅体验。

多项功能保护个人隐私

由于互联网越来越不安全，IE9 从设计伊始就旨在成为最值得用户信赖的网络浏览器。新版 IE9 包含一套强大的内置安全性、隐私保护和可靠性技术，让用户更安全地上网。

1. "跟踪保护"功能

   2010 年 12 月，微软在 IE9 中引入跟踪保护功能。该功能通过让客户指出自己不希望与哪些网站交换信息，从而让人们在浏览网络时控制哪些数据可被分享。在该功能中中添加跟踪保护清单，消费者就能轻松使用该功能，保护个人隐私。

2. 集成 SmartScreen 的下载管理器

   IE9 提供首个带有 SmartScreen 恶意软件防护的下载管理器，并引入 SmartScreen 下载声誉机制。SmartScreen 下载声誉是具有突破意义的浏览器功能，它利用声誉数据来移除对著名文档的不必要警告，当下载内容的风险较高时显示更为严重的警告。当今用户往往习惯于忽略每次下载都显示的通用警告，无论这个文件是一个极其普通的程序还是几分钟前生成的一个恶意软件，而 IE9 则是唯一一个利用下载声誉来帮助用户做出安全性决策的浏览器。

3. 加载项性能顾问

   加载项性能顾问会在加载项放缓浏览会话时通知用户。默认情况下，如果所有加载项的总加载时间超过 0.2 秒，用户就会收到通知，使用户有机会作出明智的决定，使用有价值的加载项并选择禁用不太有用或影响性能的加载项。

统一标准，全面支持最新网络标准

IE9 广泛地支持 HTML5、SVG、CSS3 和 DOM，对统一标准的良好支持带来在开发上更好的互操作性，开发将变得更加容易。开发人员不必再花费大量的时间为不同的浏览器重写网站，可以专注于更富创造力的设计和开发，从而为用户带来更美妙的网络体验。目前全球已有许多合作伙伴利用 Windows 和 IE9 重新设计了自己的网站，创建出感觉就像 PC 本地应用程序一样的新体验。

IE9 正式版全语种下载地址：点击进入下载页面

文章转自：浏览器之家

原文地址：http://wwww.liulan7.net/a/download/2011/0315/4518.html

©2012 一起CSS. All Rights Reserved.

相关日志

• 3月份IE浏览器份额继续下滑 IE9不敌FF4 (2)
• IE9公测版本发布：简洁 极速 (8)
• IE9将于8月进行公试 (0)
• IE9平台预览第二版发布 支持HTML5 GPU加速 (5)

Internet Explorer 1.0

Windows 95 原先并没有 IE，IE1.0 是通过一个名叫 Windows 95 Plus! Pack 的扩展包来到用户的电脑中的，它的到来改变了 Netscape 的完全垄断地位，并且还带来了家喻户晓的"Internet 连接向导" 。

Internet Explorer 2.0

2.0 版发布于 1995 年，它带来了 JS、框架、SSL、Cookies 和新闻组等特性，并开始支持 Mac 平台。

Internet Explorer 3.0

3.0 发布于 1996 年，它首先开始支持 CSS，并且"大e"形象首次出现，本次更新带来了 Outlook Express，这是一个免费的邮件和新闻组终端。

Internet Explorer 4.0

1998 年，微软随着 Windows 98 发布了 IE4.0，它带来了活动桌面、频道、Frontpage Express, Microsoft Chat 2.0 等诸多特性，这也许是中国早期电脑用户最熟悉的一个版本。

Internet Explorer 5.0

5.0 版本随着 Windows 98SE 到来，它带来了稳定性和性能提升，并开始支持 XML 和 XSL，细心的朋友们估计还记得微软后来还发布了一个 5.5 版本。

Internet Explorer 6.0

Windows XP 预装了 6.0 版本的 IE，这是一个奠定 IE 浏览器完全垄断地位的版本，当然 6.0 版也因为漏洞多，安全性保护极差，对 W3C 标准支持不好而臭名昭著。

Internet Explorer 7.0

6.0 版本发布 5 年后，IE7 终于横空出世，它是一个优先支持 Vista 系统的版本，带来了标签浏览，反钓鱼和 RSS 支持，不过由于 Vista 系统并不受欢迎，因此 IE7 的占有率一直维持在低位，而让 IE6 持续占领市场。

Internet Explorer 8.0

IE8 目前拥有 28% 的浏览器市场，主要带来了私密浏览、Web Slices 和自动标签崩溃恢复特性，对 Web 标准的支持度也有极大改进。

Internet Explorer 9.0

这就是即将到来的未来。

文章转自：http://www.cnbeta.com/

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

©2012 一起CSS. All Rights Reserved.

相关日志

• 12月份浏览器市场排行榜 (1)
• 10月浏览器市场排行 Chrome增长快 (1)
• jQuery过滤选择器:not在IE中的bug (2)
• 7月份全球主流浏览器市场份额 (2)
• IE全球市占率重新超过60% (0)
• “导”字导致样式失效 (5)
• IE的市场份额下降到历史最低 (3)
• ie img 3px bug (2)

Mozilla 火狐市场份额为 22.8%，与去年 12 月份持平，Chrome 由 10% 提高至 10.7%，Safari 由 5.9% 提高到 6.3%，Opera 由 2.2% 提高到 2.3%。

微软 IE 产品营销主管罗格·卡普里奥蒂(Roger Capriotti)发表博客文章称，“IE6 市场份额下滑 1.77 个百分点至 12.03%。过去 3 个月，IE6 市场份额下滑了 3.9 个百分点，过去 1 年下滑了 9.31 个百分点。IE8 市场份额同比增长 9.15 个百分点。去年 11 月份，IE6 在企业用户中的市场份额为 10.3%，IE8 为 34.1%。”

©2012 一起CSS. All Rights Reserved.

相关日志

• 3月份IE浏览器份额继续下滑 IE9不敌FF4 (2)
• 12月份浏览器市场排行榜 (1)
• 10月浏览器市场排行 Chrome增长快 (1)
• 九月份全球主流浏览器市场排行榜 (1)
• IE6全球份额继续下跌 中国是最大用户群 (3)
• 7月份全球主流浏览器市场份额 (2)
• IE全球市占率重新超过60% (0)
• 5月份IE与Firefox市场份额双双下滑 (1)
• IE的市场份额下降到历史最低 (3)
• 2010年3月浏览器市场占有率 Chrome再次上涨0.5个百分点至6.13% (2)

该 Logo 由 Ocupop 公司设计，这是一个专注与品牌打造和网络设计的公司。 Ocupop 的 Logo 设计师 Michael Nieling 这样说道：

那就是说，HTML5 需要一组一致的、标准的可视化词汇来在对话、展示和解释中清楚地指代特定的对象。

HTML5 标识将被网络开发者社区采取并使用，用户可根据自己使用的 8 大类别，在标识网站上使用特定的标志。W3C HTML5 Logo 主页上提供免费贴纸，以及价值 22.50 美元带有新款 HTML 标识的 T-shirt。

HTML5 的八大技术特征：

1. 语义学

   作为 HTML5 的前端和中心，语义学能够赋予框架结构以意义。更详尽的标签组合以及资源描述框架，微型数据和微型格式将为你和你的用户打造一套数据驱动的网络。

2. 本地存储

   在应用缓存，本地存储，索引数据库和文件应用程序接口的帮助下，HTML5 应用甚至能在没有因特网连接的情况下工作。

3. 设备访问

   地理定位只是一个开始，HTML5 能够让应用程序访问连结到你计算机上的任何设备。

4. 连结性

   更有效率的连结性将能带来更实时的聊天，更快的游戏速度以及更好的沟通交流。服务器与客户端之间的网络套接字和邮件摄像头将比以往更加便捷。

5. 多媒体

   音频和视频可是 HTML5 世界的一等公民，他们将与你的应用程序和网站和睦共处。灯光，摄影，开始!

6. 平面和三维效果

   在 SVG, Canvas, WebGL 和 CSS3 3D 效果这些特性之间，你一定能找到让你的用户眼花缭乱，美不胜收的创意。

7. 性能和集成

   使你的应用程序和网络在大量诸如 Web Workers 和 XMLHttpRequest 2 这样的技术下更加快速。没有人愿意停下了等你跟进的。

8. CSS3

   在不牺牲你的讲义结构和性能的情况下，CSS3 提供了大量的样式效果和加强你的网络应用。另外 WOFF 提供了前所未有的印刷灵活性控制。

文章转自：http://www.cnbeta.com/

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

相关链接：

1. W3C 官方网站： http://www.w3.org/
2. W3C HTML5 首页：http://www.w3.org/TR/html5/
3. W3C CSS3 首页：http://www.w3.org/TR/css3-roadmap/

©2012 一起CSS. All Rights Reserved.

相关日志

• HTML 5 表单 (4)
• HTML 5新标签 (3)

美国互联网流量监测机构 Net Applications 今天发布 2010 年 12 月份最新浏览器市场占有率及排行统计数据，统计结果显示，2010 年的最后一个月，微软 IE 浏览器全球市场份额持续下跌，由有 11 月的 58.26% 下降到 57.08%，延续了 IE 市场份额连续 6 个月呈下降之势，同时也是 IE 有史以来市场份额的最低值。

Net Applications 统计数据还显示，今年 12 月份谷歌 Chrome 浏览器全球市场份额再次上升，由 11 月份的 9.25% 增至 9.98%，Firefox 浏览器同样也略有增长，12 月份市场占有率为 22.81%，相较 11 月份增长 0.06%。苹果 Safari 相应市场份额也由今年 11 月的 5.5% 增至 5.89%。这两款浏览器全球市场份额都创造了各自历史最高记录。

下面两张图片是 2009 及 2010 年度各主浏览器的市场占有率情况，来看看这两年发生了怎样的变化。

由上图我们可以看出，Chrome 浏览器在 2010 年一路上升，由 2009 年的 2.64% 上升到 2010 年的 7.31%，可谓众多浏览器中的一枝独秀。 IE 浏览器有了较大幅度的下滑，几欲跌破 60%，Firefox 火狐浏览器变化不大，但整体比 2009 年有所上升。苹果 Safari 浏览器也有了加大的增长，看来 2010 年又新增了一大批果粉。特立独行的 Opera 浏览器依然在默默地抢占着市场。

然而，这是全球的数据，跟中国的数据相比，有很大的差别。下图是 CNZZ数据中心 12 月份浏览器使用情况分析报告截图：

从上图可以看到：IE 在中国的占有率高达 95% 之多（加上其他外壳浏览器），其中 IE6 就占到近 60%。看来我要走的路还很远。据其他同行朋友说 360 从前几日开始，提醒用户升级 IE 浏览器了，他们表示这是一件好事，但 360 到底能带来多大影响，我们静观其变吧。

©2012 一起CSS. All Rights Reserved.

相关日志

• 10月浏览器市场排行 Chrome增长快 (1)
• 7月份全球主流浏览器市场份额 (2)
• IE全球市占率重新超过60% (0)
• IE的市场份额下降到历史最低 (3)
• 3月份IE浏览器份额继续下滑 IE9不敌FF4 (2)
• Internet Explorer 1.0到9.0截图画廊 (2)
• 1月份IE市场份额环比下滑1.1个百分点至56% (0)
• 九月份全球主流浏览器市场排行榜 (1)
• IE6全球份额继续下跌 中国是最大用户群 (3)
• jQuery过滤选择器:not在IE中的bug (2)

前两天做的一个页面，交给了其他同事，他们用的编辑器是 myeclipse，处理后，在 IE 和 FF 下表现不一样，经过排查后发现是行高 “line-height” 在 IE 下失效。CSS 代码如下：

selector { font:12px/30px '宋体', Tahoma, Geneva, sans-serif; background:#f00;}

经过 myeclipse 默认的格式化后变成了：

selector {
	font:12px/ 30px '宋体', Tahoma, Geneva, sans-serif;
	background:#f00;
}

格式化之后，字号和行高中间出现了一个空格，在 FF 、Chrome 、Opera 、IE8 、IE9 下页面没有问题，而在 IE6、 IE7 下除了字号，后面的都失效了。不知这应该怪 myeclipse，还是 IE6 、IE7。

为了让大家便于对比，这里制作了一个简单的实例，您可以用相应的浏览器 点击这里 测试。

©2012 一起CSS. All Rights Reserved.

随机日志

• wordpress自动升级成功 (11)
• 流行的CSS圆角 (1)
• h1,h2,h3和strong标签的seo解说 (0)
• 符合web标准的css网站相当于已经做了30%的SEO工作 (0)
• 几种常见浏览器内核简介 (0)
• 用js让“footer”处于底部 (0)
• jQuery EasyUI (6)
• 你是一个职业的页面重构工作者吗？ (6)
• 让搜索更友好 (1)
• IE的条件注释 (0)

与去年同期相比，IE 和 Firefox 的市场份额相对去年底都有所下降，IE 下降了 3.51%，Firefox 下降了 1.78%。Chrome 增长最快，从 4.63% 增长到 8.50%，增长了 3.87%。Safari 凭借苹果产品的畅销，份额也增长了 0.9%。

在所有浏览器版本中 IE8 以 29.04% 的市场份额位居首位，同时 IE6 和 IE7 也分别占有 14.94% 和 9.89% 的场份额。Firefox 3.6 以 17.63% 的份额排名第二，第五名是 Chrome 6，为 5.54%。

从以上数据可以看出，主要是 IE 和 Firefox 的份额流向了 Chrome，Chrome 6 仅用 6 个月从 0 增长到 5.54%，其发展势头锐不可当。而 IE 则似乎并没有因为 IE9 的发布扭转下降的趋势，至于 Firefox，下降的虽不多，但趋势也是下降的，而频繁的跳票已经让用户习以为常，Firefox 4.0 正式版预计要 2011 年发布。

©2012 一起CSS. All Rights Reserved.

相关日志

• 12月份浏览器市场排行榜 (1)
• 7月份全球主流浏览器市场份额 (2)
• IE全球市占率重新超过60% (0)
• IE的市场份额下降到历史最低 (3)
• 3月份IE浏览器份额继续下滑 IE9不敌FF4 (2)
• Internet Explorer 1.0到9.0截图画廊 (2)
• 1月份IE市场份额环比下滑1.1个百分点至56% (0)
• 九月份全球主流浏览器市场排行榜 (1)
• IE6全球份额继续下跌 中国是最大用户群 (3)
• jQuery过滤选择器:not在IE中的bug (2)

火狐浏览器排名第二位，市场份额为 22.96%，较八月份 22.91% 的市场份额略有上升，目前 Mozilla Firefox 4.0 已经到达了Beta7的版本，不知道广大网友期待的 4.0 正式版发布之后，能否给火狐的浏览器市场带来较大提升。

号称版本号之王的 Chrome 浏览器市场份额由8月份的 7.52% 上升到九月份的 7.98%，增幅 0.46%，据所有浏览器增幅之首。看来 Chrome 浏览器不止版本号升得快，市场份额也增速明显。具有重大改进的 Chrome 8 着实让人期待啊！

苹果 Safari 浏览器则由 8 月份的 5.16%上升到 9 月份的 5.27%。

Opera 在调查的浏览器中排名垫底，市场份额只有 2.39%，但相较于 8 月份的 2.37%，市场份额任然有所上升。值得一提的是 Opera mini 有较大的增长， Opera mini 的市场份额由 8 月份的 0.88%增长到目前的 0.97%。

自从 2009 年 9 月以来，IE 浏览器的用户群一直少量地流失到 Chrome 和 Safari 浏览器，微软 IE 浏览器去年 9 月占市场份额曾达到 65%。现如今，IE9 浏览器能否带领网友发现网络之美，我们拭目以待。

文章转自：浏览器之家

原文地址：http://liulan7.net/a/top/2010/1001/2160.html

©2012 一起CSS. All Rights Reserved.

相关日志

• 3月份IE浏览器份额继续下滑 IE9不敌FF4 (2)
• 1月份IE市场份额环比下滑1.1个百分点至56% (0)
• 12月份浏览器市场排行榜 (1)
• 10月浏览器市场排行 Chrome增长快 (1)
• IE6全球份额继续下跌 中国是最大用户群 (3)
• 7月份全球主流浏览器市场份额 (2)
• IE全球市占率重新超过60% (0)
• 5月份IE与Firefox市场份额双双下滑 (1)
• IE的市场份额下降到历史最低 (3)
• 2010年3月浏览器市场占有率 Chrome再次上涨0.5个百分点至6.13% (2)

IE 9 采用了全新的 UI， 界面简洁，简洁的让你只看到地址栏和标签 Tab，不过由于地址栏和标签 Tab 在同一水平位置，所以 Tab 开的稍微多点的话感觉有点拥挤了。虽然界面简洁，但更显大气、稳重。

IE 9 不支持 XP，需要 Vista 或 Win7。安装 IE 9 会覆盖 IE 8，并需要重新启动计算机。

体验 IE 9 Beta 后，最大的感觉是速度快，几乎有浏览本地网页一样的感觉，图片的显示也到达了前所未有的速度。除此之外，IE 9 的性能也有很大的提升。

相信很多人关心网银问题，据某些网友测试，工行网银和支付宝在 IE 9 下可以正常使用，其他网银和第三方支付目前不得而知。

总提来说 IE9 Beta 版本让人比较满意，如果您也有兴趣试试，请 点击这里 进入下载页面。

©2012 一起CSS. All Rights Reserved.

相关日志

• 3月份IE浏览器份额继续下滑 IE9不敌FF4 (2)
• 尽享网络之美 微软正式发布IE9 (2)
• IE9将于8月进行公试 (0)
• IE9平台预览第二版发布 支持HTML5 GPU加速 (5)

IE6 这款长达 10 年之久的浏览器在欧洲以及美国、英国、法国等发达国家的占有率都已经下跌到了 5% 左右。Net Application 指出：“IE6 最大的坚守用户群在中国，市场份额超过 46%，这对其全球市场份额产生了极大的影响。”

虽然 IE8 的市场份额有了不小的增长，不过8月份 IE 整体份额下跌了 0.34%；Firefox 没有重复近三个月以来的下跌趋势，而是出现了0.02% 的小幅增长；Chrome 在本月的增长也很明显，由7月的 7.16% 增至 7.52%。

文章转自：驱动之家

原文地址：http://news.mydrivers.com/1/173/173782.htm

©2012 一起CSS. All Rights Reserved.

相关日志

• 3月份IE浏览器份额继续下滑 IE9不敌FF4 (2)
• 1月份IE市场份额环比下滑1.1个百分点至56% (0)
• 12月份浏览器市场排行榜 (1)
• 10月浏览器市场排行 Chrome增长快 (1)
• 九月份全球主流浏览器市场排行榜 (1)
• 7月份全球主流浏览器市场份额 (2)
• IE全球市占率重新超过60% (0)
• 5月份IE与Firefox市场份额双双下滑 (1)
• IE的市场份额下降到历史最低 (3)
• 2010年3月浏览器市场占有率 Chrome再次上涨0.5个百分点至6.13% (2)

奥林匹克标志

作者: Doug Neiner

基于纯 CSS，以 em 为单位，可动态调整尺寸，需要浏览器支持 border-radius 属性，目前支持的浏览器包括 Chrome, Safari, Firefox 和 IE9。

jQuery 标志

作者: Doug Neiner

这是大家最钟爱的 JavaScript 框架 jQuery 的标志，使用 CSS3 的 border-radius 属性。

jQuery UI 标志

作者: Doug Neiner

这是 jQuery UI 库的标志，同样，基于 CSS3 的 border-radius 属性。

CCS 标志一宗

作者: Justin Sepulveda

全部基于纯 CSS3 的 border-radius, gradient, transform 属性。

Opera 标志

作者: David DeSandro

做得非常漂亮，大量使用了 border-radius, gradient 属性，不过在不同浏览器显示不太一致，尤其在 IE 中。

iOS icons

作者: Louis Harboe

非常伟大的作品，使用了 CSS3 的高级功能。

简单 css 图标

作者: Zander Martineau

这份作品可以教你如何使用 CSS 实现三角形，如何实现诸如 RSS 图标，心形图，三角形一类的简单图形。

基于纯 CSS 的超级玛丽 3D 动画图标

作者: Andreas Jacob

基于 CSS3 和 CSS 4D 框架 ，动画部分很精彩，但目前只支持 Safari 5。

纯 CSS 图标一宗

作者: Andrew Kelly

使用了 CSS3 的渐变，阴影，圆角等属性，效果很出众。

CSS3 实现的 Photoshop 标志

作者: Radu Chelariu

完全基于 CSS3，没借助任何图形。

10 个令人赞叹的 CSS 社会媒体网络标志

作者: Nicolas Gallagher

全部基于简单的，语义化 HTML 标签，没有任何空的，多余的对象，没有 JavaScript，没有图片。

一套 CSS 图标

作者: Lucian Marin

一套基于 CSS 的图标，非常精致。

基于纯 CSS3 的 Twitter 图标

作者: Giacomo Bartoli

很显眼，使用了 @font-face 和少量阴影及圆角。

加拿大 Go Transit 公司标志

作者: Collin Henderson

基于 CSS3 的 border-radius 属性

IE 标志

作者: Andreas Jacob

在 Firefox 3.6+ 以及 Safari 5 上显示最佳。使用了圆角，渐变，阴影等属性。

任天堂游戏图标

作者: Drew

使用纯 CSS 实现的一些任天堂公司的游戏图标。

电影《回到未来》片名

作者: Lucas Garron

和原版惊人相似，在 Webkit 引擎的浏览器中显示最佳。

CSS 雨滴

作者: Sean Martell

右边是原始图片，左边是 CSS 生成的效果

Bahamas CSS 标志

作者: ForestMist

巴哈马群岛标志，右边是原始图，左边是 CSS 效果。

Reddit 网站的外星人标志

作者: Matthew James Taylor

使用  “O O _ ( ) ( ) O O O O / – o O O O O O O O O • • ( ) ( )” 几个字母以及文字效果。

纯 CSS 社会媒体网络标志

作者: insicdesigns

又一套 CSS3 社会网络媒体标志。

CSS3 实现的 iPhone 图片

作者: Jeff Batterton

简直疯了。

Twitter 图片

作者: Jeff Batterton

相当精彩的 CSS 图形效果。参见《纯 CSS3 实现的 Twiiter 图画》

美剧《迷失》片名动画

作者: Marcos Esperon

在 Webkit 引擎的浏览器中显示最佳。

本文来源：1stwebdesigner.com

原文地址：27 Amazingly Realistic CSS Icons and Logos （原文作者：przemek）

©2012 一起CSS. All Rights Reserved.

相关日志

• 用 selection 让“选择”五彩缤纷 (9)
• 愚你一下 美团网翻转 (2)

Minify 是 PHP5 应用程序，它能合并、压缩 js 和 css 文件，并且能通过 HTTP gzip/deflate 及一些相关头，优化客户端缓存。

那么以本博客为例来看看 Minify 的效果如何。本博客 js 文件有 5 个，css 文件 1 个。下图是没有使用 Minify 的截图：

下面这一张是使用了 Minify 后的截图：

从两张图片中的数据对比可以看出，css 文件 和 js 文件都有大幅度的压缩，5 个 js 文件也合并成了 1 个（最后一个是 google analytics 生成的），所以加载速度也提高了许多。

Minify 的使用简单，首先到 Google Code http://code.google.com/p/minify/ 下载该应用，解压后把 min 目录上传到网站根目录下，然后把 js 和 css 文件的路径按 Minify 的方式写，就完成了。那应该怎么写呢？

css 文件按照下面的方式写：

<link media="screen" type="text/css" href="/min/f=style.css" rel="stylesheet" />

如果有多个文件，则用逗号分开，如：

<link media="screen" type="text/css" href="/min/f=style1.css,style2.css" rel="stylesheet" />

js 文件也是一样的：

<script type="text/javascript" src="/min/f=script.js"></script>

你也可以在你的域名后加上 min/ 访问 Minify URI Builder，在这个页面中，你可以输入你需要合并压缩的 js 或 css 路径，按 Update 按钮后，它会给你生成一个完成的代码，你只需要将代码粘帖到文件中即可。

本博客用了 Minify 后，YSlow 和 Monster 的评分都比较高，感觉很不错。

Minify 在 Google Code 上的地址是：http://code.google.com/p/minify/，你可以前往下载最新版本和了解更多信息。

©2012 一起CSS. All Rights Reserved.

随机日志

• :hover伪类在IE6中的BUG (3)
• myeclipse格式化引样式失效 (8)
• DIV+CSS网页设计视频教程 (5)
• 隐藏域在ie中占空间的bug (2)
• CSS Expressions有多可怕 (3)
• 说说CSS Hack和向后兼容 (3)
• HTML标签strong和em的区别 (3)
• 真正的CSS等高布局 (6)
• CSS图像替换技术之Fahrner的方案 (0)
• 让IE6也有最小高度min-height的效果 (1)

$('.flipbox:not(:first)').hide();

代码在非 IE 浏览器下没有问题，即除了第一个含有 flipbox 类的元素外，其他的隐藏，但在 IE 里却全部隐藏了。

经过测试，除了上面的写法在 IE 下有问题外，下面的几种写法在 IE 下也有问题：

$('.flipbox:not(:first)');
$('.flipbox:not(:last)');
$('.flipbox:not(:even)');
$('.flipbox:not(:odd)');
$('.flipbox:not(:eq(1))');
$('.flipbox:not(:gt(1))');
$('.flipbox:not(:lt(1))');

很奇怪的是：如果把 className 换成 tagName，如上面把 .flipbox 换成对应的标签名，又不会出现问题。当然，换成标签名的话，你要确定不会选择到其他不需要选择的标签，以免产生混乱，出现其他问题。

对于这个问题，我的办法有两个：

1. 与样式结合，改变写法
2. 用 .ont 代替 :not

对于第一种方法，我们可以在样式里定义：

.flipbox { display:none}

而 jQuery 代码则写成：

$('.flipbox:first').show();

但是这种方法的可访问性低，如果访客禁止了 javascript，那他看不到主要内容。

对于第二种方法，jQuery 代码可写成：

$('.flipbox').not($(.flipbox:first).show();

这种方法的可访问性较好，即使访客禁止了 javascript，但他能看到所有内容。所以最后我选择了这种方法。

这里做了一个综合的例子，你可以在 IE 和非 IE 浏览器下看看他们的不同，查看 Demo

其实还有一个奇怪的现象，就是某种情况下给类选择器前面加上标签名，也不会出现问题，而这种情况就是这些类不能被相同的标签包裹。查看 Demo

很巧，在浏览愚人码头的博客的时候发现他早就发现了这个问题，并且也提出了解决方法，有兴趣的可以点击这里查看。

©2012 一起CSS. All Rights Reserved.

相关日志

• Internet Explorer 1.0到9.0截图画廊 (2)
• 12月份浏览器市场排行榜 (1)
• 10月浏览器市场排行 Chrome增长快 (1)
• 7月份全球主流浏览器市场份额 (2)
• jQuery插件Flip (4)
• IE全球市占率重新超过60% (0)
• jQuery插件Cloud Zoom (3)
• “导”字导致样式失效 (5)
• IE的市场份额下降到历史最低 (3)
• jQuery EasyUI (6)

也就是说和上个月相比：

• IE +0.42%
• FF -0.90%
• CH -0.08%
• SA +0.24%
• OP +0.18%

从上面的数据可以看出总体的趋势是：Firefox 的份额被 IE 和 Safari 抢夺了。

IE 9 将月 9 月公测，其他浏览器也在不停的更新，浏览器的战争还在进行中，以后局面会怎样，我们静观其变吧。

©2012 一起CSS. All Rights Reserved.

相关日志

• 12月份浏览器市场排行榜 (1)
• 10月浏览器市场排行 Chrome增长快 (1)
• IE全球市占率重新超过60% (0)
• IE的市场份额下降到历史最低 (3)
• 3月份IE浏览器份额继续下滑 IE9不敌FF4 (2)
• Internet Explorer 1.0到9.0截图画廊 (2)
• 1月份IE市场份额环比下滑1.1个百分点至56% (0)
• 九月份全球主流浏览器市场排行榜 (1)
• IE6全球份额继续下跌 中国是最大用户群 (3)
• jQuery过滤选择器:not在IE中的bug (2)

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/

©2012 一起CSS. All Rights Reserved.

相关日志

• jQuery插件Cloud Zoom (3)
• jQuery过滤选择器:not在IE中的bug (2)
• jQuery EasyUI (6)
• 修改：自动播放的jQuery幻灯片 (13)
• 自动播放的jQuery幻灯片 (16)
• jQuery写的一个幻灯片 (20)
• 用jQuery去除链接虚线 (20)
• 用标准W3C盒子模型 (2)

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/

©2012 一起CSS. All Rights Reserved.

相关日志

• HTML 5 表单 (4)
• W3C发布HTML5官方Logo (5)

<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，效果是一样的。

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

©2012 一起CSS. All Rights Reserved.

相关日志

• 纯css下拉菜单详解 (12)
• :hover伪类在IE6中的BUG (3)
• IE6支持PNG透明(alpha通道)的4种方法 (7)
• 别说IE6不认识!important (6)
• 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 下载地址

©2012 一起CSS. All Rights Reserved.

相关日志

• Firefox 4.0 Beta 1发布 (1)
• 3月份IE浏览器份额继续下滑 IE9不敌FF4 (2)
• 12月份浏览器市场排行榜 (1)
• 10月浏览器市场排行 Chrome增长快 (1)
• 7月份全球主流浏览器市场份额 (2)
• Firefox 3.6.6发布 (0)
• Mozilla Firefox 4.0最新用户界面 (7)

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

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

©2012 一起CSS. All Rights Reserved.

相关日志

• 12月份浏览器市场排行榜 (1)
• 10月浏览器市场排行 Chrome增长快 (1)
• 7月份全球主流浏览器市场份额 (2)
• IE的市场份额下降到历史最低 (3)
• 3月份IE浏览器份额继续下滑 IE9不敌FF4 (2)
• Internet Explorer 1.0到9.0截图画廊 (2)
• 1月份IE市场份额环比下滑1.1个百分点至56% (0)
• 九月份全球主流浏览器市场排行榜 (1)
• IE6全球份额继续下跌 中国是最大用户群 (3)
• jQuery过滤选择器:not在IE中的bug (2)

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

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

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

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

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

©2012 一起CSS. All Rights Reserved.

相关日志

• Firefox 4.0 Beta 2预览版发布 (1)
• 3月份IE浏览器份额继续下滑 IE9不敌FF4 (2)
• 12月份浏览器市场排行榜 (1)
• 10月浏览器市场排行 Chrome增长快 (1)
• 7月份全球主流浏览器市场份额 (2)
• 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 的最新消息。

©2012 一起CSS. All Rights Reserved.

相关日志

• 3月份IE浏览器份额继续下滑 IE9不敌FF4 (2)
• 尽享网络之美 微软正式发布IE9 (2)
• IE9公测版本发布：简洁 极速 (8)
• IE9平台预览第二版发布 支持HTML5 GPU加速 (5)

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

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

©2012 一起CSS. All Rights Reserved.

相关日志

• 12月份浏览器市场排行榜 (1)
• 10月浏览器市场排行 Chrome增长快 (1)
• 7月份全球主流浏览器市场份额 (2)
• 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，里面也有相关说明。

©2012 一起CSS. All Rights Reserved.

相关日志

• jQuery插件Flip (4)
• jQuery过滤选择器:not在IE中的bug (2)
• jQuery EasyUI (6)
• 修改：自动播放的jQuery幻灯片 (13)
• 自动播放的jQuery幻灯片 (16)
• jQuery写的一个幻灯片 (20)
• 用jQuery去除链接虚线 (20)
• 用标准W3C盒子模型 (2)

Windows：

Mac：

怎么样？不错吧。

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

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

©2012 一起CSS. All Rights Reserved.

相关日志

• 12月份浏览器市场排行榜 (1)
• 10月浏览器市场排行 Chrome增长快 (1)
• 7月份全球主流浏览器市场份额 (2)
• 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. 注释结束和开头与注释间留空格，如“/* 导航条 */”

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

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

©2012 一起CSS. All Rights Reserved.

相关日志

• Internet Explorer 1.0到9.0截图画廊 (2)
• 12月份浏览器市场排行榜 (1)
• 10月浏览器市场排行 Chrome增长快 (1)
• jQuery过滤选择器:not在IE中的bug (2)
• 7月份全球主流浏览器市场份额 (2)
• IE全球市占率重新超过60% (0)
• IE的市场份额下降到历史最低 (3)
• 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

©2012 一起CSS. All Rights Reserved.

相关日志

• 3月份IE浏览器份额继续下滑 IE9不敌FF4 (2)
• 1月份IE市场份额环比下滑1.1个百分点至56% (0)
• 12月份浏览器市场排行榜 (1)
• 10月浏览器市场排行 Chrome增长快 (1)
• 九月份全球主流浏览器市场排行榜 (1)
• IE6全球份额继续下跌 中国是最大用户群 (3)
• 7月份全球主流浏览器市场份额 (2)
• IE全球市占率重新超过60% (0)
• IE的市场份额下降到历史最低 (3)
• 2010年3月浏览器市场占有率 Chrome再次上涨0.5个百分点至6.13% (2)

在解决兼容方法上，想定出一个统一的规范，个人认为应该以下面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/

©2012 一起CSS. All Rights Reserved.

相关日志

• css hack (19)
• CSS hack区分浏览器（IE6、IE7、FF） (1)

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

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

下载：IE9 平台预览第二版

©2012 一起CSS. All Rights Reserved.

相关日志

• 3月份IE浏览器份额继续下滑 IE9不敌FF4 (2)
• 尽享网络之美 微软正式发布IE9 (2)
• IE9公测版本发布：简洁 极速 (8)
• IE9将于8月进行公试 (0)

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

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

©2012 一起CSS. All Rights Reserved.

相关日志

• 12月份浏览器市场排行榜 (1)
• 10月浏览器市场排行 Chrome增长快 (1)
• 7月份全球主流浏览器市场份额 (2)
• IE全球市占率重新超过60% (0)
• 3月份IE浏览器份额继续下滑 IE9不敌FF4 (2)
• Internet Explorer 1.0到9.0截图画廊 (2)
• 1月份IE市场份额环比下滑1.1个百分点至56% (0)
• 九月份全球主流浏览器市场排行榜 (1)
• IE6全球份额继续下跌 中国是最大用户群 (3)
• jQuery过滤选择器:not在IE中的bug (2)

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

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

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

©2012 一起CSS. All Rights Reserved.

相关日志

• 3月份IE浏览器份额继续下滑 IE9不敌FF4 (2)
• 1月份IE市场份额环比下滑1.1个百分点至56% (0)
• 12月份浏览器市场排行榜 (1)
• 10月浏览器市场排行 Chrome增长快 (1)
• 九月份全球主流浏览器市场排行榜 (1)
• IE6全球份额继续下跌 中国是最大用户群 (3)
• 7月份全球主流浏览器市场份额 (2)
• IE全球市占率重新超过60% (0)
• 5月份IE与Firefox市场份额双双下滑 (1)
• IE的市场份额下降到历史最低 (3)

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

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

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

FF 在 7 大洲占有率。

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

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

©2012 一起CSS. All Rights Reserved.

相关日志

• 3月份IE浏览器份额继续下滑 IE9不敌FF4 (2)
• 1月份IE市场份额环比下滑1.1个百分点至56% (0)
• 12月份浏览器市场排行榜 (1)
• 10月浏览器市场排行 Chrome增长快 (1)
• 九月份全球主流浏览器市场排行榜 (1)
• IE6全球份额继续下跌 中国是最大用户群 (3)
• 7月份全球主流浏览器市场份额 (2)
• IE全球市占率重新超过60% (0)
• 5月份IE与Firefox市场份额双双下滑 (1)
• IE的市场份额下降到历史最低 (3)

ExtJs 和 jQuery EasyUI 对比。

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

jQuery EasyUI 弹出对话框。

jQuery EasyUI 遮罩弹出窗口。

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

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

©2012 一起CSS. All Rights Reserved.

相关日志

• jQuery过滤选择器:not在IE中的bug (2)
• jQuery插件Flip (4)
• jQuery插件Cloud Zoom (3)
• 修改：自动播放的jQuery幻灯片 (13)
• 自动播放的jQuery幻灯片 (16)
• jQuery写的一个幻灯片 (20)
• 用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。

©2012 一起CSS. All Rights Reserved.

相关日志

• 说说CSS Hack和向后兼容 (3)
• CSS hack区分浏览器（IE6、IE7、FF） (1)

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

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

©2012 一起CSS. All Rights Reserved.

相关日志

• 自动播放的jQuery幻灯片 (16)
• jQuery写的一个幻灯片 (20)
• jQuery过滤选择器:not在IE中的bug (2)
• jQuery插件Flip (4)
• jQuery插件Cloud Zoom (3)
• jQuery EasyUI (6)
• 用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 条件注释。

©2012 一起CSS. All Rights Reserved.

随机日志

• jQuery插件Flip (4)
• jQuery写的一个幻灯片 (20)
• jQuery过滤选择器:not在IE中的bug (2)
• 3D效果CSS圆角 (5)
• 尽享网络之美 微软正式发布IE9 (2)
• wordpress自动升级成功 (11)
• CSS图像替换技术 (0)
• XHTML各标签对搜索引擎的权重 (0)
• 浏览器兼容常见问题 (0)
• HTML标签strong和em的区别 (3)

从上面可以看出 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 能不用就不用。

©2012 一起CSS. All Rights Reserved.

随机日志

• ie img 3px bug (2)
• IE9将于8月进行公试 (0)
• 纯css下拉菜单详解 (12)
• CSS选择器的优先级 (0)
• 让IE6也有最小高度min-height的效果 (1)
• Mozilla Firefox 4.0最新用户界面 (7)
• css2高级选择器 (4)
• IE的条件注释 (0)
• wordpress自动升级成功 (11)
• 视频教程 (0)

结构和样式都没有变，只有 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

©2012 一起CSS. All Rights Reserved.

相关日志

• 修改：自动播放的jQuery幻灯片 (13)
• jQuery写的一个幻灯片 (20)
• jQuery过滤选择器:not在IE中的bug (2)
• jQuery插件Flip (4)
• jQuery插件Cloud Zoom (3)
• jQuery EasyUI (6)
• 用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

文章整理自网络

©2012 一起CSS. All Rights Reserved.

随机日志

• 隐藏域在ie中占空间的bug (2)
• 作品之每天物流平台 (0)
• 自动播放的jQuery幻灯片 (16)
• 纯CSSTab面板/选项卡 (4)
• IE 8 beta 2不识滤镜alpha ？ (8)
• 12月份浏览器市场排行榜 (1)
• 修改：自动播放的jQuery幻灯片 (13)
• 使用CSS定位页面的“footer” (1)
• 浏览器兼容常见问题 (0)
• 几种常见浏览器内核简介 (0)

语义化的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

©2012 一起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

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

©2012 一起CSS. All Rights Reserved.

相关日志

• 修改：自动播放的jQuery幻灯片 (13)
• 自动播放的jQuery幻灯片 (16)
• jQuery过滤选择器:not在IE中的bug (2)
• jQuery插件Flip (4)
• jQuery插件Cloud Zoom (3)
• jQuery EasyUI (6)
• 用jQuery去除链接虚线 (20)
• 用标准W3C盒子模型 (2)

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

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

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

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

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

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

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

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

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

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

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

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

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

©2012 一起CSS. All Rights Reserved.

随机日志

• Firefox 4.0 Beta 1发布 (1)
• 纯css下拉菜单详解 (12)
• 有序列表项在IE里全部显示“1”的奇怪现象 (0)
• 图片对网站速度的测试 (4)
• wordpress自动升级成功 (11)
• SEO/搜索引擎优化视频教程 (0)
• Firefox 3.6.6发布 (0)
• CSS制作仿image menu效果 (7)
• 说说CSS Hack和向后兼容 (3)
• 用标准W3C盒子模型 (2)

$(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

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

©2012 一起CSS. All Rights Reserved.

相关日志

• jQuery过滤选择器:not在IE中的bug (2)
• jQuery插件Flip (4)
• jQuery插件Cloud Zoom (3)
• jQuery EasyUI (6)
• 修改：自动播放的jQuery幻灯片 (13)
• 自动播放的jQuery幻灯片 (16)
• jQuery写的一个幻灯片 (20)
• 用标准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

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

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

©2012 一起CSS. All Rights Reserved.

随机日志

• 符合W3C标准网站 所具有一些优点的浅析 (0)
• 愚你一下 美团网翻转 (2)
• 让IE6也有最大高度max-height的效果 (7)
• 12月份浏览器市场排行榜 (1)
• HTML 5新标签 (3)
• 尽享网络之美 微软正式发布IE9 (2)
• 7月份全球主流浏览器市场份额 (2)
• 使用CSS定位页面的“footer” (1)
• IE的市场份额下降到历史最低 (3)
• 用js让“footer”处于底部 (0)

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

用法：

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

©2012 一起CSS. All Rights Reserved.

随机日志

• 让指定分类的文章在Wordpress首页不显示 (9)
• SEO/搜索引擎优化视频教程 (0)
• 仿淘宝UED主题imitate tb-ued发布 (5)
• margin叠加原理 (2)
• 你是一个职业的页面重构工作者吗？ (6)
• jQuery过滤选择器:not在IE中的bug (2)
• Firefox 4.0 Beta 2预览版发布 (1)
• jQuery插件Cloud Zoom (3)
• 3月份IE浏览器份额继续下滑 IE9不敌FF4 (2)
• 别说IE6不认识!important (6)

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/

©2012 一起CSS. All Rights Reserved.

相关日志

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