chorme浏览器div包含img标签页面总超出浏览器页面高度

<div style="display:block;position:absolute;left:0px;top:0px;" id="backgroundImg"><img src="img/zx-user-login/2.jpg" style="width:100%;height:100%;"  /></div>
js如下:
$(function(){
	    $(document).ready(function(){
		  alert($(window).width()+","+$(window).height());
		  $("#backgroundImg").css({
		    width:findDimensions().winWidth,
			height:findDimensions().winHeight
		  });
		});
	    $(window).on("resize",function(){
		  $("#backgroundImg").css({
		     width:findDimensions().winWidth,
			height:findDimensions().winHeight
		  });
		})
	  });
	  <!-- 获取浏览器频幕宽高参数 -->
	  function getWinScale(){
	    defaults = {winWidth:$(window).width(),winHeight:$(window).height()};
	    return defaults;
	  }
	  function findDimensions(){  //函数:获取尺寸
		//获取窗口宽度 
		if (window.innerWidth) 
			winWidth = window.innerWidth; 
		else if ((document.body) && (document.body.clientWidth)) 
			winWidth = document.body.clientWidth; 
		//获取窗口高度 
		if (window.innerHeight) 
			winHeight = window.innerHeight; 
		else if ((document.body) && (document.body.clientHeight)) 
			winHeight = document.body.clientHeight; 
		//通过深入Document内部对body进行检测,获取窗口大小 
		if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) { 
			winHeight = document.documentElement.clientHeight; 
			winWidth = document.documentElement.clientWidth; 
		} 
		defaults = {winWidth:winWidth,winHeight:winHeight};
		return defaults;
	  }

页面总是超出浏览器页面高度,

解决办法:

给img父容器div添加样式:font-size:0px;

时间: 2024-10-16 21:47:51

chorme浏览器div包含img标签页面总超出浏览器页面高度的相关文章

jquery easyui防止超出浏览器边界

var easyuiPanelOnMove=function(left,top){ if(left<0){ $(this).window('move',{ left:1 }); } if(top<0){ $(this).window('move',{ top:1 }); } } $.fn.panel.defaults.onMove = easyuiPanelOnMove; $.fn.window.defaults.onMove=easyuiPanelOnMove; $.fn.dialog.de

项目期复习总结:Table, DIV+CSS,标签嵌套规则

目录: 1.表格的意义,含义? 2.表格有哪些元素? 3.表格布局,表格布局的优缺点 4.行元素,块元素的区别? 5.标签的合理嵌套及标签的语义性 ① 表格的意义,含义? 表格应该用来展现那些适合表格化显示的信息,比如数据的显示,统计或者二维报表之类的信息,而不是作为一种而已的工作 ② 表格有哪些元素? 表格元素:table thead tbody tfoot caption tr th td .... 较常用  ③ 表格的使用应该注意哪些? 1)使用表格时注意合理嵌套,遵循标签的语义性,tab

DIV CSS兼容性解决IE6/IE7/FF浏览器的通用方法完美兼(转)

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用height: 100px; IE6 专用_height: 100px; IE6 专用*height: 100px; IE7 专用*+height: 100px; IE7.FF 共用height: 100px !important; 一.CSS HACK1, !important随着IE7对!i

HTML5语义标签的实践(blog页面)

仿照着用HTML5+CSS3做了一个blog页面.整体效果布局如如: 页面布局是基于html5元素的.所以在开始动手之前先熟悉一下HTML5元素,然后检查它的语义是否适合你的布局很重要. The HTML5 Structure 有一点很重要,当编写HTML5代码的时候,不要简单地把<div>标签用html5中的<section>标签代替.有些时候<div>元素在语义 上仍然是一个很不错的选择.比如wrapper或者container div 其中一个新的可以用来替换传统

你不知道的 页面编码,浏览器选择编码,get,post各种乱码由来

asp.net页面编码和浏览器的选择编码 每个asp.net的写手都知道,在新版本的visual studio,在没有任何设置的情况下,新建页面时的默认编码位utf-8 我们可以从两个地方可以看出: 第一:打开aspx页面,“文件”->“高级保存选项”,如下图,可以看出编码为:Unicode(UTF-8带签名) 第二:找到aspx存放路径,用系统自带的文本编辑器打开,然后“文件”->"另存为",如下图,可以看出编码为UTF-8 很多时候我们有很多疑问,我们经常在aspx页面

使用视 meta 标签来控制手机浏览器布局

移动浏览器的Fennec一样呈现在一个虚拟的"窗口"页面(视),通常比屏幕宽.所以他们不需要去挤每个页面布局到一个小窗口(这会破坏许多非移动优化的网站) .用户可以平移和缩放才能看到页面的不同区域. 移动Safari浏览器推出了"视口元标记",让Web开发人员控制视口的大小和规模.许多其他移动浏览器都支持这个标签,虽然它不是任何Web标准的一部分.苹果公司的文档做得很好解释如何Web开发人员可以使用这个标签,但我们不得不做一些侦探工作,以找出究竟是如何实现它的Fen

如何让旧浏览器支持HTML5新标签

HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML5标签.自己最近在写响应式布局的范例,里面也使用到了header等标签.还是比较希望能够做成兼容“旧版浏览器”的,在此和大家共享一下,如何让旧浏览器支持HTML5新增标签. 书写的基本的HTML代码: 1 <!doctype html> 2 <html> 3 <head>

Python学习打开页面,关闭浏览器

通过Python的打开页面和关闭浏览器,实现对页面阅读次数的增加. 有些博客页面的阅读次数,只是简单的通过打开页面来计数的,如果是这样我们就可以通过Python进行刷阅读次数. #-*- coding: utf-8 -*- # refresh blog # 刷新博客阅读次数 # 使用打开页面,关闭浏览器的原理 # 打开10次,关闭一次浏览器 import webbrowser as web import time import os url = 'http://8796902.blog.51ct

获取页面元素距离浏览器工作区顶端的距离

先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome) 网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript)        document.documentElement.scrollTop //firefox (javascript)        document.documentElement.scrollLeft //firefox (javascript)        document.body.scro