我们在开发DIV+CSS页面时候常常会遇到开发出的网页的一些地方在各大浏览器比如微软IE6、微软IE7、微软IE8、火狐浏览器、谷歌浏览器有一些不同,如宽度、高度等地方有相差误。
IE6比较老的版本浏览器,用户比较多,
IE7较新浏览器,更接近标准浏览器,
IE8算是微软标准浏览器,但差别于浏览器,
火狐(Mozilla, Firefox)和谷歌浏览器(chrome)是比较标准的IE浏览器,一般我们以这个浏览器为开发参考平台,同时IE8与这两个浏览器解释CSS比较接近,一般只要通过火狐、谷歌浏览器测试兼容,一般就能确定IE8.
因此一般我们区别这些浏览器CSS hack的方法就变得简单,我们只需考虑IE6\IE7\火狐(Firefox)这3个浏览器即可兼容全部浏览器。
具体区别如下:
区别IE6与FF:
background:orange;*background:blue;
区别IE6与IE7:
background:green !important;background:blue;
区别IE7与FF:
background:orange; *background:green;
区别FF,IE7,IE6:
background:orange;*background:green !important;*background:blue;
注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
另外再补充一个,下划线"_",
IE6支持下划线,IE7和firefox均不支持下划线。
于是大家还可以这样来区分IE6,IE7,firefox: background:orange;*background:green;_background:blue;
注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
以上是介绍区别各浏览器的CSS hack的写法,下面我们简单介绍这些CSS hack用法:
要求说明:假如我们设置一个类名为exple的类CSS属性,CSS样式边框为1PX黑色边框,高度为100PX并要求,在IE6浏览器下宽度为100PX;IE7浏览器宽度下为150PX;火狐IE8谷歌浏览器下宽度为200PX;(PX是长度单位像素)
则CSS代码如下:
.exple{border:1px solid #000; height:100px;width:200px; *width:150px !important; *width100px;}
这样只要在html设置一个div的类(class="exple"),这样这部分在火狐、IE8、谷歌浏览器下就会显示宽度为200px高度为100px带1px的黑边框的方块;IE7浏览器宽度下为150PX高度为100px带1px的黑边框的方块;在IE6浏览器下就会显示出长度和宽度为100px的带1px黑边的正方形。

针对不同浏览器,CSS如何写的更多相关文章

  1. 针对各种浏览器css不兼容的写法

    /*针对谷歌浏览器内核支持的CSS样式*/@media screen and (-webkit-min-device-pixel-ratio:0) { 样式 } /*针对IE6特制识别的CSS样式*/ ...

  2. 怎么写针对IE9的CSS

    (自己亲自试过有用)针对IE9的CSS只需在相应CSS代码加入只有IE9识别的 \9\0.具体代码如下: .div{ background-color:#0f0\9\0;/* ie9 */ } 其他浏 ...

  3. 针对特定浏览器起作用的CSS: IE Chrome Firefox CSS Hack

    Firefox的CSSHack 只在Firefox上应用的CSS Hack,虽然这种情况非常少,但有时也会碰到: @-moz-document url-prefix() { .cssSelector ...

  4. 关于只针对ie7浏览器的css问题

    如代码: .centerDiv .search_k2{ margin-left: 18px; *margin-left: 9px; margin-top: 10px; height: 40px;} 中 ...

  5. 区分IE8/IE7/IE6及其他浏览器-CSS “\9″

    区分IE8/IE7/IE6及其他浏览器-CSS “\9″ 原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] by zhangxinxu from h ...

  6. 浏览器CSS兼容

    一.<important 在IE6及FF中的使用>.box1 {width:150px !important;} .box1 {width:250px;} !important是说这个设置 ...

  7. 转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks

    [总结]浏览器CSS Hacks汇总   浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...

  8. 12小时包你学会基于ReactMix框架的ReactNativeApp开发(二)基于Css+HTML写第一个app页面

    上一篇文章,大家对于ReactMix(https://github.com/xueduany/react-mix)框架有了一个基本认识,知道我们是一个语法糖,帮助大家基于一套代码,所有平台都能跑.那么 ...

  9. 各大浏览器CSS Hack收集

    各大浏览器CSS Hack收集  >>>>>>>>>>>>>>>>>>>>> ...

随机推荐

  1. Cocos2d-x 核心概念 - Node中的重要操作

    作为跟类,Node有很多的重要的函数 local childNode = cc.Node:create() --创建节点 node:addChildNode(childNode,0,123) --创建 ...

  2. LINQ之路 8: 解释查询(Interpreted Queries)

    LINQ提供了两个平行的架构:针对本地对象集合的本地查询(local queries),以及针对远程数据源的解释查询(Interpreted queries). 在讨论LINQ to SQL等具体技术 ...

  3. python GUI输入窗口

    为了解决 sublime text 下 python 的 raw_input() 函数无法起效,便萌生了个用 GUI 窗口来获取输入的想法,一开始想用 Tkinter,后来想了下还是用 PyQt 吧, ...

  4. js跨域_jsonP

    $.ajax("url", type:"get", dataType:"jsonp", jsonp:"callback" ...

  5. python & c

    http://www.ibm.com/developerworks/cn/linux/l-cn-pythonandc/

  6. `UnityEditor.EditorUtility' does not contain a definition for `GetMiniThumbnail'

    I got the following errors with Untiy 4.0f7error CS0117: `UnityEditor.EditorUtility' does not contai ...

  7. Hadoop基础学习框架

    我们主要使用Hadoop的2个部分:分布式文件存储系统(HDFS)和MapReduce计算模型. 关于这2个部分,可以参考一下Google的论文:The Google File System 和 Ma ...

  8. Hadoop中wordcount程序

    一.测试过程中 输入命令: 首先需要在hadoop集群中添加文件 可以首先进行查看hadoop集群中文件目录 hadoop fs -ls / hadoop fs -ls -R / hadoop fs ...

  9. 卸载mysql

    如果你的电脑里装过MySQL,想再重新安装MySQL的时候可能就会因为前一版本卸载不彻底而出现错误.最常见的就是安装好后设置参数的最后一步验证时,会在Execute configurattion步骤中 ...

  10. 收集C#常用类:产生一个验证码,改了下

    using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Drawing2D ...