主流浏览器的Hack写法

最新推荐文章于 2024-08-14 15:45:18 发布
最新推荐文章于 2024-08-14 15:45:18 发布
阅读量120 收藏
点赞数
文章标签： javascript 前端 ViewUI
原文链接：http://www.cnblogs.com/lglijing/p/3325852.html
版权

此 处的“hack”并非是网络中很神秘的组织“黑客”，而是使用他们可以帮助你解决浏览器下一些怪异和特殊的bug。很多时候对于这样的讨论也非常多，比如 说在您的代码中应不应该使用hack？甚至延伸到使用“hack”是一个优秀的前端人员？其实，有时候是逼不得以，必须为之。

有关于hack的使用方法和种类，互联系网上成千上万，比较典型的介绍有：

大家平时看得多的应该是IE浏览器的hack写法比较多，但对于现代浏览器，比如说Safari、Chrome、Firefox等浏览器的hack写法并不多见，甚至有的不知道怎么写。如果您是属于后者，根本不知道各浏览器下具有哪些hack手段，不要着急。因为Hugo Giraudel和Tim Pietrusky将各浏览器下的hack写整理放在了Browserhacks.com之上。当然也要非常感谢Paul Irish和Nicolas Gallagher所做的补充与说明。为了国内前端开发者更好的查阅，我将Browserhacks.com上有关于各种浏览器的hack写法搬移到w3cplus上，以供大家翻阅与查找。

一、Chrome浏览器

选择器Hack

  1. /* Chrome 24- and Safari 5- */
  2. ::made-up-pseudo-element, .selector {
  3.   代码放在这里
  4. }  
复制代码

媒体查询Hacks

  1. /* Chrome, Safari 3+ */
  2. @media screen and (-webkit-min-device-pixel-ratio:0) {
  3.   代码放在这里  
  4. }  
复制代码

JavaScript Hack

  1. /* Chrome */
  2. var isChrome = Boolean(window.chrome);  
复制代码

二、Firefox浏览器

属性选择器Hack

  1. /* Firefox 1.5 */
  2. body:empty .selector {
  3. 样式代码放这里
  4. }
  5. /* Firefox 2+ */
  6. .selector, x:-moz-any-link {
  7. 样式代码放这里  
  8. }
  9. /* Firefox 3+ */
  10. .selector, x:-moz-any-link; x:default {
  11. 样式代码放这里  
  12. }
  13. /* Firefox 3.5+ */
  14. body:not(:-moz-handler-blocked) .selector {
  15. 样式代码放这里  
  16. }  
复制代码

媒体查询Hack

  1. /* Firefox 3.5+, IE 9/10, Opera */
  2. @media screen and (min-resolution: +72dpi) {
  3. 样式代码放这里   
  4. }
  5. /* Firefox 3.6+ */
  6. @media screen and (-moz-images-in-menus:0) {
  7. 样式代码放这里   
  8. }
  9. /* Firefox 4+ */
  10. @media screen and (min--moz-device-pixel-ratio:0) {
  11. 样式代码放这里   
  12. }  
复制代码

JavaScript Hack

  1. /* Firefox */
  2. var isFF = !!navigator.userAgent.match(/firefox/i);

  4. /* Firefox 2 - 13 */
  5. var isFF = Boolean(window.globalStorage);

  7. /* Firefox 2/3 */
  8. var isFF = /a/[-1]=='a';

  10. /* Firefox 3 */
  11. var isFF = (function x(){})[-5]=='x';  
复制代码

混合型Hack

  1. /* Firefox 3+ */
  2. @-moz-document url-prefix() {
  3. 样式代码放这里   
  4. }  
复制代码

三、Opera浏览器属性选择器Hack

  1. /* Opera 9.25, Safari 2/3.1 */
  2. *|html[xmlns*=""] .selector {
  3. 样式代码放这里  
  4. }

  6. /* Opera 9.27 and below, Safari 2 */
  7. html:first-child .selector {
  8. 样式代码放这里  
  9. }

  11. /* Opera 9.5+ */
  12. noindex:-o-prefocus, .selector {
  13. 样式代码放这里  
  14. }  
复制代码

