或许你一直在抱怨为什么要专门为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. Chapter 16_1 Class

    一个类就是一个创建对象的模具.对于一些基于原型的语言,对象是没有“类型”的,而是每个对象都有一个原型(prototype). 原型也是一种常规的对象.当其他对象(类的实例)遇到一个未知操作时,原型会先 ...

  2. Objective-C中的instancetype与id的区别

    一.什么是instancetype instancetype是clang 3.5开始,clang提供的一个关键字,表示某个方法返回的未知类型的Objective-C对象.我们都知道未知类型的的对象可以 ...

  3. redis数据类型：Strings

    String是最简单的数据类型,一个key对应一个value,string类型是二进制安全的,redis的String可以包含任何数据, 比如jpg图片或者系列化的对象. Set方法: 设置key对应 ...

  4. 关于oracle数据库（2）

    数据备份.数据删除.数据还原 连接数据库,查看scott用户下面的所有表 数据备份(数据导出)要输入导出文件路径和文件名(文件扩展名可输入也可以不输入) 导出成功后,可以在上面输入的文件路径下面看到导 ...

  5. iOS SDWEBImage和collectionView的组合，以及collectionView的随意间距设置

    转载自:http://www.cnblogs.com/tmf-4838/p/5361271.html #import "ViewController.h" #import < ...

  6. HTML 概述

    一.hello world<!--根标签--><html> <!--头部--> <head> <!--标题标签--> <title&g ...

  7. 模仿QQ客户端和服务器（支持window和linux）

    界面部分我还没有想好,到底是用MFC还是duilib呢? 好吧我先发一个demo版本,功能都有,以下为功能展示. 先说服务器(这个有俩个版本,支持win和linux):用的数据库为MYsql(因为是便 ...

  8. iOS不可变字符串的所有操作

    可以直接复制代码即可运行看看结果,方便理解 //NSString //OC字符串不能用printf输出 //但是遗憾的是OC没有一个从终端读取数据的方式,需要使用scanf读取C字符串然后转换成OC的 ...

  9. keybd_event 对应表

    Option Explicit Private Declare Sub keybd_event Lib "user32" (ByVal bVk As Byte, ByVal bSc ...

  10. 如何在VBS脚本中显示“选择文件对话框”或“选择目录对话框”

    .选择文件[XP操作系统,不能用于Win2000或98],使用“UserAccounts.CommonDialog”对象向用户显示一个标准的“文件打开”对话框 Set objDialog = Crea ...