常见的浏览器Hack技巧整理

常见的浏览器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，它们可以结合使用。此外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)*/
}

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

赞 (0)

相关推荐

  • CSS Hack 汇总速查手册浏览器兼容必会

    屏蔽IE浏览器(也就是IE下不显示) 复制代码 代码如下: *:lang(zh) select {font:12px !important;} /*FF 可见,特别声明:由于Opera最新的更新,此句目前已经成为FF的专用HACK*/ select:empty {font:12px !important;} /*safari可见*/ 这里select是选择符,根据情况更换.第二句是MAC上safari浏览器独有的. 仅IE7识别 复制代码 代码如下: *+html {-} 当面临需要只针对IE7

  • CSS hack浏览器兼容一览表

    CSS hack浏览器兼容一览表

    CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助.

  • 浏览器兼容解决FF/IE6/IE7背景专用CSS HACK

    自从互联网开始的那一刻起,各浏览器间的争斗就没有停止过.当然其中最苦的就是网页制作人员了,为了达到用户体验以及可用性的标准,不得不在多个浏览器上为统一效果而奔波.真希望哪一天FF可以一统天下,虽然现在还是IE的大天下.特别是微软最新发布的IE7浏览器,其CSS的兼容性确实给一些网页制作人员又添加了一个沉重的新负担. 为了让各浏览器有同样的显示效果,我们不得不用到CSS HACK.当然在这篇文章中我们只谈现在使用率最高的IE6和FF,以及将来可能会成为主流的IE7的CSS HACK,至于IE6以下

  • 常见的浏览器Hack技巧整理

    常见的浏览器Hack技巧整理

    常见的浏览器Hack技巧整理 如果你经常需要做前端页面,那么你一定多多少少需要解决页面的浏览器兼容问题.而浏览器兼容问题大部分也集中在对IE系列的兼容.这里就总结一下对IE系列的CSS Hack,记录一下,方便以后查阅. IE Hack IE系列浏览器的hack大略如下: _nowamagic:1px;-----------ie6 *nowamagic:1px;-----------ie7 nowamagic:1px\0;----------ie89 nowamagic:1px\9\0;----

  • css实现兼容各个浏览器的技巧的代码

    在编写css样式表的时候常常会碰到一写浏览器兼容的问题,象是不同内核的浏览器显示就不一定相同,不同版本的的浏览器也会产生上下兼容的问题,如何解决这些问题成了我们苦恼的问题,如果你对css hack技术很了解的话,那这就是太简单不过了,不过对于那些不怎么解的人来说可真成了他们所苦恼的事.在这就从 赵磊官方博客 引来一篇文章来介绍兼容各个浏览器的技巧.但是你也不要认为只要是浏览器显示出现差错就事浏览器的问题,也很可能是你的结构不好,建议你好好去学习一下语义结构,毕竟盖房子要先搭钢筋的. 1,盒解释器

  • vue前端重构computed及watch组件通信等实用技巧整理

    vue前端重构computed及watch组件通信等实用技巧整理

    目录 基于 springboot+vue 的测试平台开发 一.常规知识点 1.mounted 与 created 2. 计算属性 computed 3. 监视属性 watch 二.组件通信相关 1. 父组件给子组件传递 2. 子组件给父组件传值 3. 任意组件之间传值 4. vuex 基于 springboot+vue 的测试平台开发 继续更新 当前项目进度的前端重构已经完成了,在重构之余也对一些交互做了优化等.在本次的重构过程中感觉还是有不少收获,尤其是对于一些vue的前端知识的应用. 今天不

  • javaScript 逻辑运算符使用技巧整理

    javaScript 逻辑运算符使用技巧整理 下面是返回true的情况 !null //true !undefined //true !0 //true !NaN //true !"" //true 下面是返回false的情况 !Array //false !Function //false !String //false !Object //false !Number //false !" " //false !100 //false !"100&quo

  • 常见的浏览器存储方式（cookie、localStorage、sessionStorage）

    今天我们从前端的角度了解一下浏览器存储,我们常见且常用的存储方式主要由两种:cookie.webStorage(localStorage和sessionStorage).下面我们来一一认识它们. Cookie基于HTTP规范,用来识别用户. Cookie是服务器发送到浏览器的一小段数据,会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上. Cookie诞生之初的作用就是解决HTTP的无状态请求,用来记录一些用户相关的一些状态. •会话状态管理(如用户登录状态.购物车.游戏分数或其它需要

  • 详解IDEA 中使用Maven创建项目常见错误和使用技巧(推荐)

    使用idea的运行程序时,出现jar包不存在的错误(pom.xml文件中有依赖,而且代码没有红色的). 解决方法:Maven安装目录下的conf文件下的setting.xml文件中不要加入本地仓库路径设置,直接在idea中设置. tomcat启动maven项目出现jar包不存在的错误.解决方法:在pom.xml文件中加上war maven依赖下载速度太慢.解决方法:在maven安装目录下的conf文件下的setting.xml中,设置阿里云的镜像仓库地址. <mirror> <id>

  • Vue开发中常见的套路和技巧总结

    属性排放 export default { name: '名称', components: { // 组件挂载a}, created(){} // 数据获取 beforeMount() {}, // 数据获取 data: () => ({}), //响应式数据 computed: {} // 计算属性集合 methods: {} // 方法集合 ... // 销毁页面不要的资源 } 管理请求加载状态 async beforeMount(){ // 开始加载 this.loading = true

  • 数据库之SQL技巧整理案例

    一.获得给定月份的周日数 根据给定的某个日期,计算这个月份的周日的天数. 根据系统变量@@DATEFIRST的值,判断周日的序号为[DatePart(WEEKDAY,RQ)= (07-@@DateFirst) % 7 + 1].下面列出了周日.周一-周六的公式 公式 周几 (7-@@DateFirst)%7 +1 周日 (7-@@DateFirst)%7 +2 周一 (7-@@DateFirst)%7 +3 周二 (7-@@DateFirst)%7 +4 周三 (7-@@DateFirst)%7

  • Android开发Dart Constructors构造函数使用技巧整理

    目录 参考 正文 什么是构造函数? 缺省构造函数 ー Class() 私有构造函数ー Class._() 命名构造函数ー class.Named() 私有命名构造函数ー class._Named () 工厂构造函数ー factory class Class() 参考 https://dart.dev/guides/language/language-tour#factory-constructors https://www.freecodecamp.org/news/constructors-i

  • 日常收集整理常见的mysql sql技巧

    废话不多说了,直接给大家贴代码了. 1,数字辅助表 //创建表 create table test(id int unsigned not null primary key); delimiter // create procedure pnum(cnt int unsigned) begin declare i int unsigned default 1; insert into num select i; while i*2 < cnt do insert into num select

随机推荐