在做类似层拖拽等 或改变table div 等元素的大小的时候
常常需要使用各种 clientWidth clientHeight clientX clientY offsetWidth offsetHeight offsetLeft ....
总之 各种定位
大家都知道 对于这些东西的取值 ie 和 ff 是不一样的
我们在编程的时候 总是会用各种方法来消除他们之间的不同.
例如下面的代码
<html>
<head>
<script type="text/javascript">
function init(){
alert(document.body.offsetWidth +","+ document.body.clientWidth)
}
</script>
</head>
<body onload="init();">
</body>
</html>
把浏览器窗口最大化 可以发现 ie 和 ff 两者对
document.body.offsetWidth 和 document.body.clientWidth
的取值都不一样 具体是什么大家可以自己看看
这是后可以通过 给 body 加上 style="margin:0px;" 来让两者的 document.body.offsetWidth一样
可是这时候 document.body.clientWidth 依然不同
可以很明显的看出来 ie下有滚动条 ff下没有 ok 我们全给它弄成没有吧
加上overflow:auto;
再来看看 咦?有变化 但还是不一样
怎么让他们一样呢?再给body加一个 padding:0px呢?
加上后你会发现 没变化
那对于这么一个简单的页面 该怎么做才能让 ie 和 ff下得到一样的结果呢
答案是再加一个 border
给body加上 border:0px none
现在代码变成这样了
<html>
<head>
<script type="text/javascript">
function init(){
alert(document.body.offsetWidth +","+ document.body.clientWidth)
}
</script>
</head>
<body style="margin:0px;overflow:auto;border:0px;" onload="init();">
</body>
</html>
现在 alert出来的结果在 ie 和 ff下终于一样了
总结一下:
1 对于 overflow ie和ff的默认值不同
2 对于body的 margin默认值一样 但是ff不会把他算进document.body.clientWidth内
3 在整个过程中,我们最容易忽视的就是 body的border
在ff下 body的border会被忽略 不记入 页面的宽度和高度里
为了让ie 和ff结果一样 我们最好把body的border全部弄没
分享到:
相关推荐
有需要的朋友是最好的参考资料。希望有所帮助!
在网上闲逛时 看到的js日历 支持FF(在body区调用js)
问题: 如何取到页面中任意某个... (1)在FF下直接使用offsetTop和offsetLeft,就可以取到页面中任意某个Html元素与body元素之间的偏移距离; (2)在IE、Opera下则比较麻烦: 需要首先取到该Html元素与body元素之间
浅析@ReponseBody和@RequestBody注解主要讲述了@ReponseBody的作用和@RequestBody的作用和springMvc内部是如何对他们进行解析的
在新定义出来的标准下 document.documentElement.clientHeight在IE和火狐里都能获取正确值,下面一篇文章详细介绍了获取各种浏览器可见窗口大小这方面的差别: [removed]function getInfo(){ var s = “”; s += ...
在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。 ◎ width:600px; 在所有浏览器中图片的大小为600px; ◎ 当图片大小大于600px,自动缩小为600px。在IE6中有效。 ◎ overflow:hidden; 超出的部分隐藏...
火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
这个可谓是css的高级写法 兼容IE8/IE9/IE10/IE11 火狐,谷歌,360等各种主流浏览器 ... 1、在body的根目录下建立两个嵌套的div 2、分别给两个div加上样式属性即可,详细请见附件index.html文件
这是因为FF和Ie的默认字体不相同导致的 在FF中默认字体应该是Arial IE中 font-family:宋体 是宋体的话 一个空格的宽度大概是一个汉字的宽度 “宽” font-family:Arial 是Arial的话 一个空格的宽度大概是一个字符的...
IE会让相邻的也浮动起来,Chrome 和FF不会,他们的float对象不再占据空间,所以显示效果也不同。 Chrome 下 IE <style> body{ padding:0; margin:0;} #yi{ background:#0033FF; height:298px; width:298px...
css浏览器兼容写法 如果只让ie6看见用*html .head{color:#000;} 如果只让ie7看见用*+html .head{color:#000;} 如果只让ff看见用:root body .head...如果只是不让ff、IE8看见用*body .head{color:#000;} 即对ff、IE8无效
CSS代码: 复制代码代码如下: <style type=”text/css”> #body { border:2px solid #00f;...复制代码代码如下: ”body”> <ul> <li>FF下蓝边</li> <li>IE6下红边</li> <li>IE7下绿边</li> <li>
BODY
JavaScript 无缝上下滚动加定高定宽停顿效果(兼容ie/ff) JavaScript 无缝上下滚动加定高定宽停顿效果(兼容ie/ff) body {font-size:12px;} .Scroller {line-height:20px; border:1px solid #D4D4D4; padding:0px...
CMU在BODY25数据集上训练的模型,包含25个关键点,使用代码与COCO有所不同 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
【ASP.NET编程知识】ASP.NET Core读取Request.Body的正确方法.docx
margin-left, margin-right 为 auto 时已经居中, IE 不行3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中4.FF: 设置 padding 后, div 会增加 height 和 width...
spring 支持@RequestBody注解依赖包 、 spring 支持@RequestBody注解依赖包 spring 支持@RequestBody注解依赖包
从cc2001中提取的CS Body of Knowledge。 cc2001是国外的计算机科学教学大纲
《Html基础知识串讲》一书由寒点建站网搜集编制,内容部分来源于网络,由寒点技术小组经过精心修改、补充和完善,在内容上使得更为充实,在层次上渐渐深入,对读者进行循循善诱,起到良好的学习效果。 本书之所以...