易截截图软件、单文件、免安装、纯绿色、仅160KB

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

 
 其实,以前从来没有接触过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:lef


相关文档:

js/css语法对照


盒子标签和属性对照
CSS语法(不区分大小写)
JavaScript语法(区分大小写)
border
border
border-bottom
borderBottom
border-bottom-color
borderBottomColor
border-bottom-style
borderBottomStyle
border-bottom-width
borderBottomWidth
border-color
borderColor
border-left
borderLeft
border ......

10个 DIV+CSS 需要注意的问题

1. 检查HTML元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。
2. 检查CSS是否正确
检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误。
3. 确定错误发 ......

编写符合SEO标准的DIV+CSS风格网页

SEO即搜索引擎优化,从目前互联网的发展状况来看,实现SEO有助于企业减少网络推广的成本。SEO的手段有很多种,或者固定的技术模式,或者非固定的所谓艺术模式也。DIV+CSS是当前公认的网页设计标准,是广为推崇的网页设计新范式,虽然TABLE还被广泛应用,但DIV+CSS优秀的界面控制能力,还是拥有了非常强的竞争优势。当然,目 ......

css网页背景渐变

<style  type="text/css">
/*
  从上往下渐变
*/
body
{
   FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#003C9F,endColorStr=white);
}
/*
  从左上至右下渐变
*/
body
{
   background-color:skyblue;
   FILTE ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号