或许你一直在抱怨为什么要专门为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. Docker私有仓库2

    http://www.cnblogs.com/womars/p/5906410.html 接着上篇,上面为上篇地址. #通过docker tag将该镜像标志为要推送到私有仓库 [root@lh- ~] ...

  2. iOS相关教程

    Xcode Xcode 7中你一定要知道的炸裂调试神技 Xcode 6和Swift中应用程序的国际化和本地化 iOS新版本 兼容iOS 10 资料整理笔记 整理iOS9适配中出现的坑(图文) Swif ...

  3. 评测：VPS推荐digitalocean和Vultr和Linode

    美国vps推荐三家,分别是digitalocean.vultr和linode,拥有很高的性价比,中国访问速度快.我是上面三家的早期用户,并且一直使用至今,积累了不少使用经验. DigitalOcean ...

  4. IOS开发—UITableView重用机制的了解

    引言 对于一个UITableView而言,可能需要显示成百上千个Cell,如果每个cell都单独创建的话,会消耗很大的内存.为了避免这种情况,重用机制就诞生了. 假设某个UITableView有100 ...

  5. WCF证书创建方法

    A.创建证书: (1)将创建证书工具makecert.exe放到任意地方.可以把该文档中的makecert.exe工具复制粘贴到任意目录. (2)doc命令去到makecert.exe的路径,然后输入 ...

  6. Linux RSS/RPS/RFS/XPS对比

    RSS适合于多队列网卡,把不同的流分散的不同的网卡多列中,至于网卡队列由哪个cpu处理还需要绑定网卡队列中断与cpu RPS:适合于单队列网卡或者虚拟网卡,把该网卡上的数据流让多个cpu处理 RFS: ...

  7. sqlserver 按日、周、月统计方法

    摘自于网络网络:http://blog.csdn.net/wanmdb/article/details/8080636 create table T(日期时间 datetime, 数量 int) in ...

  8. Linux手动搭建LAMP环境

    当你看到标题里的“手动搭建”,你是不是会想,难不成还有“自动搭建”?当然......不是,这里的“手动搭建”是指按部就班的搭建Apache.MySQL.PHP环境,是相对于集成软件包而言的.所以你是不 ...

  9. 修改TFS与本地源代码映射路径

    使用源代码管理资源管理器修改工作区 在“文件”菜单上单击“源代码管理”,再单击“工作区”. 在“管理工作区”对话框的“名称”列下,突出显示要修改的工作区,然后单击“编辑”. 在“编辑工作区”对话框中: ...

  10. php pdo and pdostatement

    Relationship between PDO class and PDOStatement class   up vote2down votefavorite   I'm a php and my ...