html页面高度不同浏览器兼容性设置
页面需要嵌套在跨域的iframe中,而页面高度不固定,需要每个页面把自己的高度获得后,通过js通知iframe调整显示。
而页面在获得自己的高度时,发现总是比预想的大。经过参考别人的博客,发现原来是w3c标准的原因。
也就是要在<html>前面加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
加上之后,document.documentElement.scrollHeight在IE和Chrome下,可以正常取到合适的全文高度,但是firefox下取到的则过高;用document.body.scrollHeight取则恰好相反。
因此最后采用了Math.min(document.documentElement.scrollHeight,document.body.scrollHeight)获得最小高度,正常。
但是加上W3C标准后,画面也出现了一些小的不同,比如页面的行间距,似乎IE的就要短一些,有些地方重合了。而且css也会严格区分大小写。
参考博客url:
http://jianzhong5137.blog.163.com/blog/static/98290492011522202281/
内容:
js获取页面高度
2011-06-02 14:20:02| 分类:JavaScript | 标签:body document clientwidth 宽度 页面高度 |字号大中小 订阅
function getInfo()
{
var s = "";
s += " 网页可见区域宽:"+ document.body.clientWidth;
s += " 网页可见区域高:"+ document.body.clientHeight;
s += " 网页可见区域宽:"+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
s += " 网页可见区域高:"+ document.body.offsetHeight + " (包括边线的宽)";
s += " 网页正文全文宽:"+ document.body.scrollWidth;
s += " 网页正文全文高:"+ document.body.scrollHeight;
s += " 网页被卷去的高(ff):"+ document.body.scrollTop;
s += " 网页被卷去的高(ie):"+ document.documentElement.scrollTop;
s += " 网页被卷去的左:"+ document.body.scrollLeft;
s += " 网页正文部分上:"+ window.screenTop;
s += " 网页正文部分左:"+ window.screenLeft;
s += " 屏幕分辨率的高:"+ window.screen.height;
s += " 屏幕分辨率的宽:"+ window.screen.width;
s += " 屏幕可用工作区高度:"+ window.screen.availHeight;
s += " 屏幕可用工作区宽度:"+ window.screen.availWidth;
s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
//alert (s);
}
getInfo();
< /script>
在我本地测试当中:
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得,很简单,很方便。
而在公司项目当中:
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight
原来是W3C的标准在作怪啊
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在页面中添加这行标记的话
在IE中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
?
在Opera中:
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
而如果没有定义W3C的标准,则
IE为:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
Opera为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
真是一件麻烦事情,其实就开发来看,宁可少一些对象和方法,不使用最新的标准要方便许多啊。
html页面高度不同浏览器兼容性设置的更多相关文章
- 响应式布局中重要的meta标签设置.适用于手机浏览器兼容性设置
<!-- #手机浏览器兼容性设置 --> <meta content="application/xhtml+xml;charset=UTF-8" http- ...
- 页面title改变浏览器兼容性问题
前一阵子客户在界面上改了下小小的需求,需要点不同的文章title显示不同的模块名称(之前没有区分,统一叫新闻图片),很简单的一个需求但是测试的时候并没有注意到不兼容IE7和IE8.在客户那被尴尬的发现 ...
- HTML`CSS_网站页面不同浏览器兼容性问题解决
目前,最为流行的浏览器共有五个:分别是ie,Edge浏览器(属于微软),火狐,谷歌(chrome)Safari和Opera五大浏览器. Trident内核:IE ,360,,猎豹,百度: Gecko内 ...
- CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- Web前端页面的浏览器兼容性测试心得(二)搭建原汁原味的IE8测试环境
如果你做的页面被老板或PM要求兼容IE8,你就值得同情了.IE8不支持HTML5,在2017年的前端界,开发者不涉及HTML5标准简直寸步难行.然而,有一个可怕的事实客观存在,那就是IE8是Win7系 ...
- 网页页面NULL值对浏览器兼容性的影响
网页页面NULL值对浏览器兼容性的影响 近期做项目中一个页面中的input radio出现浏览器兼容性问题. 主要问题: 在谷歌浏览器,360急速模式和搜狗急速模式中给radio初始动态赋 ...
- 获取iframe子页面内容高度给iframe动态设置高度
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta nam ...
- CSS 多浏览器兼容性问题及解决方案
兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 ...
- css不同浏览器兼容性调试 --- 转自: [http://wo.115.com/?ct=detail&id=31733&bid=1018841]
css不同浏览器兼容性调试 IE6.0,IE7.0与Firefox的CSS兼容性问题1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right ...
随机推荐
- secureCRT常用设置
一.快捷键: 1. ctrl + a : 移动光标到行首[常用] 2. ctrl + e :移动光标到行尾[常用] 3. ctrl + d :删除光标之后的一个字符 4. ctrl + w : 删除行 ...
- 读写应用程序数据-CoreData
coreData数据最终的存储类型可以是:SQLite数据库.XML.二进制.内存里.自定义的数据类型. 和SQLite区别:只能取出整个实体记录,然后分解,之后才能得到实体的某个属性. 1.创建工程 ...
- 对Cookie进行增删改查
public class CookieServletDemo extends HttpServlet { public void doGet(HttpServletRequest request, H ...
- 一行 Python 代码搞定一棵树
使用 Python 内建的 defaultdict 方法可以轻松定义一个树的数据结构. 简单的说树也可以是一个字典数据结构 Python 1 def tree(): retur ...
- php加载memcache
安装php加载memcache[root@web-server ~]# rpm -qa | grep libevent [root@web-server ~]# yum -y install libe ...
- android 中 系统日期时间的获取
import java.text.SimpleDateFormat; SimpleDateFormat formatter = new SimpleDateFormat ...
- 解读Spring Ioc容器设计图
在Spring Ioc容器的设计中,有俩个主要的容器系列:一个是实现BeanFactory接口的简单容器系列,这系列容器只实现了容器最基本的功能:另外一个是ApplicationContext应用上下 ...
- 关于Handler与异步消息处理循环的摘抄
Message:消息,其中包含了消息ID,消息处理对象以及处理的数据等,由MessageQueue 统一队列,终由Handler处理. Handler:处理者,负责Message的发送及处理.使用Ha ...
- MD5/SHA加密
public class EncryptUtil { public static String getEncrypt(String value , String encrypt_type){ Stri ...
- 【笔记】mongodb启动不了:child process failed, exited with error number 100
今天在启动mongodb的时候,发现起不来,报错:child process failed, exited with error number 100然后先去/var/log/mongo/mongod ...