• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >浏览器兼容 > 浏览器hack总结 详细的浏览器兼容性的快速解决方法

浏览器hack总结 详细的浏览器兼容性的快速解决方法

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-06-02

本文主要包含浏览器兼容性怎么解决,浏览器兼容性解决,解决浏览器兼容性问题,如何解决浏览器兼容性,浏览器兼容性设置等相关知识,佚名 希望在学习及工作中可以帮助到您

由于各浏览器对页面的解析不同,会导致页面在不同浏览器中显示的样式不一致,为了保持页面的统一,经常需要对浏览器进行兼容性问题的调试。

CSS Hack

面对浏览器诸多的兼容性问题,经常需要通过CSS样式来调试,其中用的最多的就是CSS Hack。所谓CSS Hack就是针对不同的浏览器书写不同的CSS样式,通过使用某个浏览器单独识别的样式代码,控制该浏览器的显示效果。CSS Hack主要分为两类

CSS 选择器Hack

CSS选择器Hack是指通过在CSS选择器的前面,加上一些只有特定浏览器才能识别的Hack前缀,来控制不同的CSS样式。针对不同版本的浏览器,选择器Hack分为以下几类:

(1)IE6及IE6以下版本识别的选择器Hack

书写CSS样式时,如果希望此样式只对IE6及IE6以下版本的浏览器生效,可以使用IE6及以下版本的选择器Hack,其基本语法如下:

* html 选择器{样式代码}

(2)IE7识别的选择器Hack

书写CSS样式时,如果希望此样式只对IE7浏览器生效,可以使用IE7识别的选择器Hack,其基本语法如下:

*+html 选择器{样式代码}

CSS属性Hack

这里小强老师,把属性hack分为 前缀属性hack和 后缀属性hack

CSS属性Hack(前缀) 针对的浏览器
_color:red; IE6及其以下的版本
*color:red ;或者 +color:red; IE7及其以下的版本
CSS属性Hack(后缀) 针对的浏览器
color:red\9; IE6/IE7/IE8/IE9/IE10版本
color:red\0; IE8/IE9/IE10版本
color:red\9\0; IE9/IE10
color:red!important IE7/IE8/IE9/IE10及其他非IE浏览器

其实,现在越来越的公司,不太让兼容ie6了,现在比较关心的是ie8.910等高版本的浏览器,因此这里小强老师也总结了ie专属hack ,比如ie8等。

选择器Hack写法 针对于的浏览器
@media screen\9{body { background: red; }} 只对IE6/7生效
@media \0screen {body { background: red; }} 只对IE8生效
@media \0screen\,screen\9{body { background: blue; }} 只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

如果样式比较多,条件注释,是不错的选择:

IE条件注释语句

IE条件注释语句 针对的浏览器版本
<!--[if lt IE 7]>内容<![endif]-->   IE7 以下版本
<!--[if lte IE 7]>内容<![endif]--> IE7及以下版本(包含IE7)
<!--[if gt IE 7]>内容<![endif]--> IE7 以上版本
<!--[if gte IE 7]>内容<![endif]--> IE7及以上版本(包含IE7)
<!--[if !IE 7]>内容<![endif]--> 非IE7版本
<!--[if !IE]><!-->您使用不是 Internet Explorer<!--<![endif]--> 非IE浏览器

以上就是小编为大家带来的浏览器hack总结 详细的浏览器兼容性的快速解决方法的全部内容了,希望大家多多支持脚步之家。

原文地址:http://www.cnblogs.com/androidshouce/archive/2016/06/16/5589770.html

</div>

您可能想查找下面的文章:

  • 浏览器hack总结 详细的浏览器兼容性的快速解决方法
  • 关于IE7 z-index的浏览器兼容性问题完美解决方案
  • 常见浏览器兼容性问题与解决方案css篇
  • CSS 多浏览器兼容性问题及解决方案

相关文章

  • 2017-06-02ie placeholder属性的兼容性问题解决方法
  • 2017-06-02史上最全的CSS hack方式一览(兼容多浏览器)
  • 2017-06-02css ul li 的使用及浏览器兼容问题
  • 2017-06-02CSS 多浏览器兼容性问题及解决方案
  • 2017-06-02如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器
  • 2017-06-02IE6/IE7/IE8/Firefox的CSS各种兼容margin问题解决办法
  • 2017-06-02详谈IE条件注释
  • 2017-06-02span 右浮动折行 解决ie6/7中span右浮动折行问题
  • 2017-06-02IE6 float:left margin-left出现两倍像素
  • 2017-06-02CSS对浏览器的兼容性技巧总结

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 兼容浏览器的css inline-block写法
    • ie6布局网页padding值加倍的解决方法
    • IE6 bug修正的10个小技巧 推荐
    • 让IE6支持最小高度min-height、最大高度max-height的方法
    • IE6 position:fixed bug (固定窗口方法)
    • CSS背景图拉伸效果兼容FF/Chrome/IE等主流浏览器(亲测)
    • CSS针对IE6实现网页图片底部留出空白的方法
    • IE6下图片下方有空间距的多种解决方法
    • css padding属性兼容ie6,ie8,firefox实例详解
    • 网页页面原结构和CSS写法导致浏览器兼容问题

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有