媒体查询Hack

  1. /* Opera 7 */
  2. @media all and (min-width: 0px){
  3. 样式代码放这里   
  4. }

  6. /* Opera 12- */
  7. @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
  8. 样式代码放这里   
  9. }

  11. /* Opera, Firefox 3.5+, IE 9/10 */
  12. @media screen and (min-resolution: +72dpi) {
  13. 样式代码放这里   
  14. }

  16. /* Opera, IE 8/9/10 */
  17. @media screen {
  18. 样式代码放这里   
  19. }  
复制代码

JavaScript Hack

  1. /* Opera 9.64- */
  2. var isOpera = /^function \(/.test([].sort);

  4. /* Opera 12- */
  5. var isOpera = Boolean(window.opera);  
复制代码

四、Safari浏览器属性选择器Hack

  1. /* Safari 2/3 */
  2. html[xmlns*=""] body:last-child .selector {
  3. 样式代码放这里   
  4. }
  5. html[xmlns*=""]:root .selector  {
  6. 样式代码放这里   
  7. }

  9. /* Safari 2/3.1, Opera 9.25 */
  10. *|html[xmlns*=""] .selector {
  11. 样式代码放这里   
  12. }

  14. /* Safari 5- and Chrome 24- */
  15. ::made-up-pseudo-element, .selector {
  16. 样式代码放这里   
  17. }  
复制代码

媒体查询Hack

  1. /* Safari */
  2. var isSafari = /a/.__proto__=='//';  
复制代码

五、IE浏览器

选择器Hack

  1. /* IE 6 and below */
  2. * html .selector  {
  3. 样式代码放这里   
  4. }
  5. .**yie6.selector {
  6. 样式代码放这里   
  7. } /* .**yie6 can be any unused class */

  9. /* IE 7 and below */
  10. .selector, {
  11. 样式代码放这里   
  12. }

  14. /* IE 7 */
  15. *:first-child+html .selector {
  16.   样式代码放这里  
  17. }
  18. .selector, x:-IE7 {
  19. 样式代码放这里   
  20. }
  21. *+html .selector {
  22. 样式代码放这里   
  23. }

  25. /* Everything but IE 6 */
  26. html > body .selector {
  27. 样式代码放这里   
  28. }

  30. /* Everything but IE 6/7 */
  31. html > /**/ body .selector {
  32.   样式代码放这里  
  33. }
  34. head ~ /* */ body .selector {
  35. 样式代码放这里   
  36. }

  38. /* Everything but IE 6/7/8 */
  39. :root *> .selector {
  40. 样式代码放这里   
  41. }
  42. body:last-child .selector {
  43. 样式代码放这里   
  44. }
  45. body:nth-of-type(1) .selector {
  46. 样式代码放这里   
  47. }
  48. body:first-of-type .selector {
  49. 样式代码放这里   
  50. }  
复制代码

属性/属性值 Hack

  1. /* IE 6 */
  2. .selector { _color: blue; }
  3. .selector { -color: blue; }

  5. /* IE 6/7 - any combination of these characters:
  6. ! [        DISCUZ_CODE_249        ]nbsp;& * ( ) = % + @ , . / ` [ ] # ~ ? : <  > | */
  7. .selector { !color: blue; }
  8. .selector { $color: blue; }
  9. .selector { &color: blue; }
  10. .selector { *color: blue; }
  11. /* ... */

  13. /* IE 6/7 - acts as an !important */
  14. .selector { color: blue !ie; }
  15. /* string after ! can be anything */

  17. /* IE 8/9 */
  18. .selector { color: blue\0/; }
  19. /* must go at the END of all rules */

  21. /* IE 9/10 */
  22. .selector:nth-of-type(1n) { color: blue\9; }

  24. /* IE 6/7/8/9/10 */
  25. .selector { color: blue\9; }
  26. .selector { color/*\**/: blue\9; }

  28. /* Everything but IE 6 */
  29. .selector { color/**/: blue; }
复制代码

媒体查询Hack

  1. /* IE 6/7 */
  2. @media screen\9 {
  3. 样式代码放这里   
  4. }

  6. /* IE 6/7/8 */
  7. @media \0screen\,screen\9 {
  8. 样式代码放这里   
  9. }

  11. /* IE 8 */
  12. @media \0screen {
  13. 样式代码放这里   
  14. }

  16. /* IE 8/9/10 & Opera */
  17. @media screen\0 {
  18. 样式代码放这里   
  19. }

  21. /* IE 9/10, Firefox 3.5+, Opera */
  22. @media screen and (min-resolution: +72dpi) {
  23. 样式代码放这里   
  24. }

  26. /* IE 9/10 */
  27. @media screen and (min-width:0\0) {
  28. 样式代码放这里   
  29. }

  31. /* IE 10+ */
  32. @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  33. 样式代码放这里   
  34. }

  36. /* Everything but IE 6/7/8 */
  37. @media screen and (min-width: 400px) {
  38. 样式代码放这里   
  39. }
