css兼容处理-hack
- 浏览器兼容之旅的第二站:各浏览器的Hack写法
- Browser CSS Hacks
- Moving IE specific CSS into @media blocks
- Detecting browsers javascript hacks
- Browser Specific Hacks
- Browser-Specific CSS Hacks
- CSS hacks
大家平时看得多的应该是IE浏览器的hack写法比较多,但对于现代浏览器,比如说Safari、Chrome、Firefox等浏览器的hack写法并不多见,甚至有的不知道怎么写。如果您是属于后者,根本不知道各浏览器下具有哪些hack手段,不要着急。因为Hugo Giraudel和Tim Pietrusky将各浏览器下的hack写整理放在了Browserhacks.com之上。
一、Chrome浏览器
选择器Hack
/* Chrome 24- and Safari 5- */
::made-up-pseudo-element, .selector {
代码放在这里
}
媒体查询Hacks
/* Chrome, Safari 3+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
代码放在这里
}
JavaScript Hack
/* Chrome */
var isChrome = Boolean(window.chrome);
二、Firefox浏览器
属性选择器Hack
/* Firefox 1.5 */
body:empty .selector {
样式代码放这里
}
/* Firefox 2+ */
.selector, x:-moz-any-link {
样式代码放这里
}
/* Firefox 3+ */
.selector, x:-moz-any-link; x:default {
样式代码放这里
}
/* Firefox 3.5+ */
body:not(:-moz-handler-blocked) .selector {
样式代码放这里
}
媒体查询Hack
/* Firefox 3.5+, IE 9/10, Opera */
@media screen and (min-resolution: +72dpi) {
样式代码放这里
}
/* Firefox 3.6+ */
@media screen and (-moz-images-in-menus:0) {
样式代码放这里
}
/* Firefox 4+ */
@media screen and (min--moz-device-pixel-ratio:0) {
样式代码放这里
}
JavaScript Hack
/* Firefox */
var isFF = !!navigator.userAgent.match(/firefox/i); /* Firefox 2 - 13 */
var isFF = Boolean(window.globalStorage); /* Firefox 2/3 */
var isFF = /a/[-1]=='a'; /* Firefox 3 */
var isFF = (function x(){})[-5]=='x';
混合型Hack
/* Firefox 3+ */
@-moz-document url-prefix() {
样式代码放这里
}
三、Opera浏览器
属性选择器Hack
/* Opera 9.25, Safari 2/3.1 */
*|html[xmlns*=""] .selector {
样式代码放这里
} /* Opera 9.27 and below, Safari 2 */
html:first-child .selector {
样式代码放这里
} /* Opera 9.5+ */
noindex:-o-prefocus, .selector {
样式代码放这里
}
媒体查询Hack
/* Opera 7 */
@media all and (min-width: 0px){
样式代码放这里
} /* Opera 12- */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
样式代码放这里
} /* Opera, Firefox 3.5+, IE 9/10 */
@media screen and (min-resolution: +72dpi) {
样式代码放这里
} /* Opera, IE 8/9/10 */
@media screen {
样式代码放这里
}
JavaScript Hack
/* Opera 9.64- */
var isOpera = /^function \(/.test([].sort); /* Opera 12- */
var isOpera = Boolean(window.opera);
四、Safari浏览器
属性选择器Hack
/* Safari 2/3 */
html[xmlns*=""] body:last-child .selector {
样式代码放这里
}
html[xmlns*=""]:root .selector {
样式代码放这里
} /* Safari 2/3.1, Opera 9.25 */
*|html[xmlns*=""] .selector {
样式代码放这里
} /* Safari 5- and Chrome 24- */
::made-up-pseudo-element, .selector {
样式代码放这里
}
媒体查询Hack
/* Safari */
var isSafari = /a/.__proto__=='//';
五、IE浏览器
选择器Hack
/* IE 6 and below */
* html .selector {
样式代码放这里
}
.suckyie6.selector {
样式代码放这里
} /* .suckyie6 can be any unused class */ /* IE 7 and below */
.selector, {
样式代码放这里
} /* IE 7 */
*:first-child+html .selector {
样式代码放这里
}
.selector, x:-IE7 {
样式代码放这里
}
*+html .selector {
样式代码放这里
} /* Everything but IE 6 */
html > body .selector {
样式代码放这里
} /* Everything but IE 6/7 */
html > /**/ body .selector {
样式代码放这里
}
head ~ /* */ body .selector {
样式代码放这里
} /* Everything but IE 6/7/8 */
:root *> .selector {
样式代码放这里
}
body:last-child .selector {
样式代码放这里
}
body:nth-of-type(1) .selector {
样式代码放这里
}
body:first-of-type .selector {
样式代码放这里
}
属性/属性值 Hack
/* IE 6 */
.selector { _color: blue; }
.selector { -color: blue; } /* IE 6/7 - any combination of these characters:
! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > | */
.selector { !color: blue; }
.selector { $color: blue; }
.selector { &color: blue; }
.selector { *color: blue; }
/* ... */ /* IE 6/7 - acts as an !important */
.selector { color: blue !ie; }
/* string after ! can be anything */ /* IE 8/9 */
.selector { color: blue\0/; }
/* must go at the END of all rules */ /* IE 9/10 */
.selector:nth-of-type(1n) { color: blue\9; } /* IE 6/7/8/9/10 */
.selector { color: blue\9; }
.selector { color/*\**/: blue\9; } /* Everything but IE 6 */
.selector { color/**/: blue; }
媒体查询Hack
/* IE 6/7 */
@media screen\9 {
样式代码放这里
} /* IE 6/7/8 */
@media \0screen\,screen\9 {
样式代码放这里
} /* IE 8 */
@media \0screen {
样式代码放这里
} /* IE 8/9/10 & Opera */
@media screen\0 {
样式代码放这里
} /* IE 9/10, Firefox 3.5+, Opera */
@media screen and (min-resolution: +72dpi) {
样式代码放这里
} /* IE 9/10 */
@media screen and (min-width:0\0) {
样式代码放这里
} /* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
样式代码放这里
} /* Everything but IE 6/7/8 */
@media screen and (min-width: 400px) {
样式代码放这里
}
JavaScript Hack
/* IE <= 8 */
var isIE = '\v'=='v';
/* IE 6 */
(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 6]><i></i><![endif]-->";
var isIE = checkIE.getElementsByTagName("i").length == 1;
/* IE 7 */
(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 7]><i></i><![endif]-->";
var isIE = checkIE.getElementsByTagName("i").length == 1;
navigator.appVersion.indexOf("MSIE 7.")!=-1
/* IE 8 */
(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 8]><i></i><![endif]-->";
var isIE = checkIE.getElementsByTagName("i").length == 1;
/* IE 9 */
(checkIE = document.createElement("b")).innerHTML = "<!--[if IE 9]><i></i><![endif]-->";
var isIE = checkIE.getElementsByTagName("i").length == 1;
/* IE 10 */
var isIE = eval("/*@cc_on!@*/false") && document.documentMode === 10; /* IE 10 */
var isIE = document.body.style.msTouchAction != undefined;
上面列出各个浏览器下hack的写法,当然在实际运用之中并不建议使用hack。如果你的页面需要hack来处理时,请先检查你的css或者js,如果实在无法达到要求,在考虑使用hack来处理。
转载自http://www.w3cplus.com/
css兼容处理-hack的更多相关文章
- CSS兼容各浏览器的hack
CSS兼容各浏览器的hack:建议:尽可能的手写代码,可以有效的提高学习效率和深度.浏览器的种类多,麻烦自然也多,主要是各种浏览器对某些属性的渲染效果并不相同,所以有时候需要专门针对特定浏览器或者特定 ...
- 主流浏览器css兼容问题的总结
最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼. 现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑.主要测试了chrome,fire ...
- CSS兼容问题实用建议
CSS兼容问题,是美工最头痛的问题.做测试时,用谷哥和360浏览器(最新)都没有什么问题,用 IE6/IE8测试,问题就冒出来了.微软现在出IE10,我电脑上已经无法用IE6准确测试,IE-TESTE ...
- div+css兼容 ie6_ie7_ie8_ie9_ie10和FireFox_Chrome等浏览器方法
1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 ...
- css兼容问题集合
css兼容问题 兼容问题 1.文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白 ...
- css兼容各个浏览器的三角形图标
css兼容各个浏览器的三角形图标 在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹 ...
- CSS兼容常用技巧
请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和 ...
- ie6 7 8 9 firefox的css兼容问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 解决各大浏览器兼容问题hack
解决各大浏览器兼容问题hack,IE6/ IE7/ IE8/ IE9/ Firefox/ Opera/ Webkit/ Chrome/ Safari. 浏览器兼容是网站前端页面制作最基本的问题,通常I ...
随机推荐
- 线程安全 原子性 可见性 顺序性 volatile
- Maven - settings.xml简易配置Demo
前言 这里贴一下settings.xml的一个简易配置demo,就是简单配置了:本地的仓库地址.阿里云镜像.指定使用jdk1.8进行编译. 这里使用的Maven是3.5.0版本的. 配置文件demo ...
- django-返回客户端外网ip服务
在服务器应用初始化的时候,比如salt-minion,需要在配置文件里说明自己的id,一般用ip. 如果都在一个内网里,从ip命令里获取就行了. 但现在的企业后台环境更加复杂,很多都是跨机房.有物理机 ...
- 使用JDBC进行简单的增删改查
JDBC为java的基础.用jdbc实现对数据库的增删改查的功能是程序员的基本要求.本例以mysql为例,首先要使用本例需要添加mysql-connector-java-5.1.7-bin.jar包. ...
- 【实用】Html5实现文件异步上传
1 简介 开发文件上传功能从来不是一件愉快的事,异步上传更是如此,使用过iframe和Flash的上传方案,也都感觉十分的别扭.本文简要简绍利用Html5的FormData实现文件的异步上传,还可以实 ...
- mui开发中获取单选按钮、复选框的值
js获取单选按钮的值 function getVals(){ var res = getRadioRes('rds'); if(res == null){mui.toast('请选择'); retur ...
- Android 面试总结~~~
一.面试中的问题 通过这几天的面试,总结了自己在面试过程中问到的问题,部分问题已经给出了答案,还有部分问题,还未有时间整理出来. ListView出现闪图.图片错乱原因解决方案 函数式编程 (Lamb ...
- 显示大图Activity(支持手势放大)
xml: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:andro ...
- C/C++ 内存分配方式,堆区,栈区,new/delete/malloc/free
内存分配方式 内存分配方式有三种: [1] 从静态存储区域分配.内存在程序编译的时候就已经分配好,这块内存在程序的整个运行期间都存在.例如全局变量, static 变量. [2] 在栈上创建.在执行函 ...
- vba控制图表,excel图表,一键完成
来源http://club.excelhome.net/thread-1417686-1-1.html 官方教程链接 https://docs.microsoft.com/zh-cn/office/v ...