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

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

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

本文主要包含浏览器,hack,兼容性等相关知识,佚名 希望在学习及工作中可以帮助到您

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

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

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

  • 针对IE浏览器的兼容问题小结
  • 避免不必要的浏览器兼容性问题的5个技巧
  • 详解CSS3浏览器兼容
  • 解决360双核浏览器兼容模式的页面显示问题
  • 兼容主流浏览器的CSS透明代码(必看篇)
  • 浅谈浏览器的兼容性(必看篇)
  • 如何判断PC端浏览器内核
  • 浏览器hack总结 详细的浏览器兼容性的快速解决方法
  • 网站变灰色兼容代码 包括图片 支持所有浏览器
  • 一句话解决傻傻的多核浏览器切换

相关文章

  • 2017-08-06表单label美化代码
  • 2017-08-06css给span加float:right右浮动后内容换行下移
  • 2017-08-06css清除浮动的几种方法以及对应规范说明
  • 2017-08-06css 网页虚线制作方法剖析
  • 2017-08-06让IE6、IE7、IE8支持CSS3的脚本
  • 2017-08-06CSS position:absolute全面了解
  • 2017-08-06CSS加载失败原因的总结与分析
  • 2017-08-063个比较有用的网页制作技巧
  • 2017-08-06级联样式文件共通样式整理
  • 2017-08-06CSS实现横向粒子变动加载动画

文章分类

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

最近更新的内容

    • css中强制换行word-break、word-wrap、white-space区别实例说明
    • 网页制作需要了解的IE8、IE7、IE6、Firefox3、Firefox2的CSS hacks
    • 基于DOM+CSS3实现OrgChart组织结构图插件
    • 使用font-face改变字体即加载外部字体
    • Html 页面的强制换行问题总结
    • css图标制作教程制作云图标
    • 页面宽度自适应 jquery动态设置css样式
    • 关于clearBoth在GOOGLE Chrome中的问题解决方法
    • css 自动换行 强制换行属性 (firefox+ie)
    • CSS 背景属性5个应用实例.

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

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