复制代码

JavaScript Hack

  1. /* IE <= 8 */
  2. var isIE = '\v'=='v';  
复制代码
  1. /* IE 6 */
  2. (checkIE = document.createElement("b")).innerHTML = "<!--[if IE 6]><i></i><![endif]-->";
  3. var isIE = checkIE.getElementsByTagName("i").length == 1;
复制代码
  1. /* IE 7 */
  2. (checkIE = document.createElement("b")).innerHTML = "<!--[if IE 7]><i></i><![endif]-->";
  3. var isIE = checkIE.getElementsByTagName("i").length == 1;
  4. navigator.appVersion.indexOf("MSIE 7.")!=-1  
复制代码
  1. /* IE 8 */
  2. (checkIE = document.createElement("b")).innerHTML = "<!--[if IE 8]><i></i><![endif]-->";
  3. var isIE = checkIE.getElementsByTagName("i").length == 1;
复制代码
  1. /* IE 9 */
  2. (checkIE = document.createElement("b")).innerHTML = "<!--[if IE 9]><i></i><![endif]-->";
  3. var isIE = checkIE.getElementsByTagName("i").length == 1;
复制代码
  1. /* IE 10 */
  2. var isIE = eval("/*@cc_on!@*/false") && document.documentMode === 10;  

  4. /* IE 10 */
  5. var isIE = document.body.style.msTouchAction != undefined;
复制代码

上面列出各个浏览器下hack的写法，当然在实际运用之中并不建议使用hack。如果你的页面需要hack来处理时，请先检查你的css或者js，如果实在无法达到要求，在考虑使用hack来处理。

特别声明：以上展示的hack代码均来自于：http://browserhacks.com/

转载于:https://www.cnblogs.com/lglijing/p/3325852.html

