最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

Firefox下样式设置宽度奇怪现象_经验交流

来源:懂视网 责编:小采 时间:2020-11-27 18:55:34
文档

Firefox下样式设置宽度奇怪现象_经验交流

Firefox下样式设置宽度奇怪现象_经验交流:页面中有一个数据列表,是table,放在一个div窗口中,结构如下: 代码如下: ....列表数据.... 给 container 设置了样式 #container {width:100%; margin:10px;} 给 grid 设置了样式 #grid {width:100%} 测试结果在IE中正常,在
推荐度:
导读Firefox下样式设置宽度奇怪现象_经验交流:页面中有一个数据列表,是table,放在一个div窗口中,结构如下: 代码如下: ....列表数据.... 给 container 设置了样式 #container {width:100%; margin:10px;} 给 grid 设置了样式 #grid {width:100%} 测试结果在IE中正常,在

页面中有一个数据列表,是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,呵呵!也许哪个高手知道原因。自己做过测试,把代码和截图贴上来:




[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文档

Firefox下样式设置宽度奇怪现象_经验交流

Firefox下样式设置宽度奇怪现象_经验交流:页面中有一个数据列表,是table,放在一个div窗口中,结构如下: 代码如下: ....列表数据.... 给 container 设置了样式 #container {width:100%; margin:10px;} 给 grid 设置了样式 #grid {width:100%} 测试结果在IE中正常,在
推荐度:
标签: 分享 经验 样式
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top