乐码库:一个极速、放心、纯净的下载站! 更新: 资源发布
  • 您的位置:首页 > 技术文档 > CSS/HTML > Firefox下样式设置宽度奇怪现象
  • 收藏本页
      Firefox下样式设置宽度奇怪现象
      发布时间:2016-10-25 17:23:09 关键词: firefox,设置宽度
      内容简介:前段时间做项目时碰到一个奇怪的现象 <br />
    页面中有一个数据列表,是table,放在一个div窗口中,结构如下:
    <body> 
    <div id="container"> 
    <table id="grid">....列表数据....</table> 
    </div> 
    </body> 
    

    给 container 设置了样式 #container {width:100%; margin:10px;}
    给 grid 设置了样式 #grid {width:100%}
    测试结果在IE中正常,在 Firefox 下 container 的实际宽度会超过100%而出现横向滚动条,因为Firefox把margin算进了宽度,实际等于100%+20px>100%。
    当然可以去掉div的margin定义,改用body的padding来设置,但是页面中有其他内容要占满整个页。
    于是以前为了解决这个问题会给div在Firefox区别定义一个width:98%,这样好像是解决了问题,但是如果浏览器窗口变小,Firefox下的98%+20px说不定就又大于100%而出现横向滚动条。
    出于试试看的心理,我把container的样式改成了#container {width:100%-20; margin:10px},再到Firefox下去看看,呵呵,竟然变得正常了,和IE下一样,真是奇怪了,width:100%-20这样的定义应该是错误的呀!但是却解决了Firefox把margin算进去的问题,进一步试下,发现随便100%减随便一个数字都可以,查了些资料,一直没有明白是什么原因。
    或许就是个bug,呵呵!也许哪个高手知道原因。自己做过测试,把代码和截图贴上来:

    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>test</title> 
    </head> 
    <body> 
    <div style="width:200px; overflow-y:auto; background:#efefef; border:2px solid #FF0000"> 
    <div style="width:100%-20; margin:8px" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF0000"> 
    <table style="width:100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#333333"> 
    <tr> 
    <td bgcolor="#FFFFFF">数据1</td> 
    <td bgcolor="#FFFFFF">数据2</td> 
    <td bgcolor="#FFFFFF">数据3</td> 
    <td bgcolor="#FFFFFF">数据4</td> 
    </tr> 
    <tr> 
    <td bgcolor="#FFFFFF">数据5</td> 
    <td bgcolor="#FFFFFF">数据6</td> 
    <td bgcolor="#FFFFFF">数据7</td> 
    <td bgcolor="#FFFFFF">数据8</td> 
    </tr> 
    </table> 
    </div> 
    </div> 
    </body> 
    </html> 
    

      最新更新
      热门排行榜