常见的浏览器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 相关文章推荐
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
May 23 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
图解js图片轮播效果
Dec 20 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 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
PHP默认安装产生系统漏洞
2006/10/09 PHP
PHP的面试题集
2006/11/19 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
jquery获取form表单input元素值的简单实例
2016/05/30 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
对vue中v-if的常见使用方法详解
2018/09/28 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
vant实现购物车功能
2020/06/29 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
Python制作简单的网页爬虫
2015/11/22 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
园林资料员岗位职责
2013/12/30 职场文书
幼儿运动会邀请函
2014/01/17 职场文书
安全生产投入制度
2014/01/29 职场文书
2014年中秋寄语
2014/08/11 职场文书
相亲活动方案
2014/08/26 职场文书
Pandas自定义选项option设置
2021/07/25 Python