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 默认浏览器。
相关推荐
H5页面禁用微信浏览器下拉,使其下拉不会出现黑色来源显示,在JS文件中定义此方法即可。
H5 html 和CSS 学习H5 html 和CSS 学习H5 html 和CSS 学习 H5 html 和CSS 学习H5 html 和CSS 学习H5 html 和CSS 学习 H5 html 和CSS 学习H5 html 和CSS 学习H5 html 和CSS 学习 H5 html 和CSS 学习H5 html 和CSS ...
h5 css3移动端漂亮登录界面,使用了vue.js,已经打包,响应式布局,自动适应不同设备.
亲测可用微信支付h5支付非微信浏览器调用支付接口,外部浏览器调用h5微信支付
h5和Css3柱状图特效 h5和Css3柱状图特效 h5和Css3柱状图特效 h5和Css3柱状图特效 h5和Css3柱状图特效 h5和Css3柱状图特效
适用于 h5,css3的样式重置代码
h5 css3绘制qq企鹅动画特效 h5 css3绘制qq企鹅动画特效 h5 css3绘制qq企鹅动画特效 h5 css3绘制qq企鹅动画特效
H5外部浏览器直接调起微信 tml5手机网站调用微信分享,其中示例包括 1. 获取网络类型 2. 调起客户端的图片播放组件 3. 调用微信扫描二维码 4. 判断是否安装对应的应用 5. 发送邮件 6. 分享到微信朋友圈
手机浏览器调用微信H5支付源码,全套手机浏览器支付源码
使用H5技术(Html、JavaScript、CSS)快速开发苹果应用商店桌面App源码 使用H5技术(Html、JavaScript、CSS)快速开发苹果应用商店桌面App源码 使用H5技术(Html、JavaScript、CSS)快速开发苹果...
如何禁止微信H5页面下拉显示QQ浏览器x5内核提供
简单的背景渐变代码,使用H5和Css3实现,主要采用渐变函数
delphi浏览器控件 Chromium,含demo、源码,chrome内核,与360安全浏览器等同内核,需先安装google Chrom浏览器,支持最新H5技术,developed and tested on Delphi 10.4 and it has been tested in Delphi 7, Delphi...
基于移动浏览器的HTML5核心技术的研究及其应用
ios+android+h5复制剪切板
20KB的H5极简浏览器。感觉还行吧,体积确实挺小的。现在浏览器动不动几十MB安装上用一会就上百MB了。
全面反映了HTML5和CSS3的最新特色,直观透彻、循序渐进、基础知识与案例实践紧密结合的讲授特色,细致阐述了响应式Web设计与移动开发等热点问题。
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,...
支持大部分已实现getUserMedia的浏览器,包括腾讯Android X5内核(QQ、微信)。 录音默认输出mp3格式,另外可选wav格式(此格式录音文件超大);有限支持ogg(beta)、webm(beta)格式;支持任意格式扩展(前提有相应...