IE 和 FF 写不同的CSS
或许你一直在抱怨为什么要专门为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的更多相关文章
- 利用IE/FF的不同识别CSS来使用浏览器兼容问题
区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue ...
- 我们平时是怎么写html和css的？
文章的起因,我只是为了回复一个帖子,http://bbs.csdn.net/topics/390908928?page=1 结果,一扯就根本停不下来.索性,一捅为快,反正是周末. 拿到效果图时,有这么 ...
- 如何根据不同的浏览器写不同的css样式达到兼容
做前端静态页面的时候总是发现,ie的兼容性很差,总会出点问题.然后就去改代码 ,改完以后 又发现 火狐 谷歌又挂了,这可咋整. 后来发现做个判断吧 哪里有问题哪里就做个判断呗 ,咋判断呢,这么 ...
- 写给初学者css优先级问题
首先需要搞清楚几个基本概念 1.内嵌样式: 写在元素标签内的例如:<div style="background-color:red"> </div> 2.内 ...
- 1.写页面 2.css的继承属性有哪些 3.margin对布局的影响
1. sparent 透明的 2. placeholder 提示语 写页面 1.搞清结构层次 2. 保证模块化 让它们之间不能收到影响. (1) 元素性质 (2)标准流 浮动带来的脱离文档流撑不起父级 ...
- 学写网页 #05# CSS Mastery 笔记 1~3
看到第四章才发现这本书已经太旧了..看到第 3 章为止吧.前三章主要讲的内容:一些编码常识.怎样选择元素.盒子模型(主要是 Margin).定位(绝对.相对.浮动.fixed 等) 第一章 conve ...
- 之前在不网站看到过关于css的一些例子 今天自己也写了一个css特效
下面是代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
- JQ 特效下拉列表 写出与css一样的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 在 Less 中写 IE 的css hack
Less中直接在属性后面加hack写法会编译报错的.那么怎么解决呢? 第一种方式: IE7 以display:inline-block为例: less的hack写法: .box{ display: i ...
随机推荐
- luci-bwc
文件位于: ../feeds/luci/modules/admin-full/src/luci-bwc.c 功能: Very simple bandwidth collector cache fo ...
- linux 移除svn文件夹
find . -name .svn -type d -exec rm -fr {} \;
- C# 编辑距离实现
/// <summary> /// 计算 /// </summary> /// <param name="str1"></param> ...
- iOS10访问用户权限的描述key值汇总
https://developer.apple.com/library/content/documentation/General/Reference/InfoPlistKeyReference/Ar ...
- k近邻算法
k 近邻算法是一种基本分类与回归方法.我现在只是想讨论分类问题中的k近邻法.k近邻算法的输入为实例的特征向量,对应于特征空间的点,输出的为实例的类别.k邻近法假设给定一个训练数据集,其中实例类别已定. ...
- 线程池Executors探究
线程池用到的类在java.util.concurrent包下,核心类是Executors,通过其不同的几个方法可产生不同的线程池. 1.生成固定大小的线程池 public static Executo ...
- 《JavaScript高级程序设计》读书笔记 ---基本概念小结
ECMAScript 中的基本数据类型包括Undefined.Null.Boolean.Number 和String. 与其他语言不同,ECMScript 没有为整数和浮点数值分别定义不同的数据 ...
- android常用工具类
import android.content.Context; import android.net.ConnectivityManager; import android.net.NetworkIn ...
- iOS自定制tabbar与系统的tabbar冲突,造成第一次点击各个item图片更换选中,第二次选中部分item图片不改变
可以选择是使用自定制的还是系统的,如果使用自定制的,就使用以下方法即可隐藏系统的uitabbarButton,从而使item恢复正确 //隐藏UITabBarButton -(void)viewWil ...
- MFC中修改默认启动对话框方法
// CMyAppEApp 初始化 BOOL CMyAppEApp::InitInstance(){// 如果一个运行在 Windows XP 上的应用程序清单指定要// 使用 ComCtl32.dl ...