`
yangguoklose
  • 浏览: 20629 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

CSS对IE7,IE6,FireFox和其它不同浏览器的控制——CSS设计中的HACK,CSS解决方

    博客分类:
  • css
阅读更多
这里介绍几个经典的区别不同浏览器,CSS hack写法太多了,也很杂,这里我就介绍几款实用的,又容易记的写法:

------------------------------经典方案一---------------------------------

注:IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*;IE6能识别*,但不能识别 !important,IE7能识别*,也能识别!important;FF不能识别*,但能识别!important;

写两句代码来控制一个属性,区别Firefox与IE6:

background:orange;*background:blue;

//这一句代码写出来时,你用firefox或其它非IE浏览时,会发现,写了该代码的区域背景是橙色的,如果用IE浏览,却是蓝色的,这是因为IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*;

写两句代码来控制一个属性,区别IE7与IE6:

background:green !important;background:blue;

//这一句代码写出来时,你用IE7浏览,会发现,写了该代码的区域背景是绿色的,如果用IE6浏览,却是蓝色的,这是因为IE7能识别!important*,一但识别了,就执行,忽略了后面的那一句,但IE6却不能识别!important,所以前面部分跳过,直接执行了后半部份。

写两句代码来控制一个属性,区别Firefox与IE:

background:orange; *background:green;

//这一句代码写出来时,你用Firefox浏览,会发现背景是橙色的,而IE里却是绿色的,很简单,因为Firefox不能识别*,而IE6,IE7都可以识*

写三句代码来控制一个属性,区别Firefox,IE7,IE6:

background:orange;*background:green !important;*background:blue;

//这一句会使在Firefox在,背景呈橙色,IE7中为绿色,IE6中为蓝色,道理和前面一样,Firefox不能识别*,所以后面两句都不执行,直接执行第一句,IE7当然也能执行第一行代码,但是因为第二句,他也能识别,所以就执行了第二句代码,把前面的效果给过滤了,而最后一句,IE7是不能识别的。IE6不能识别!imprtant,本来运行了第一句代码了,第二句不能识别,那就理所当然的执行了最后一句。

以上HACK用法,可以实现不同浏览器的CSS代码,但是却不能通过CSS代码验证工具的验证!其实通不通过都无所谓,主要是实用,至少我是这样认为。如果你想要写能通过验证的HACK。那么请继续往下看第二种方案。

附加一個頹廢的剌猥發現的HACK,就是在IE6,還能識別全角的字符,IE7不行,這個也可以利用。在百度空間中,這個方法在2007-04-29日,還沒被過濾!

--------------------------------经典方案二------------------------------------

下面介绍用* html,* +html的hack写法,此方法可以通过CSS验证,也比较规范。哈哈,HACK本来是不归范的产物,只是我个人认为这种Hack写法是Hack写法中的规范而已,不要拿东西砸我!!!

我写一个例子

#sample {background:red;}

* html #sample {backgroud:green;}

* +html #sample{backgroud:blue}

在DW中建立一个sample层,写入以上代码,运行一下看看,你会在Firefox或是Netscape或Opera中看到,sample的背景色是红色的。在IE6中看到背景色是绿色的,而在IE7中却是蓝色的。好玩吧~

同样,你也可以应用到class和body中去,一样的道理,三个写法:

第一个是标准写法,针对所有浏览器都有效,但是一样的CSS在不同的浏览器中会变形,这个道理你明白吧,要不然你也不会来看我这篇文章了。Firefox,Oprea等非IE浏览器,不识别下面两种写法,所以理所当然的执行了第一种CSS代码,为红色背景。

第二个是只针对IE6,只有IE6会执行,其它浏览器都不执行。那么Firefox,IE7都不会读到这里的代码,IE6本来第一种是能执行的,可是因为第二种能识别,所以过滤了第一种的红色效果,变成了绿色背景。

第三个只针对IE7,只有IE7才能执行。IE6,firefox都不识别,当然只有IE7自己执行啦,同样的道理,能执行第一种,变成红色,可又被第三种过滤成蓝色背景。

---------------------------------第三种方案(强力推荐)--------------------------------

这里先说声不好意思,第三种方案不是用HACK,哈哈,但是绝对是最好用的。

第一种或是第二种方案,写出来的CSS文件代码长的很,特别是第二种,这样载入CSS时,会很缓慢,对网站设计没有好处。如果你做的是比较大的网站,还是建议你用下面这种方法,就是通过javascript判断浏览器的类型,然后针对不同的浏览器链接不同的CSS文件。

我们针对不同的浏览器开发出不同的CSS文件,一个针对IE,一个针对Firefox,一个针对其它所有类型的浏览。这样,我们在设计时,就不用去考虑太多,只要我这个CSS能在FF中正常显示,我就不管IE下执行下怎么样了,同样IE中正常的CSS,也不去管它在FF中会是显示如何的乱。

首先,我们在HTML代码里要放入<link></link>标签,标签里先写入默认要用到的CSS文件的位置,建议放IE中用到的CSS文件,比如<link href="../css/ie.css" rel="stylesheet" type="text/css">,这样能避免在对方浏览器没有开启javascript的时候,无法判断浏览器类型的时候,也能以90%以上人使用的IE正常显示。

把下面这段JS放在HEAD中<div>

<div><SCRIPT LANGUAGE="JavaScript">
<!--

if (window.navigator.userAgent.indexOf("MSIE")>=1)

{

//如果浏览器为IE,调用../css/ie.css

setActiveStyleSheet("ie.css");

}else{

if (window.navigator.userAgent.indexOf("Firefox")>=1)

{

//如果浏览器为Firefox,调用../css/firefox.css

setActiveStyleSheet("firefox.css");

}else{

//如果浏览器为其他,调用../css/other.css

setActiveStyleSheet("other.css");

}

}



function setActiveStyleSheet(title){

        document.getElementsByTagName("link")[0].href="../css/"+title; </div><div></div><div>//document.getElementsByTagName("link")[0].href="/blog/css/"+title; 这一行中的0是指第一个名为<link>的标签,改为1,则表示第二个名为<link>的标签。href=“”里面就是放置CSS文件的路径,而title就是CSS文件的文件名

}

//-->

</SCRIPT></div>

</div>
window.navigator.userAgent.indexOf后面是浏览器的类型,如果是Opera的话,还可以加一条if来判断,用javascript 的条件判断去写吧,我这里不多说了。

放好你的CSS的位置,试一下看看,是不是不同的浏览器分别调用了不同的CSS文件啊。爽!

好了,到这里,相信你明白第三种方案的好处了吧。我喜欢最后这一种多一点。其实第三种方法还能更进一步的设计,比如我,这次做的网站,只实现在IE6和IE7中正常浏览,其它的,我可不管,不要骂我支撑了MS的霸权,但是人家公司啊,会去看他们网站的,都是一般客户,一般客户都是用IE的,我们技术人员才会用Firefox,Opera。

------------------------------一些HACK的收集--------------------------------------

哈哈,看完文章了吧,这里就给一些链接吧,如果你不满足以上的方法,或是你别有他用!请点下面的链接!

CSS Hack的资料收集,先放几个,累了,以后有时间再放一些上来吧。

http://www.b2mx.com/article.asp?id=77

http://hi.baidu.com/7tianle/blog/item/b7132a95a7726c097bf48045.html

http://hi.baidu.com/iamsky/blog/item/74ab2a34603d6b3a5ab5f54d.html< page import="java.io.*,org.apache.poi.hssf.usermodel.*" >

< P>

     HSSFWorkbook workbook = new HSSFWorkbook();   //创建新的Excel工作薄

     HSSFSheet sheet = workbook.createSheet("JSP");   //在Excel工作薄中建工作表,名为缺省

     HSSFRow row = sheet.createRow((short)0); //在索引0的位置建行(最顶端的行)

    

     HSSFCell cell = row.createCell((short)0); //在索引0的位置建单元格

     cell.setEncoding(HSSFCell.ENCODING_UTF_16); //定义单元格为字符串类型

     cell.setCellValue("作者"); //在单元格输入一些内容

     cell = row.createCell((short)1);

     cell.setEncoding(HSSFCell.ENCODING_UTF_16); //定义单元格为字符串类型

     cell.setCellValue("编辑");  //在单元格输入一些内容

    

     row = sheet.createRow((short)1); //在索引1的位置创建行(最顶端的行)

     cell = row.createCell((short)0); //在索引0的位置创建单元格(左上端)

     cell.setEncoding(HSSFCell.ENCODING_UTF_16); //定义单元格为字符串类型

     cell.setCellValue("张三"); //在单元格输入一些内容

     cell=row.createCell((short)1);&nb

cell.setEncoding(HSSFCell.ENCODING_UTF_16); //定义单元格为字符串类型

      cell.setCellValue("李四");

     

      String filename = application.getRealPath("/") + "text.xls";  //filename是工作薄的存放位置,存放在当前应用程序的根目录下

      FileOutputStream fOut = new FileOutputStream(filename); //新建输出文件流

      workbook.write(fOut); //把相应的Excel工作薄存盘

      fOut.flush();

      fOut.close(); //操作结束,关闭文件

      out.println("excel文件已经生成,存放在

" + filename);

%<< page import="java.io.*,org.apache.poi.hssf.usermodel.*" >

< P>

     HSSFWorkbook workbook = new HSSFWorkbook();   //创建新的Excel工作薄

     HSSFSheet sheet = workbook.createSheet("JSP");   //在Excel工作薄中建工作表,名为缺省

     HSSFRow row = sheet.createRow((short)0); //在索引0的位置建行(最顶端的行)

    

     HSSFCell cell = row.createCell((short)0); //在索引0的位置建单元格

     cell.setEncoding(HSSFCell.ENCODING_UTF_16); //定义单元格为字符串类型

     cell.setCellValue("作者"); //在单元格输入一些内容

     cell = row.createCell((short)1);

     cell.setEncoding(HSSFCell.ENCODING_UTF_16); //定义单元格为字符串类型

     cell.setCellValue("编辑");  //在单元格输入一些内容

    

     row = sheet.createRow((short)1); //在索引1的位置创建行(最顶端的行)

     cell = row.createCell((short)0); //在索引0的位置创建单元格(左上端)

     cell.setEncoding(HSSFCell.ENCODING_UTF_16); //定义单元格为字符串类型

     cell.setCellValue("张三"); //在单元格输入一些内容

     cell=row.createCell((short)1);&nb

cell.setEncoding(HSSFCell.ENCODING_UTF_16); //定义单元格为字符串类型

      cell.setCellValue("李四");

     

      String filename = application.getRealPath("/") + "text.xls";  //filename是工作薄的存放位置,存放在当前应用程序的根目录下

      FileOutputStream fOut = new FileOutputStream(filename); //新建输出文件流

      workbook.write(fOut); //把相应的Excel工作薄存盘

      fOut.flush();

      fOut.close(); //操作结束,关闭文件

      out.println("excel文件已经生成,存放在
" + filename);

%<
分享到:
评论

相关推荐

    CSS兼容大全IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari等浏览器

    CSS 兼容大全是指在不同的浏览器中,例如 IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari 等,如何使网页正常显示的技术。这个技术的核心是 CSS Hack,即针对不同的浏览器写不同的 CSS 代码,使得网页在不同的浏览器中都能...

    IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例

    尤其是在处理旧版Internet Explorer(如IE6、IE7、IE8)与现代浏览器(如Firefox、Chrome等)之间的样式差异时,CSS Hack技巧成为了必不可少的工具。本文将深入探讨不同浏览器兼容性的CSS Hack代码及其实例,帮助...

    针对firefox ie6 ie7 ie8的css样式hack

    在进行Web开发的过程中,我们经常会遇到浏览器兼容性问题,尤其是早期的Internet Explorer(IE)版本如IE6、IE7和IE8与现代浏览器如Firefox之间的差异。为了确保网站能够在不同浏览器下正常显示,开发者需要使用特定...

    CSS HACK 兼容列表 Firefox,IE5,IE5.5,IE6,IE7,IE8.rar

    这份名为“CSS HACK 兼容列表 Firefox,IE5,IE5.5,IE6,IE7,IE8.rar”的压缩包,提供了针对这些浏览器的CSS Hack解决方案,以确保在不同环境下页面的正常显示。 CSS Hack通常指的是利用浏览器解析CSS的bug或者特性,...

    区别不同浏览器CSS hack

    在Web开发过程中,由于不同浏览器对CSS的支持程度不一,导致同一段CSS代码在不同的浏览器中可能呈现出不同的效果。为了确保网页能在各种浏览器中正常显示,开发者们创造了一种特殊的技术——CSS Hack。CSS Hack是一...

    如何让div+css兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器.docx

    让 Div+CSS 兼容 IE6 IE7 IE8 IE9 和 FireFox Chrome 等浏览器 在前端开发中,让 Div+CSS 兼容不同的浏览器是一个很大的挑战。不同的浏览器有不同的渲染引擎和CSS解析规则,导致了同一份CSS代码在不同的浏览器中...

    css解决IE6,IE7,firefox兼容性问题.

    ### CSS解决IE6、IE7及Firefox兼容性问题详解 #### 一、引言 随着互联网技术的发展,浏览器种类日益增多,其中Internet Explorer (IE) 和 Firefox 是早期非常流行的两款浏览器。尤其在2000年代中期,IE6、IE7 和 ...

    CSS hack 针对IE6,IE7,firefox显示不同效果

    针对IE6、IE7和Firefox显示不同效果的CSS hack是前端开发中常见的需求,特别是在使用CSS+DIV布局时。本文将详细讲解如何使用CSS hack来区分这三种浏览器,并提供一些实用的技巧和方法。 首先,我们需要了解IE6、IE7...

    div+css兼容ie6ie7ie8ie9和FireFoxChrome等浏览器方法[借鉴].pdf

    本文将深入探讨如何使CSS样式兼容IE6、IE7、IE8、IE9以及Firefox、Chrome等现代浏览器。 1. **DOCTYPE声明的影响**: DOCTYPE声明对于浏览器的渲染模式至关重要。在HTML文档的顶部加入正确的DOCTYPE,如`&lt;!DOCTYPE...

    IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

    "IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表" 提供了一个宝贵的资源,帮助开发者解决在不同浏览器之间存在的CSS样式差异。下面我们将深入探讨这个话题,了解各种CSS hack及其在这些浏览器中的表现。 ...

    CSS在IE6, IE7, IE8, Firefox中的特定使用(Hack).

    标题与描述中所提及的知识点聚焦于CSS在不同浏览器(尤其是IE6, IE7, IE8及Firefox)中的兼容性问题及其解决方案——即所谓的“Hack”技术。在Web开发领域,由于不同浏览器对CSS的支持程度和解析方式存在差异,...

    ie6、ie7、ie8、ie9、ie10、firefox、google chrome浏览器Hack及兼容性演示页面

    这里我们将深入探讨标题中提到的`ie6`到`ie10`以及`Firefox`和`Google Chrome`浏览器的兼容性问题,以及它们所基于的`Gecko`和`WebKit`内核。 首先,`IE6`至`IE10`是微软公司推出的一系列Internet Explorer浏览器,...

    CSS兼容IE6,,IE7,I8 FIREFOX

    本文将详细解析如何通过CSS技巧来解决跨浏览器兼容性问题,特别是针对IE6、IE7、8以及Firefox等浏览器的兼容性处理方法。 #### 二、CSS Hack概述 **CSS Hack**是一种特定的技术手段,用于编写能够被某些特定浏览器...

    IE6.0、IE7.0 与FireFox CSS兼容的解决方法

    在网页设计中,CSS(层叠样式表)的兼容性问题常常困扰着开发者,尤其是在处理IE6.0、IE7.0与Firefox等不同浏览器之间的差异。以下是一些解决这些浏览器间CSS兼容问题的方法: 1. **DOCTYPE声明**:DOCTYPE声明会...

    css区别IE和非IE浏览器

    不同浏览器对CSS的支持程度各不相同,特别是Internet Explorer(IE)系列浏览器与其他现代浏览器(如Firefox、Chrome等)之间存在较大的差异。本文将详细介绍如何通过CSS技巧来实现对IE浏览器和其他非IE浏览器之间的...

    CSS样式兼容IE6、IE7、IE8、FF火狐浏览器的方法

    在探讨CSS样式兼容IE6、IE7、IE8与火狐浏览器的方法时,我们需深入理解不同浏览器对CSS的支持差异,以及如何通过特定的技术手段确保网页在这些浏览器中的一致性和美观性。以下是对这一主题的详细解析: ### 1. 了解...

    简单CSShack:区分IE6、IE7、IE8、Firefox、Opera().pdf

    在《简单CSShack:区分IE6、IE7、IE8、Firefox、Opera》中,作者介绍了两种主要的方法来针对这些浏览器进行CSS样式区分。 方法一主要依赖于特殊的CSS选择器来区分浏览器。以下是对四种特殊符号的测试结果: 1. `&gt;`...

    CSS Hack 浏览器兼容文档

    本篇文章主要探讨了针对IE6、IE7、IE8、IE9以及Firefox(FF)的CSS Hack方法。 1. **CSS Hack原理**: 不同的浏览器对某些CSS特性或者字符的识别有所不同。例如,星号(*)在IE6和IE7中被识别为一个选择器前缀,但...

    css_hack csshack技术

    - **`*` (星号)**:星号Hack主要用于向IE6和IE7提供样式,而其他浏览器则不会受到影响。例如,`*margin: 10px;` 只会在IE6和IE7中生效。 - **`_` (下划线)**:下划线Hack同样用于向IE6提供样式。例如,`_border: 1...

    css样式表兼容总结,兼容火狐,ie6,ie7,FF

    标题中的“css样式表兼容总结,兼容火狐,ie6,ie7,FF”指的是在网页设计中,CSS样式表需要处理不同浏览器之间的兼容性问题,特别是老版本的Internet Explorer(IE6和IE7)以及Firefox。描述中的“css样式表火狐,ie6,ie...

Global site tag (gtag.js) - Google Analytics