当前位置: 代码网 > it编程>网页制作>Css > Firefox下样式设置宽度奇怪现象

Firefox下样式设置宽度奇怪现象

2024年05月19日 Css 我要评论
页面中有一个数据列表,是table,放在一个div窗口中,结构如下: 给 container 设置了样式 #container {width:100%; margin:10px;} 给 grid 设置
页面中有一个数据列表,是table,放在一个div窗口中,结构如下:


给 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,呵呵!也许哪个高手知道原因。自己做过测试,把代码和截图贴上来:



(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com