Firefox下样式设置宽度奇怪现象
页面中有一个数据列表,是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,呵呵!也许哪个高手知道原因。自己做过测试,把代码和截图贴上来:
test
数据1 | 数据2 | 数据3 | 数据4 |
数据5 | 数据6 | 数据7 | 数据8 |
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
Firefox下样式设置宽度奇怪现象
页面中有一个数据列表,是table,放在一个div窗口中,结构如下: 复制代码 代码如下: <body> <div id="container"> <table id="grid">....列表数据....</table> </div> </body> 给 container 设置了样式 #container {width:100%; margin:10px;} 给 grid 设置了样式 #gr
-
IE及firefox下获取及设置样式值的代码
复制代码 代码如下: <script type="text/javascript"> //<![CDATA[ function $(obj) { return document.getElementById(obj); } function getStyle(obj,styleName) { if(obj.currentStyle) //for ies { return obj.currentStyle[styleName]; //注意获取方式 } else //fo
-
css pointer控制在firefox下显示手型的代码
在ie下设置 css 样式 style="cursor:hand;" 可以正常显示 但是在firefox下就不行 改用 style="cursor:pointer;" 则在两个浏览器下都能正常显示 但只适用于IE6.0及以上版本以及FIREFOX,在IE5.0下不能显示成手
-
IE和Firefox下javascript的兼容写法小结
1.发现IE下input标签的id属性默认和name属性相同,而Firefox必须明确写出id属性的名称否则不能使用id属性. 如:<input type="text" name="username" value=""> 在IE下如下代码可以执行而在Firefox下却不可以: <script> alert(document.getElementById("username").value); </
-
echarts实现饼图与样式设置
饼图 饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所以也不需要 xAxis,yAxis. myChart.setOption({ series : [ { name: '访问来源', type: 'pie', // 设置图表类型为饼图 radius: '55%', // 饼图的半径,外半径为可视区尺寸(容器高宽中较小一项)的 55% 长度. data:[ // 数据数组,name 为数据项名称,valu
-
在Firefox下js select标签点击无法弹出
在项目中运用到了JQUERY UI,用到了其中的disableSelection()方法,这个方法是让页面上的指定元素无法通过鼠标拖拽进行选择. 由于某些需求,我在给div使用了此方法后,达到了上述效果,但是有不足的地方. 在Firefox下运用此方法后,div中的select方法点击之后将会无法弹出,在IE和CHROME下没有此现象.
-
JQuery实现样式设置、追加、移除与切换的方法
本文实例讲述了JQuery实现样式设置.追加.移除与切换的方法.分享给大家供大家参考.具体分析如下: 有了JQuery,元素的样式操作会变得相当简易.下面我们来看看如何使用JQuery来实现元素样式的获取.设置.追加.删除以及其它一些操作. 获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: var p_class = $("p").attr("class"); /
-
浅析JQuery UI Dialog的样式设置问题
最近在用一个JQUERY UI Dialog的插件,感觉特别强大,但样式设置比较麻烦,研究了俩天终于搞定了. 运行插件,需要的环境如下 <script src="../../JS/jquery-1.4.2.js" type="text/javascript"></script> <script src="../JS/jquery.ui.js" type="text/javascript">&
-
jQuery在ie6下无法设置select选中的解决方法详解
本文实例讲述了jQuery在ie6下无法设置select选中的解决方法.分享给大家供大家参考,具体如下: 这里主要解决在 ie6 下,jquery 无法设置 select 选中的问题.我们先看个例子: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"/> <title>demo</title> </head&g
-
微信小程序 button样式设置为图片的方法
下面通过多种方法给大家介绍微信小程序 button 的样式设置为图片,具体内容如下所示: 方法一:button 与 image 重叠 将button设为 opacity:0 然后定位放在那副图片的上边. 方法二:background-image background-image.背景图片是不支持在css中被引用资源的,但可以使用网络资源. <button open-type='share' class="share" style="background-image:ur
随机推荐
- PHP中大括号'{}'用法实例总结
- js获取元素到文档区域document的(横向、纵向)坐标的两种方法
- Redis的使用模式之计数器模式实例
- 学习YUI.Ext 第六天--关于树TreePanel(Part 1)
- AngularJS 与Bootstrap实现表格分页实例代码
- javascript基础知识分享之类与函数化
- 让js弹出窗口居前显示的实现方法
- Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
- 批量实现面向对象的实例代码
- Summernote实现图片上传功能的简单方法
- 基于 Bootstrap Datetimepicker 联动
- Python字符串拼接的几种方法整理
- C# 格式化字符串的实现代码
- MYSQL导入导出命令详解
- VBS教程:函数-Date 函数
- 50行代码实现贪吃蛇(具体思路及代码)
- jQuery实现自动调整字体大小的方法
- JAVA正则表达式过滤文件的实现方法
- Java实现在正则表达式中控制大小写的方法
- python使用threading获取线程函数返回值的实现方法