常见的浏览器Hack技巧整理


Posted in Javascript onJune 29, 2017

常见的浏览器Hack技巧整理

如果你经常需要做前端页面,那么你一定多多少少需要解决页面的浏览器兼容问题。而浏览器兼容问题大部分也集中在对IE系列的兼容。这里就总结一下对IE系列的CSS Hack,记录一下,方便以后查阅。

IE Hack

IE系列浏览器的hack大略如下:

  • _nowamagic:1px;-----------ie6
  • *nowamagic:1px;-----------ie7
  • nowamagic:1px\0;----------ie89
  • nowamagic:1px\9\0;--------ie9
  • :root nowamagic:1px;    ----ie9(实际情况可能ie9还是有问题,再用这种方式)

这样就基本上就可以兼容所有IE。

常见的浏览器Hack技巧整理

其中粉红色部分为属性hack,黄色部分为选择器hack,它们可以结合使用。此外Firefox和Chrome也有它们专有的hack,详细hack方式及使用示例如下:

Firefox 与 Chrome 的 Hack

Firefox:

@-moz-document url-prefix()  /*写在选择器外层时(只可写在此处):Firefox 
only*/

Chrome:

@media screen and (-webkit-min-device-pixel-ratio:0)  /*写在选择器外层时(只可写在此处):Chrome only*/

使用示例:

@-moz-document url-prefix()  /*Firefox*/
{
 body
 {
 background-color:pink;
 }
}

浏览器对css的解析是从前到后的,并且采用最后一个样式声明。

CSS 实例

.color{
  background-color: #CC00FF;    /*所有浏览器都会显示为紫色*/
  background-color: #FF0000\9;  /*IE6、IE7、IE8会显示红色*/
  *background-color: #0066FF;    /*IE6、IE7会变为蓝色*/      
  _background-color: #009933;    /*IE6会变为绿色*/
}
background: red;    /* 对FF Opera和Safari有效 */
#background: blue;   /* 对 IE6 和 IE7有效 */
_background: green;   /* 只对IE6有效 */
/*/background: orange;*/   /** 只对IE8有效 **/
!important     /*FF、IE7有效*/
*     /*IE都有效*/

IE8是可以和IE7兼容的,简单一行代码,让IE8自动调用IE7的渲染模式。只需要在页面中加入如下HTTP meta-tag:<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />,只要IE8读到这个标签,它就会自动启动IE7兼容模式,保证页面完整展示。

混用起来大约是这样:

:root .demo { 
 background:#963\9; /* 仅IE9适用 */ 
} 
.demo { 
 width: 300px; 
 height: 200px; 
 background: #036; /* 所有浏览器都适用 */ 
 background: #09F\9; /* IE6~IE9 */ 
 background: #09F\0; /* IE8~IE9 */ 
 background: #09F\0/; /* IE8 */ 
 *background: #F60; /* IE6/IE7 */ 
 +background: #F60; /* IE6/IE7 */ 
 @background: #F60; /* IE6/IE7 */ 
 >background: #F60; /* IE6/IE7 */ 
 _background: #ccc; /* IE6 */ 
} 
@media all and (min-width:0) { 
 .demo { 
 background: #F06; /* webkit and opera */ 
 } 
} 
 
@media screen and (-webkit-min-device-pixel-ratio:0){ 
 .demo {background:#609;}/*webkit (& Opera9.2)*/ 
}

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Document 对象的常用方法
Jul 31 Javascript
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
图片onload事件触发问题解决方法
Jul 31 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
vue通过路由实现页面刷新的方法
Jan 25 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
如何用JavaScipt测网速
May 09 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 #Javascript
bootstrapvalidator之API学习教程
Jun 29 #Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 #Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 #jQuery
详解webpack 多页面/入口支持&amp;公共组件单独打包
Jun 29 #Javascript
详解webpack 如何集成第三方js库
Jun 29 #Javascript
详解webpack介绍&amp;安装&amp;常用命令
Jun 29 #Javascript
You might like
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
js与C#进行时间戳转换
2014/11/14 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
JavaScript设计模式之观察者模式与发布订阅模式详解
2020/05/07 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
Python线程中对join方法的运用的教程
2015/04/09 Python
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
Appium+Python自动化测试之运行App程序示例
2019/01/23 Python
python3实现钉钉消息推送的方法示例
2019/03/14 Python
树莓派与PC端在局域网内运用python实现即时通讯
2019/06/22 Python
tornado+celery的简单使用详解
2019/12/21 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
大学生自我鉴定
2013/12/16 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
学生请假条格式
2014/04/11 职场文书
个人求职信范文
2014/05/24 职场文书
护理专业自荐信范文
2015/03/06 职场文书
合作与交流自我评价
2015/03/09 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
详解MySQL连接挂死的原因
2021/05/18 MySQL
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs