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

CSS Hack 浏览器兼容整理

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

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

一、基础概念

CSS hack:针对不同的浏览器写不同的CSS code的过程。

Css hack的原理:由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

浏览器优先级别:FF < IE7 < IE6

书写顺序一般是将识别能力强的浏览器的CSS写在后面,CSS hack书写顺序一般为FF IE7 IE6

div+css浏览器兼容IE6,IE7,FF之间的标识区别:

 

1. IE都能识别* ; 标准浏览器(如FF)不能识别*;

2. IE6能识别*,但不能识别 !important,

3. IE7能识别*,也能识别!important;

4. firefox不能识别*,但能识别!important;

 

1.IE6和firefox的区别:
       background:orange;*background:blue;
       意思就是火狐浏览器的背景颜色是橙色,而IE浏览器的背景色是蓝色.

2. IE6和IE7的区别:
       background:green !important;background:blue;
       意思指的是:IE7的背景颜色是绿色,IE6的背景颜色是蓝色

3. IE7和FF的区别:
       background:orange; *background:green;
       意思指的是:火狐浏览器的背景颜色是橙色,而IE7的背景颜色是绿色

4. FF,IE7,IE6的区别:
       background:orange;
       *background:green !important;
       *background:blue;
       意思是火狐浏览器的的背景橙色,IE7浏览器的背景颜色是绿色,而IE6浏览器的颜色是蓝色.

 二、实践建议

   (一).  开发平台的选择

        在 Firefox 上编写CSS, 同时兼容其他浏览器的. 这样做肯定会比在 IE 做好再到别的浏览器兼容来得容易, 因为 IE 对老标准支持还是很不错的, 而 IE 的一些特有功能人家却不支持. 所以推荐以 Firefox 结合 Firebug 扩展作为平台。

   (二).  CSS Hack 的顺序

使用 Firefox 作为平台, 只要代码写得够标准, 其实要 Hack 的地方不会很多的, IE 以外的浏览器几乎都不会有问题, 所以可以暂时忽略,

顺序如下:Firefox -> IE6 -> IE7 -> 其他

   (三).   Hack 的方法

说到方法有两种, 一种是在不同文件中处理, 另一种则是在同一个文件中处理. 其实作用是相同的, 只是出发点不一样而已.

1. 同一文件中处理.
如: id="bgcolor" 的控件要在 IE6 中显示蓝色, IE7 中显示绿色, Firefox 等其他浏览器中显示红色。

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

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
  • 2017-08-06CSS实现当鼠标移到input上时鼠标变为不可输入的状态
  • 2017-08-06css 水平居中,垂直居中,自适应宽度的代码
  • 2017-08-06HTML CSS样式基础(必看篇)
  • 2017-08-06使用条件注释判断 IE 浏览器版本适用于IE5.0及以上版本
  • 2017-08-06chrome居中但ie不居中的解决方法
  • 2017-08-06CSS图像替换技术的几种方案介绍
  • 2017-08-06用 CSS 让你的按钮(button)更加迷人
  • 2017-08-06CSS清除浮动的方法详解
  • 2017-08-06深入理解CSS中的属性模块

文章分类

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

最近更新的内容

    • CSS中:before和:after伪元素使用的奇技淫巧
    • 纯CSS+Div 的标签实现代码
    • 不固定宽度和高度的情况下CSS调整div居中的方法总结
    • 一款CSS3实现多功能下拉菜单(带分享按)的教程
    • IE/火狐/Chrome操作display:none对象所遇问题解答
    • css margin-left在IE6下的问题的解决方法
    • 一款利用css3的鼠标经过动画显示详情特效的实例教程
    • css中常用的几种居中方法(推荐)
    • js 解决隐藏与显示div的相关问题
    • display:none和visibility:hidden的差别比较与演示代码

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

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