或许你一直在抱怨为什么要专门为IE和FF写不同的CSS，为什么IE这样让人头疼，然后一边写css，一边咒骂那个可恶的M$ IE.其实对于css的标准支持方面，IE并没有我们想象的那么可恶，关键在于IE和FF 的默认值不一样而已，掌握了这个技巧，你会发现写出兼容FF和IE的css并不是那么困难，或许对于简单的css，你完全可以不用”!important”这个东西了。 我们都知道，浏览器在显示网页的时候，都会根据网页的css样式表来决定如何显示，但是我们在样式表中未必会将所有的元素都进行了具体的描述，当然也没有必要那么做， 所以对于那些没有描述的属性，浏览器将采用内置默认的方式来进行显示，譬如文字，如果你没有在css中指定颜色，那么浏览器将采用黑色或者系统颜色来显示，div或者其他元素的背景，如果在css中没有被指定，浏览器则将其设置为白色或者透明，等等其他未定义的样 式均如此。所以有很多东西出现FF和IE显示不一样的根本原因在于它们的默认显示不一样，而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定，因此对于这点也就别去怪罪IE了。 . 为什么FF下文本无法撑开容器的高度标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的.那我又想固定高度,又想 能被撑开需要怎样设置呢？办法就是去掉height 设置min- height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:{ height:auto!important; height:200px; min-height:200px; } .FireFox 下如何使连续长字段自动换行 众所周知IE中直接使用word-wrap:break-word 就可以了, FF中我们使用JS插入的技巧来解决 <style type="text/css"> <!-- div { width:300px; word-wrap:break-word; border:1px solid red; } --> </style> <div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaa ＜ /div> <scrīpt type="text/javascrīpt"> function toBreakWord(el, intLen){ var ōbj=document.getElementByIdx_x_x(el); var strContent=obj.innerHTML; var strTemp=""; while(strContent.length>intLen){ strTemp+=strContent.substr(0,intLen)+" "; strContent=strContent.substr(intLen,strContent.length); } strTemp+=" "+strContent; obj.innerHTML=strTemp; } if(document.getElementByIdx_x_x && !document.all) toBreakWord("ff", 37); </scrīpt> 13. 为什么 IE6 下容器的宽度和 FF 解释不同？ 问题的差别在于容器的整体宽度有没有将 边框 （ border ） 的宽度算在其内 , 这里 IE6 解释 为 200PX , 而 FF 则解释为 220PX, 那究竟是怎么导致的问题呢？大家把容器顶部的 xml 去掉 就会发现原来问题出在这 , 顶部的申明触发了 IE 的 qurks mode 。 <?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- div { cursor:pointer; width:200px; height:200px; border:10px solid red } --> </style> <div ōnclick="alert(this.offsetWidth)"> 让 FireFox 与 IE 兼容＜ /div> IE7.0 对 CSS 的支持又有新问题，解决如下。 第一种， CSS HACK Bpx; _height:20px; 注意顺序。 下面这样也属于 div CSS HACK ，不过没有上面这样简洁。 #example { color: #333; } * html #example { color: #666; } *+html #example { color: #999; } 第二种，是使用 IE 专用的条件 CSS 注释 <!-- 其他浏览器 --> <link rel="stylesheet" type="text/css" href="css.css" /> <!--[if IE 7]> <!-- 适合于 IE7 --> <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]--> <!--[if lte IE 6]> <!-- 适合于 IE6 及一下 --> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]--> 第三种， css filter 的办法，以下是从国外网站翻译过来的。 新建一个 css 样式如下： #item { width: 200px; height: 200px; background: red; } 新建一个 div, 并使用前面定义的 css 的样式： <div id="item">some text here ＜ /div> 在 body 表现这里加入 lang 属性 , 中文为 zh ： <body lang="en"> 现在对 div 元素再定义一个样式： *:lang(en) #item{ background:green !important; } 这样做是为了用 !important 覆盖原来的 css 样式 , 由于 :lang CSS 选择器 ie7.0 并不支持 , 所 以对这句话不会有任何作用 , 于是也达到了 ie6.0 下同样的效果 , 但是很不幸地的是 ,safari 同 样不支持此属性 , 所以需要加入以下 css 样式： #item:empty { background: green !important } :empty 选择器为 css3 的规范 , 尽管 safari 并不支持此规范 , 但是还是会选择此元素 , 不管是 否此元素存在 , 现在绿色会现在在除 ie 各版本以外的浏览器上。 对 IE6 和 FF 的兼容可以考虑以前的 !important 个人比较喜欢用第一种，简洁，兼容性 比较好。

