针对不同的浏览器写不同的CSS code

首先建站学带你了解下什么是CSS hack:

CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack!

我们先看下不同浏览器之间的区别:

IE6比较老的版本浏览器,用户比较多,
IE7较新浏览器,更接近标准浏览器,
IE8算是微软标准浏览器,但差别于浏览器,
火狐(Mozilla, Firefox)和谷歌浏览器(chrome)是比较标准的IE浏览器,一般我们以这个浏览器为开发参考平台,同时IE8与这两个浏览器解释CSS比较接近,一般只要通过火狐、谷歌浏览器测试兼容,一般就能确定IE8.

因此一般我们区别这些浏览器CSS hack的方法就变得简单,我们只需考虑IE6IE7火狐(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;以下是各浏览器CSS hack表格

另外再补充一个,下划线"_",
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黑边的正方形。

浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6

  以: " #demo {width:100px;} "为例;

  #demo {width:100px;} /*被FIREFOX,IE6,IE7执行.*/

  * html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */

  *+html #demo {width:130px;} /*会被IE7执行*/

  ---------------

  所以最后,#demo的宽度在三个浏览器的解释为:

  FIREFOX:100px;

  ie6:120px;

  ie7:130px;

  IE8 最新css hack:

  "9" 例:"border:1px 9;".这里的"9"可以区别所有IE和FireFox.

  "*" IE6、IE7可以识别.IE8、FireFox不能.

  "_" IE6可以识别"_",IE7、IE8、FireFox不能.

时间: 2024-08-03 02:09:21

针对不同的浏览器写不同的CSS code的相关文章

IE与火狐(firefox)浏览器对js及css的支持差异

IE与火狐(firefox)浏览器对js及css支持的几处不同: 1.firefox不能对innerText支持,也不知道为什么.firefox支持innerHTML但却不支持innerText,所以上网查了一下,原来它改支持textContent来实现innerText,不过实现得没有那么好,默认把多余的空格也保留了.如果不用textContent,如果字符串里面不包含HTML代码也可以用innerHTML代替 2.禁止选取网页内容:在IE中一般用js:obj.onselectstart=fu

浏览器兼容手册javascript,css

浏览器兼容手册javascript,css javascript部分 1. document.form.item 问题 问题: 代码中存在 document.formName.item("itemName") 这样的语句,不能在FF下运行 解决方法: 改用 document.formName.elements["elementName"] 2. 集合类对象问题 问题: 代码中许多集合类对象取用时使用(),IE能接受,FF不能 解决方法: 改用 [] 作为下标运算,例

如何针对老旧浏览器设置 HTTPS 策略

如何针对老旧浏览器设置 HTTPS 策略 几天前,一位朋友问我:都说推荐用 Qualys SSL Labs 这个工具测试 SSL 安全性,为什么有些安全实力很强的大厂家评分也很低?我认为这个问题应该从两方面来看: 国内用户终端情况复杂,很多时候降低 SSL 安全配置是为了兼容更多用户: 确实有一些大厂家的 SSL 配置很不专业,尤其是配置了一些明显不该使用的 CipherSuite. 我之前写的<关于启用 HTTPS 的一些经验分享(一)>,主要介绍 HTTPS 如何与一些新出的安全规范配合使

针对class、id所做的CSS HACK

这是一篇关于CSS HACK的文章,这篇文章中提到的CSS HACK是针对class.id中属性的HACK,排列的顺序都具有要求.今天要和大家说的是针对class.id所做的CSS HACK.    代码如下 复制代码 .test{/*FF*/     height:20px;     background-color:orange; } *+html .test{/*IE7*/     height:20px;     background-color:blue; } *html .test{

DivCSS小结:浏览器默认HTML的CSS样式属性

核心提示:这个"浏览器默认HTML的CSS样式属性",在你需要还原默认值的时候,比较有用.开始的时候应用通配选择器 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默认CSS值了. 这个"浏览器默认HTML的CSS样式属性",在你需要还原默认值的时候,比较有用.开始的时候应用通配选择器 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默认CSS值了. 但通配选择器在大型网站的构建中,影响性能

jquery实现不同大小浏览器使用不同的css样式表的方法

 这篇文章主要介绍了jquery实现不同大小浏览器使用不同的css样式表的方法,需要的朋友可以参考下 该方法支持IE浏览器和其他浏览器.   1.首先定义两个link,当然你也可以是一个,第二个是要更改的css  代码如下: <link rel="stylesheet" type="text/css" href="main.css" /> <link id="size-stylesheet" rel=&quo

mybatis-求经验!Mybatis 针对Oracle数据库如何写“多条件”批量删除语句?

问题描述 求经验!Mybatis 针对Oracle数据库如何写"多条件"批量删除语句? 我的写法: <delete id="delMultiByIds2" parameterType="java.util.List"> delete from tb_duty where <foreach collection="list" item="item" index="index&quo

jquery实现不同大小浏览器使用不同的css样式表的方法_jquery

该方法支持IE浏览器和其他浏览器. 1.首先定义两个link,当然你也可以是一个,第二个是要更改的css 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="main.css" /><link id="size-stylesheet" rel="stylesheet" type="text/css" href=

让浏览器不加载缓存CSS和JS的方法

现在大多数浏览器都会缓存网站上的图片.CSS 和 JS 文件,以提高加载速度.当你的网站修改 CSS 和 JS 的时候往往因为缓存的原因无法立刻生效. 这样旧的 CSS 和新的 Html 就可能会导致错误,这里有个小技巧,可以保证浏览器不会缓存 CSS 和 JS,只需要在文件结尾随便加点参数即可,这样浏览器就会认为这是不同的文件.  代码如下 复制代码 <link rel="stylesheet" type="text/css" href="/sty