程序员人生 网站导航

浅谈IE与Firefox对CSS的不同解析

栏目:htmlcss时间:2014-03-02 12:50:18
【建站学院文档】其实,以前从来没有接触过CSS相关的内容,都是在做业务的编程,从来没想过前台页面的设计也能如此复杂。这次项目的开过过程中,作为CSS菜鸟的我也接触到CSS的相关设计。所出现的低级问题和浪费很多时间的状况也层出不穷,所以通过各方搜索和自己的实际学习中总结出几点IE和Firefox对CSS的区别,给大家借鉴。

  首先,大家都知道,IE和Firefox针对于核模型的解析就不一样,自然会产生很多让人挠头的问题,以下就是我的经验总结:

  1.高度的区别

  IE:在没有定义高度时候,将根据内容高度的变化,包括未定义高度的图片内容;

   在定义了高度时候,当内容超过高度时,将使用实际内容的高度。

  FF:在没有定义高度时,如果内容中包括了图片内容,MF的高度解析是根据印刷标准,这样就会造成和实际内容高度不符合的情况;

  在当定义了高度,但是内容超过高度时,内容会超出定义的高度,但是区域使用的样式不会变化,造成样式错位。

  建议:在可以确定内容高度的情况下最好定义高度,如果真的没有办法定义高度,尽量不用使用边框样式。

  2.宽度的区别

  IE:内容宽度=您定义的容器宽度(Internet Explorer ’width’)-padding宽度-border宽度。

   IE中定义 width:100px;padding:5px 的话,所显示的宽度就是100px。

  FF:容器占的宽度=内容宽度+padding宽度+border宽度。

   Firefox中定义 width:100px;padding:5px 的话,所显示的宽度就是105px。

  建议:使用 !important;但是,!important一定要在前面。

   如:width:95px !important;width:100px;padding:5px;。

   注:高度亦是如此!

  3.浮动(float)的区别

  (1)空格处理

  IE:对于DIV并排时候使用float关键字时候,IE对块与块之间的空格是处理的。

  FF:对于DIV并排时候使用float关键字时候,Firefox对块与块之间的空格是不处理的。

  建议:经常发现使用float关键字时候在Firefox显示正常,但是在IE中会出现空格,就是这个原因;

   避免在div连div时候添加空格或者回车,也即是一个div紧接这一个div写;

   或者,将div放入li中进行处理,这样就不会有空格的问题。

  (2)Margin加倍

  IE:在使用float的情况下,IE的margin加倍。

  FF:正常显示。

  建议:针对IE,添加display:inline;

  <div id=”float”></div>相应的css为

  #float{

  float:left;

  margin:5px;/*IE下理解为10px*/

  display:inline;/*IE下再理解为5px*/

  }

  4.鼠标位置处理

  IE:获取事件鼠标位置时,IE用的是event.x和event.y,并且值在不加单位的情况下可以直接使用,IE提供默认单位;

   div.style.left = event.x

   div.style.top = event.y

   此时,div显示的位置为鼠标的位置。

  FF:获取事件鼠标位置时,Firefox用的是MouseEvent.pageX和MouseEvent.pageY,并且在不加单位的情况下直接赋值后,无效;必须添加单位。

   div.style.left = MouseEvent.pageX

   div.style.top = MouseEvent.pageY

   此时,div显示的位置为0,0.

  建议:都添加单位,无论针对IE或者Firefox都有效。

   IE:div.style.left = event.x+'px'

   div.style.top = event.y+'px'

   FF:div.style.left = MouseEvent.pageX+'px'

   div.style.top = MouseEvent.pageY+'px'

  针对IE与Firefox这些不同,解决方案可以有多种,但是当问题直接解析模型的不同的时候,我们只能分别针对浏览器的不同而单独写针对于浏览器的方法。这也是写精致CSS所必须懂得的。

  以上纯属个人愚见,希望对新学CSS的同学有所帮助。
------分隔线----------------------------
------分隔线----------------------------

最新技术推荐