abcd473530061
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
各浏览器下Hack的写法
10-29
以下是针对各主流浏览器的一些CSS Hack写法： 1. **Firefox**： 使用`@-moz-document url-prefix()`来为Firefox编写特定的CSS规则。例如： ```css @-moz-document url-prefix() { .selector { property: value...
针对主流浏览器的CSS-HACK写法及IE常用条件注释
12-13
为了让所写代码在各主流浏览器中正常运行，我们不得不为各种浏览器写对应的样式。本文，青鸟将为你总结CSS针对各浏览器的兼容HACK(以IE6/IE7/IE8 /FF为主),以及IE特有的条件注释使用方法.一、通用区分方式：IE6、IE...
常用CssHack的写法（IE6-9）以及主流浏览器hack写法
程序员写的技术 FAQ 和杂文
09-20 1187
看了此文，还是用标准写法比较好。CSS 与 JS 都如此。 Css Hack div { width:300px; height:300px; background-color:blue; /*firefox*/
主流浏览器的内核以及Hack写法
qq_33999340的博客
10-21 1238
要搞清楚浏览器内核是什么，首先应该先搞清楚浏览器的构成。简单来说浏览器可以分为两部分，shell+内核。其中shell的种类相对比较多，内核则比较少。Shell是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。内核是基于标记语言显示内容的程序或模块。也有一些浏览器并不区分外壳和内核。从Mozilla将Gecko独立出来
主流浏览器Css&js hack写法
weixin_34038293的博客
08-03 122
参考： BROWSER HACKS 主流浏览器的Hack写法
html 常见hack,针对主流浏览器的CSS-HACK写法及IE常用条件注释
weixin_29729247的博客
06-25 210
对于前端工作者,最痛苦的事莫过于浏览器兼容性的调试,而这最痛苦的事中,最变态的莫过于微软的三个版本IE6.0/IE7.0/IE8.0. 为了让所写代码在各主流浏览器中正常运行，我们不得不为各种浏览器写对应的样式。本文，青鸟将为你总结CSS针对各浏览器的兼容HACK(以IE6/IE7/IE8 /FF为主),以及IE特有的条件注释使用方法.一、通用区分方式：IE6、IE7能识别*，标准浏览器(如FF)...
主流浏览器以及兼容问题
zhangankang的博客
08-27 3914
一、主流浏览器 浏览器可以分为两部分，外壳+内核。其中外壳的种类相对比较多，内核则比较少。 外壳： Shell，浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。 内核： 　　浏览器内核分成两部分：渲染引擎和js引擎，由于js引擎越来越独立，内核就倾向于只指渲染引擎，负责请求网络页面资源加以解析排版并呈现给用户 主要组件包括： 　...
主流浏览器的CSS-HACK写法及IE常用条件注释
chizhanxi9865的博客
08-04 86
　　对于前端工作者,最痛苦的事莫过于浏览器兼容性的调试,而这最痛苦的事中,最变态的莫过于微软的三个版本IE6.0/IE7.0/IE8.0. 为了让所写代码在各主流浏览器中正常运行，我们不得不为各种浏览器写对应的样式。本文，青鸟将为你总结CSS针对各浏览器的兼容HACK(以IE6/IE7/IE8...
html设置谷歌火狐IE写法,各种浏览器的Hack写法(chrome firefox ie等)
weixin_42524530的博客
06-09 368
近期更新了谷歌浏览器，发现先前设置的-webkit-text-size-adjust:none，已经失效了，后才发现谷歌浏览器从V27.0版本就开始不支持了，然后直接导致了页面的错乱，坑爹啊。今天就目前主流浏览器把CSS hack总结了下，希望以后不要纠结类似的问题了，如下：众所周知，Hack是针对不同的浏览器去写不同的CSS样式，从而让各浏览器能达到一致的渲染效果，那么针对不同的浏览器写不同的C...
CSS全面兼容主流浏览器的写法汇总
weixin_30347335的博客
08-07 71
指定文件兼容性模式要为你的网页指定文件模式，需要在你的网页中使用meta元素放入X-UA-Compatible http-equiv 标头。以下是指定为Emulate IE7 mode 兼容性之范例。<html><head> <!-- Mimic Internet Explorer 7 --> <meta http-equiv="X-UA-Compat...
主流浏览器兼容性问题与解决方案
热门推荐
人生不迷茫的博客
11-12 1万+
                                                                         主流浏览器兼容性问题与解决方案 　　所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏...
浅谈各种浏览器下的CSS Hack兼容性写法
01-21
由于不同浏览器所遵循...CSS Hack技术，就是利用不同浏览器不同版本之间的CSS实现的特性差异，来满足我们需要的效果：在所有主流浏览器上显示统一的效果，或者为特定浏览器显示特定的效果。 众所周知，如果在一个css样
CSSer常用的Hack兼容表
11-25
下面是一张总结了IE6、IE7、IE8、Firefox、Chrome以及Safari等主流浏览器的CSS Hack兼容情况的表格： | Hack | IE6 | IE7 | IE8 | Firefox | Chrome | Safari | |-----------------|-----|-----|-----|---------|--...
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 503
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 666
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
vue3进阶用法之通过调用函数动态加载组件用法及示例
最新发布
wz9608的博客
08-14 182
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
Electron学习与总结
song854601134的博客
08-12 197
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
44 个 React 前端面试问题
广漂程序猿DevinRock
08-14 580
虚拟 DOM 是 React 中的一个概念，其中创建实际 DOM（文档对象模型）的轻量级虚拟表示并将其存储在内存中。它是一种用于优化 Web 应用程序性能的编程技术。当 React 组件的数据或状态发生更改时，虚拟 DOM 会被更新，而不是直接操作真实 DOM。然后，虚拟 DOM 计算组件的先前状态和更新状态之间的差异，称为“比较”过程。一旦识别出差异，React 就会高效地仅更新真实 DOM 的必要部分以反映更改。这种方法最大限度地减少了实际 DOM 操作的数量，并提高了应用程序的整体性能。
CSS浏览器兼容全攻略：解决各种hack问题
本文档详细梳理了CSS在各个主流浏览器（如IE6、IE7、IE8、Firefox、Chrome和Safari）之间的兼容性问题，特别是针对IE浏览器特有的hack技术，以及解决常见的布局、对齐、宽高、浮动、列表、链接、背景和图片等样式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值