您现在的位置: 动易技术中心 >> 模板设计教程 >> WEB重构 >> 正文
IE与Firefox等浏览器对容器width的不同解释及解决办法

  图片中:CSS 'width' 指的是标准CSS中所指的width的宽度,在firefox,opera等中的宽度就是这个宽度。它只包含容器中内容的宽度。

  而Internet Explorer 'width'则是指整个容器的宽度,包括内容,padding ,border。

  所谓的CSS的宽度的加法减法就指这里不同浏览器对width解析得到的不同结果。

  Firefox中是加法:容器占的宽度=内容宽度+padding宽度+border宽度

  IE中是减法:内容宽度=您定义的容器宽度(Internet Explorer 'width')-padding宽度-border宽度

  大家区分的时候重点是分清:内容宽度和容器所占宽度这两个的不同

  由于以上差别的存在,必然造成定义的一个容器宽度在不同浏览器中显示出不同的效果来。解决办法主要有两种:

  一种是写hack
  一种是采取在当前容器中再增加一个div的方法来解决。

  写hack:
  给不同的浏览器写一个不同的width: div.aa{width:100px; *width:120px;}Firefox等浏览器只能认出前一个width来,因此它会认为这个div容器的宽度是100px,而IE6等浏览器则两个都能认出来,但是根据优先级,写在后面的会被采纳,因此IE6会认为这个div容器的宽度是120px;

  增加一个div或者其它容器的方法:
  div结构是:
  <div class="aa"><div>内容放在这里</div></div>,
  CSS代码是:
.aa{width:120px;}
.aa div{padding:10px;}
  将padding border与width分开来写,分到不同的div里面,既不用做加法,也不用做减法,外面的div直接采用我们给它指定的宽度。

文章录入:雅虎    责任编辑:雅虎 
  • 上一个文章:

  • 下一个文章:
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    软件产品
    SiteFactory™ 内容管理系统
    SiteFactory™ 网上商店系统
    SiteWeaver™ 内容管理系统
    SiteWeaver™ 网上商店系统
    SiteWeaver™ 企业门户网站系统
    SiteWeaver™ 教育门户网站系统
    SiteWeaver™ 政府门户网站系统
    SiteWeaver™ 行业门户网站系统
    平台产品
    企业服务
    行业解决方案
    联系我们 | 关于动易 | 网站地图 | 相关证书 | 合作伙伴 | 招贤纳士 | 法律条款 | 隐私权声明
    安全上网网上报警
    动易网络科技有限公司版权所有 © 2003-  粤ICP备05004015号
    公安备案编号:200603D0322 本站基于 PowerEasy® SiteWeaver™ 制作