IE 和 FF 写不同的CSS的更多相关文章

  1. 利用IE/FF的不同识别CSS来使用浏览器兼容问题

    区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue ...

  2. 我们平时是怎么写html和css的？

    文章的起因,我只是为了回复一个帖子,http://bbs.csdn.net/topics/390908928?page=1 结果,一扯就根本停不下来.索性,一捅为快,反正是周末. 拿到效果图时,有这么 ...

  3. 如何根据不同的浏览器写不同的css样式达到兼容

    做前端静态页面的时候总是发现,ie的兼容性很差,总会出点问题.然后就去改代码 ,改完以后 又发现 火狐 谷歌又挂了,这可咋整.     后来发现做个判断吧 哪里有问题哪里就做个判断呗 ,咋判断呢,这么 ...

  4. 写给初学者css优先级问题

    首先需要搞清楚几个基本概念 1.内嵌样式: 写在元素标签内的例如:<div style="background-color:red"> </div> 2.内 ...

  5. 1.写页面 2.css的继承属性有哪些 3.margin对布局的影响

    1. sparent 透明的 2. placeholder 提示语 写页面 1.搞清结构层次 2. 保证模块化 让它们之间不能收到影响. (1) 元素性质 (2)标准流 浮动带来的脱离文档流撑不起父级 ...

  6. 学写网页 #05# CSS Mastery 笔记 1~3

    看到第四章才发现这本书已经太旧了..看到第 3 章为止吧.前三章主要讲的内容:一些编码常识.怎样选择元素.盒子模型(主要是 Margin).定位(绝对.相对.浮动.fixed 等) 第一章 conve ...

  7. 之前在不网站看到过关于css的一些例子 今天自己也写了一个css特效

    下面是代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  8. JQ 特效下拉列表 写出与css一样的效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 在 Less 中写 IE 的css hack

    Less中直接在属性后面加hack写法会编译报错的.那么怎么解决呢? 第一种方式: IE7 以display:inline-block为例: less的hack写法: .box{ display: i ...

随机推荐

  1. Java 泛型 Java使用泛型的意义

    Java 泛型 Java使用泛型的意义 @author ixenos 直接意义 在编译时保证类型安全 根本意义 a) 类型安全问题源自可复用性代码的设计,泛型保证了类型安全的复用模板 b) 使用复用性 ...

  2. JS 之设置元素样式的改变，可以利用样式框架

    如果已经将某个元素的样式设定好了,又想改变,可以利用样式框架: function setStyle(obj,attr,value){ obj.style[attr]=value;//注意此处attr的 ...

  3. LeetCode OJ 41. First Missing Positive

    Given an unsorted integer array, find the first missing positive integer. For example,Given [1,2,0]  ...

  4. Openjudge-计算概论（A）-球弹跳高度的计算

    描述: 一球从某一高度落下(整数,单位米),每次落地后反跳回原来高度的一半,再落下.编程计算气球在第10次落地时,共经过多少米? 第10次反弹多高?输入输入一个整数h,表示球的初始高度.输出输出包含两 ...

  5. mnesia

    1.模式创建 mnesia:create_schema([node()|nodes()]).集群的节点之间创建模式 2.启动和停止 application:start(mnesia). applica ...

  6. TakeColor 屏幕取色器 8.0 中文绿色版

    软件名称: TakeColor 屏幕取色器软件语言: 简体中文授权方式: 免费软件运行环境: Win8 / Win7 / Vista / WinXP软件大小: 210KB图片预览: 软件简介:使用方便 ...

  7. 【ADT】链表的基本C语言实现

    什么是抽象数据类型?首先,这一概念是软件开发人员在力求编写的代码健壮.易维护且可以复用的过程中产生的.英文是AbstractData Type.有人将其比作"抽象"的墙壁,&quo ...

  8. sqlserver 经典入门基础书籍

    1.SQLServer2005T-SQL数据库设计 作者:胡百敬等著 ISBN:10位［7121053632］13位［9787121053634］ 出版社:电子工业出版社 出版日期:2008-1-1 ...

  9. CentOS的KVM实践（虚拟机创建、网桥配置、Spice）

    最近公司准备上一套基于openstack的虚拟桌面系统,作为该项目的负责人,觉得有必要自己实践一下,该系统的搭建.最基础的就是需要了解基于linux的kvm的实践. 一.基础软件包准备 系统是采用px ...

  10. Strusts2--课程笔记4

    类型转换器: Struts2默认情况下可以将表单中输入的文本数据转换为相应的基本数据类型.这个功能的实现,主要是由于Struts2内置了类型转换器.这些转换器在struts-default.xml中可 ...