H5 CSS hack 和浏览器内核

onestopweb

浏览: 688256 次

最近访客更多访客>>

vincepisces

heishehui

wtomato

hushouhao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

境-H5

CSS hack 浏览器内核 Webkit

CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。如下是例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS hack</title>
<style type="text/css">
.color{
background-color: #CC00FF; /*所有浏览器都会显示为紫色*/
background-color: #FF0000\9; /*IE8及以上的浏览器会显示红色*/
background-color: #ff6600\0; /*IE8及以上的浏览器会显示橙色*/
*background-color: #0066FF; /*IE6、IE7会变为蓝色*/
+background-color: #FFFF00; /*IE6、IE7会变为蓝色*/
_background-color: #009933; /*IE6会变为绿色*/
}
</style>
<!--
	谷歌，欧朋，火狐的浏览器更新的比较及时，所以一般不用思考兼容的问题
	不过一些新的CSS3特征就需要思考了，请看另一份文章 http://onestopweb.iteye.com/admin/blogs/2331411
	如果IE8及以上的浏览器，建议使用 \0 的标识符
	如果IE6、IE7的浏览器，建议使用 * 的标识符
	如果IE6的浏览器，建议使用 _ 的标识符
-->
</head>
<body>
<h3 class="color">阅谁问君诵，水落清香浮。</h3>
</body>
</html>

效果图：

市面上主流浏览器的内核是如下的四种：
Trident 内核，俗称IE浏览器的内核
Webkit 内核，俗称谷歌浏览器的内核
Gecko 内核，俗称火狐浏览器的内核
Presto内核，俗称欧朋浏览器的内核

最常用的内核是Trident内核和Webkit内核。手机浏览器的默认内核是Webkit内核。
Trident内核的常见浏览器有：IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；360安全浏览器（1.0-5.0为Trident，6.0为Trident+Webkit，7.0为Trident+Blink）猎豹极轻浏览器，360极速浏览器（7.5之前为Trident+Webkit，7.5为Trident+Blink）猎豹安全浏览器（1.0-4.2版本为Trident+Webkit，4.3及以后版本为Trident+Blink）猎豹极轻浏览器，傲游浏览器（傲游1.x、2.x为IE内核，3.x为IE与Webkit双核）、百度浏览器（早期版本）、世界之窗浏览器（最初为IE内核，2013年采用Chrome+IE内核）、2345浏览器、腾讯TT、淘宝浏览器、采编读浏览器、搜狗高速浏览器（1.x为Trident，2.0及以后版本为Trident+Webkit）、阿云浏览器（早期版本）、瑞星安全浏览器、Slim Browser、 GreenBrowser、爱帆浏览器（12 之前版本）、115浏览器、155浏览器、闪游浏览器、N氧化碳浏览器、糖果浏览器、彩虹浏览器、瑞影浏览器、勇者无疆浏览器、114浏览器、蚂蚁浏览器、飞腾浏览器、速达浏览器、佐罗浏览器、海豚浏览器（iPhone/iPad/Android）、UC浏览器（Blink内核+Trident内核）等。
其中部分浏览器的新版本是“双核”甚至是“多核”，其中一个内核是Trident，然后再增加一个其他内核。国内的厂商一般把其他内核叫做“高速浏览模式”，而Trident则是“兼容浏览模式”，用户可以来回切换。
Google Chrome、360极速浏览器以及搜狗高速浏览器高速模式也使用Webkit作为内核(在脚本理解方面，Chrome使用自己研发的V8引擎)。WebKit 内核在手机上的应用也十分广泛，例如 Google 的手机 Gphone、 Apple 的iPhone， Nokia’s Series 60 browser 等所使用的 Browser 内核引擎，都是基于 WebKit。
WebKit内核常见的浏览器：傲游浏览器3、Apple Safari (Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器。

demo.rar (795 Bytes)
下载次数: 2

查看图片附件

1
顶

0
踩

分享到：

JS 简单的点击返回顶部的功能 | H5 CSS3 渐变的使用

2016-10-19 10:44
浏览 868
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论