Chinaunix首页 | 论坛 | 博客
  • 博客访问: 839197
  • 博文数量: 117
  • 博客积分: 2595
  • 博客等级: 少校
  • 技术积分: 1204
  • 用 户 组: 普通用户
  • 注册时间: 2009-09-18 18:16
文章分类

全部博文(117)

文章存档

2013年(1)

2012年(2)

2011年(18)

2010年(95)

2009年(1)

分类: 系统运维

2010-12-21 23:18:39

IE的盒模型  和W3C标准不一样.

IE6的盒模型的width 和height包括了 pading 和 border所以在FF或chrome下显示不正确
所以在css中应该使用 !important 这句,这样ff可以使用,ie会忽略.

IE盒子模型和标准W3C盒子模型




IE9遵循标准期待,下面是另外一个转载的内容

IE、Firefox对CSS处理或兼容问题整理



整理一:

1.DOCTYPE 影响 css 处理(Why?有点不明白

2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行(为什么,需要寻求解答并整理

3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中(指的div居中还是里面的文字居中?需要测试)。

4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式,值得注意的是,一定要将xxxx !important 这句放置在另一句之上。

注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:

1div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;

6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是需要要控制内容不要换行(需注意,曾调网页时遇到)。

7.cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以

8.FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

9.在firefox和IE中的BOX模型解释不一致导致相差2px解决方法:div{margin:30px!important;margin:28px;}(firefox和IE是如何解释盒子模型的?需要查资料并将其整理

10.IE5 和IE6的BOX解释不一致

IE5下div{width:300px;margin:0 10px 0 10px;}

div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改

1div{
2     width:300px!important;
3     width /**/:340px;
4     margin:0 10px 0 10px;
5}

关于这个/**/是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:)

11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。所以先定义ul{margin:0;padding:0;}就能解决大部分问题。

整理二:关于IE的box-model(未完全熟悉)

     IE box-model这个臭名昭著的bug存在于IE6/Win以前的每一只版本,这个虫子直到tantak发布了流传最为广泛的那个hack才开始被驯服()

     IE5.X/win对box-model的解析是一样的,他们认为width包括了边框(border)和补白(padding),幸运的是这个情况在IE6中有了好转,但是IE6在向后兼容的同时也包容了以前的错误,IE6其实有两个核心,在旧的页面前他仍旧表现出对错误的宽容,只有在文档中严格地加上文档类型(DOCTYPE)声明,IE6才能够接受正确的box-model 
所以,tantak的hack必须和正确的DOCTYPE同时包含在文档中才能够正常工作。 
Quote 
div.content { 
width:400px; //这个是错误的width,所有浏览器都读到了 
voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容 
voice-family:inherit; 
width:300px; //包括IE6/win在内的部分浏览器读到这句,新的数值(300px)覆盖掉了旧的 

html>body .content { //html>body是CSS2的写法 
width:300px; //支持CSS2该写法的浏览器有幸读到了这一句 

     现在回到主题,我们经常看到!important和(空格)/**/:组合在一起使用,这个写法有什么奥妙呢?

看刚才那个写法,我这里可以提供另一种写法也能达到这样的效果 
Quote 
div.content { 
width:300px !important; //这个是正确的width,大部分支持!important标记的浏览器使用这里的数值 
width(空格)/**/:400px; //IE6/win不解析这句,所以IE6/win仍然认为width的值是300px;而IE5.X/win读到这句,新的数值(400px)覆盖掉了旧的,因为!important标记对他们不起作用 

html>body .content { //html>body是CSS2的写法 
width:300px; //支持CSS2该写法的浏览器有幸读到了这一句 

同样,这个方法仍必须依靠正确的文档类型声明才能够正常工作,原因在前面已经说过。

文档类型声明就像一个开关,打开向后兼容的未来,而错误使用的话,就是一个Pandora box

整理三:关于IE7.0的改进(未经验证)

     ie7.0的面世,尚且不论他是否较之ie6.0进步, ie7和ie6 之间不兼容,毫无疑问又引入了新的痛处,至少在调试的过程中,又多了一道程序以及随之而来的大量不兼容。

据ie7.0官方解说:

     ie7.0在IE6的基础上引入了strict模式,包含了许多有关于层叠样式表(CSS)解析与呈现的改进(何为strict模式?)。这些改进意在提高Internet Explorer解释层叠样式表的一致性,以达到W3C的推荐的标准,同时为开发者提供一个可以依赖的功能集合。

     在设计网页的时候,在解决好ie6.0与火狐的兼容问题的同时,我们是更多的服从符合W3C一些的ie7.0,还是对96%的ie6.0妥协?这个问题其实有些多余,我们能做的,或许只有选择中庸,只有尽量调试到各个浏览器都显示正常吧。

      ie7.0与ie6.0的之间不兼容,目前就我知道的有如下几个方面,如有遗漏或者说错了的地方,欢迎在后面补充或者纠正。

1. ie7,ie6 div+css出现宽度定义不同 
在宽度定义上出现宽度的解释不同,IE7宽度在IE6上要宽一些(宽多少?)。正是这个原因网页可能会出现溢出问题, 还好这个问题可以通过更改数值或者修改一下百分比解决.

2. ie7.0修复了!important这个bug。 
先前由于ie6.0对!important识别存在bug, 在firefox和IE中的BOX模型解释不一致导致相差2px,大部分网页标准设计师通过这个bug来兼容ie6.0和firefox,即采用:div {margin:30px!important;margin:28px;}。但是ie7.0把这个bug给修复了,所以问题又出现了,怎么兼容 ie.7.0的同时又能兼容ie6.0和firefox?

3. Box Model的改变 
在IE7中,为了适应CSS2.1 box model修改了溢出的行为。

4. ie7.0中一些CSS filter将不再可用 
IE7中修改了许多潜在解析错误,这些可能会阻止filter在以前的IE版本中正常工作。如:*HTML filter,下划线filter和/**/注释filter等等。

5. ie7.0对很多不规范的css不再支持,对js语法要求更严格规范。 
很多在IE6下正常显示的js页面,在IE7下均不能正常显示,并且还没有提示错误。ie7.0对js语法要求更严格规范,只是这个规范似乎并没有说明,也没有明白的告诉大家,他们是怎么“规”怎么“范”的。

整理四:网页制定CSS的注意事项(未经试验) 

1、float的div一定要闭合。

例如:(其中floatA、floatB的属性已经设置为float:left;)

< #div id=”floatA” > 
< #div id=”floatB” > 
< #div id=”NOTfloatC” >

这里的NOTfloatC并不希望继续平移,而是希望往下排。 
这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。 

< #div class=”floatB”> 
< #div class=”NOTfloatC”>

之间加上

< #div class=”clear”>

这个div一定要注意声明位置,一定要放在最恰当的地方,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。 
并且将clear这种样式定义为为如下即可:

.clear{ 
clear:both;}

此外,为了让高度能自动适应,要在wrapper里面加上overflow:hidden; 
当包含float box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。
例如某一个wrapper如下定义:

.colwrapper{ 
overflow:hidden; 
zoom:1; 
margin:5px auto;}

2、margin加倍的问题。

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 
解决方案是在这个div里面加上display:inline; 
例如:

< #div id=”imfloat”>

相应的CSS为

#IamFloat{ 
float:left; 
margin:5px;/*IE下理解为10px*/ 
display:inline;/*IE下再理解为5px*/}

3、关于容器的包涵关系

很多时候,尤其是容器内有平行布局,例如两、三个float的时,宽度很容易出现问题。在IE中,外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。

4、关于高度的问题

如果是动态地添加内容,高度最好不要定义。浏览器可以自动伸缩,然而如果是静态的 内容,高度最好定好。(似乎有时候不会自动往下撑开,不知道具体怎么回事)

5、最狠的手段 - !important;

如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下

.tabd1{ 
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/ 
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}

值得注意的是,一定要将xxxx !important 这句放置在另一句之上,上面已经提过。

其他: 
注:IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*;IE6能识别*,但不能识别 !important,IE7能识别*,也能识别!important;FF不能识别*,但能识别!important;

写两句代码来控制一个属性,区别Firefox与IE6: 
background:orange;*background:blue;

//这一句代码写出来时,你用firefox或其它非IE浏览时,会发现,写了该代码的区域背景是橙色的,如果用IE浏览,却是蓝色的,这是因为IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*;

写两句代码来控制一个属性,区别IE7与IE6: 
background:green !important;background:blue;

//这一句代码写出来时,你用IE7浏览,会发现,写了该代码的区域背景是绿色的,如果用IE6浏览,却是蓝色的,这是因为IE7能识别!important*,一但识别了,就执行,忽略了后面的那一句,但IE6却不能识别!important,所以前面部分跳过,直接执行了后半部份。

写两句代码来控制一个属性,区别Firefox与IE: 
background:orange; *background:green;

//这一句代码写出来时,你用Firefox浏览,会发现背景是橙色的,而IE里却是绿色的,很简单,因为Firefox不能识别*,而IE6,IE7都可以识*

写三句代码来控制一个属性,区别Firefox,IE7,IE6: 
background:orange;*background:green !important;*background:blue;

//这一句会使在Firefox在,背景呈橙色,IE7中为绿色,IE6中为蓝色,道理和前面一样,Firefox不能识别*,所以后面两句都不执行,直接执行第一句,IE7当然也能执行第一行代码,但是因为第二句,他也能识别,所以就执行了第二句代码,把前面的 @#效果给过滤了,而最后一句,IE7是不能识别的。IE6不能识别!imprtant,本来运行了第一句代码了,第二句不能识别,那就理所当然的执行了最后一句。

整理五:制作网页写CSS时参考的内容

1、有疑问,先验证,再调试。 
     先对您的代码进行验证往往能省去不少麻烦事。格式不正确的/CSS 会导致许多布局上的错误。 
     在其他浏览器中进行测试之前,请先在最先进的浏览器中撰写和测试CSS代码,而不是相反。 
     如果您在破旧的浏览器中编写和测试,你的代码就不得不依赖那个破旧浏览器的糟糕的显示,然后在符合标准的浏览器中进行测试,看到显示结果“不正常” 时,你会很沮丧的。相反,您应该先将您的代码完善,然后再设法为较低级的浏览器打算。这样从一开始您的代码就是符合标准的,你不必再为支持其他浏览器而劳心费神。当然了,目前遵从标准的浏览器无疑就是 Mozilla, Safari 或 Opera。

2、确保你期望的效果确实 

     许多特定的浏览器专有的CSS扩展在正式标准中并不存在。 如果您对 filter(滤镜)或滚动条指定了样式,那么您就用了私有代码,除了IE之外,在别的浏览器中毫无作用。如果验证器告诉您代码没有定义,极有可能您用了私有样式,这样在不同的浏览器中很难达到一致的效果。 
     如果布局中一定要用浮动对象,别忘了适时使用清除(clear)属性。 
     浮动对象似易实难,而且不总是令人如愿以偿。如果您发现浮动对象伸出了容器的边界,或者不像您所期望的那样显示,请检查您的期望是否正确。关于这个问题请看Eric Meyer的教程 
     边距的合并:可用padding 或 border 来避免。 
     您可能被多余的(或者想要却不出现的)空白搞得焦头烂额。如果您用了 margins,边距的合并可能就是问题的根源。 Andy Budd 对此的解释可能为你解惑。 
     避免将 padding/border 和固定宽度同时应用到同一元素。 
     IE5 的区块模型是错误的,是它把事情办坏了。对此也有权宜之计,不过最好是绕过这个问题,当子元素的宽度固定时,为父元素指定padding。

3、避免IE下未指定样式内容的闪烁。 
如果仅使用@import来输入外部样式表,早晚会发现IE有闪烁的毛病。应用css之前,未经格式化的HTML文本会短暂的出现。这是可以避免的。

4、可怜的min-width IE不支持它,但是它将 width 当作 min-width。所以通过一些IE的过滤技巧(filtering),可以实现同样的最终效果。 
     把CSS过滤器(filters)当作最后的手段 
     CSS 技巧和过滤器可以使您有选择地应用到(或者不应用到)某些元素。应当尽可能地找到标准的跨浏览器的解决办法来实现您想要的效果,而不是动不动就使用过滤器。要将它当成走投无路时的救命手段。在这里可以找到大量的CSS 过滤技巧。[译注:不要把这里的filters和IE中的滤镜混淆。由于各个浏览器对CSS标准的支持程度不一,人们找到了许多技巧,将浏览器无法解释或错误解释的样式表或规则屏蔽掉。这就是所谓的CSS过滤器或技巧。webjx.com

5、如果使用了锚点,在应用超链接样式时要特别小心。 
     如果您在代码中使用了传统的锚点(),您会注意到 :hover 和 :active伪类也会作用于它。要避免这种情形,你可以使用 id,或者使用鲜为人知的语法: :link:hover, :link:active

6、记住“LoVe/HAte”链接规则 
     “LoVe/HAte”(爱/恨)链接规则要以下面的顺序指定超链接伪类:Link, Visited, Hover, Acitve.任何其他顺序都不妥当。假如用了 :focus,次序应为 LVHFA(“Lord Vader‘s Handle Formerly Anakin”,Matt Haughey这样建议)。 
请记住“TRouBLED”(麻烦的)边框。 
边框(border)、边距(margin)和补白(padding)的简写次序为:顺时针方向从上开始,即 Top, Right, Bottom, Left。比如 margin: 0 1px 3px 5px;表示上边距为零,右边距为1px,依此类推。

7、非零值要指明单位。 
     在用CSS指定字体、边距或大小时,必须指明所用的单位。某些浏览器对未指明单位的处理方法不足为凭。零就是零,不管是 px还是em还是其他单位,它不需要单位。例如: padding: 0 2px 0 1em;

8、测试不同的字体大小。 
     像Mozilla和Opera这样的高级浏览器允许对字体进行缩放,不管你用的是什么单位。某些用户的默认字体大小肯定和您的不同,尽最大努力去满足他们。 
     用嵌入式测试,发布时改为输入。 
     将样式表嵌入在你的HTML源代码中,在测试时可以消除许多缓存引起的错误,尤其是某些Mac下的浏览器。但在发布前,一定要记住将样式表移到外部文件,用 @import 或 引入。(这个有点不懂为什么?

9、加上明显的边框有利于布局调试。 
     像div {border: solid 1px #f00;} 之类的全局规则可以暂时为你查出布局问题。为特定的元素加上边框可帮您找到难以发觉的交错或空白问题。 
     对图片路径不要用单引号。 
     当设置背景图片时,要坚持用双引号。尽管看起来有些多余,但是如果不这么做,IE5/Mac会噎住。 
     不要为将来的样式表(比如手持式设备或打印用样式表)留个“空位”。 
     Mac IE5 对空的样式表比较感冒,会增加页面的装入时间。建议样式表中至少应该有一条规则(哪怕是注释也好),免得 MacIE噎住。  
     另外值得一提的还有一些虽然不针对某些功能,但是在开发过程中应当注意的理论

10、好好组织您的CSS文件 
     恰当地成块注释CSS,将相似的CSS选择符编为一组,养成一致的命名习惯和空白格式(为跨平台考虑,建议用空白字符而不是tab)以及适当的次序。 
     以功能(而不是外观)为类和ID命名。 
     假如您创建了一个 .smallblue 类,后来打算将文字改大,颜色变为红色,这个类名就不再有任何意义了。相反,您可以用更有描述性的名字如 .copyright 和 .pullquote。

11、组合选择符 
     保持CSS短小对减少下载时间非常重要。请尽量为选择符分组、 利用继承(inheritance)以及使用简写(shorthand)来减少冗余。 
     使用图片替换技术时要考虑亲和力(SFIR,不常用,用图片替换文字的技术) 
     已经发现传统的FIR在屏幕阅读器,以及关闭图片显示[的浏览器]中会出问题。 对此有其他解决办法,要根据具体情况,慎重使用。

阅读(2876) | 评论(0) | 转发(0) |
0

上一篇:我的GoogleBuzz

下一篇:XP开启PAE 小软件

给主人留下些什么吧!~~