或许你一直在抱怨为什么要专门为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. php基本（四）表单验证

    本文内容来自http://www.w3school.com.cn/php/php_form_url_email.asp PHP 表单验证 - 验证 E-mail 和 URL 本节展示如何验证名字.电邮 ...

  2. JS的一些常见验证代码

    1//檢查空串  2function isEmpty(str){  3 if((str == null)||(str.length == 0)) return (true);  4 else retu ...

  3. 6、Web应用程序中的安全向量 -- customErrors（适当的错误报告和堆栈跟踪）

    几乎所有的网站在开发过程中都在web.config文件中设置了特性<customErrors mode="off">. customErrors模式有3个可选的设置项: ...

  4. .Net Core 学习资料

    官方网站:https://www.microsoft.com/net/core#windows   官方文档:https://docs.asp.net/en/latest/intro.html   中 ...

  5. java中的字符编码方式

    1. 问题由来 面试的时候被问到了各种编码方式的区别,结果一脸懵逼,这个地方集中学习一下. 2. 几种字符编码的方式 1. ASCII码 我们知道,在计算机内部,所有的信息最终都表示为一个二进制的字符 ...

  6. 2014web面试题

    面试题目会根据你的等级和职位变化,入门级到专家级:范围↑.深度↑.方向↑; 类型: 技术视野.项目细节.理论知识型题,算法题,开放性题,案例题. 进行追问,可以确保问到你开始不懂或者面试官开始不懂为止 ...

  7. CSS中background:url(图片) 不能显示的问题

    刚刚碰到一个奇怪的问题,这样一段CSS代码:   .pho6 { background: url(img/pho6.jpg);  } 这段代码居然不能显示出背景图片,路经绝对是没错的代码肯定没有问题, ...

  8. 【Machine Learning in Action --5】逻辑回归（LogisticRegression）从疝气病预测病马的死亡率

    背景:使用Logistic回归来预测患有疝气病的马的存活问题,这里的数据包括368个样本和28个特征,疝气病是描述马胃肠痛的术语,然而,这种病并不一定源自马的胃肠问题,其他问题也可能引发疝气病,该数据 ...

  9. Qt主窗体显示最前

    在delphi中使用Application.BringToFront;可以保证当前程序显示在最前. 然而今天在Qt中,没有类似函数供调用. 尝试了activeWindow,show,showNorma ...

  10. 利用xcopy命令实现本地文件复制到远程服务器的方法

    net use \\192.168.1.198\ipc$ Zqf198703 /user:royalpeak xcopy g:\backup\*.* \\192.168.1.198\数据备份 /D / ...