注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

千年绿叶

黑夜给了我黑色的眼睛,我却用它来寻找光明......

 
 
 

日志

 
 

完美解决当浏览器变小DIV出现空白  

2013-02-05 17:36:07|  分类: JQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{
padding:0;
margin:0;
}
</style>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script>
$(function() {  
 if($.browser.msie && ("6.0,7.0".indexOf($.browser.version) != -1)) {//判断浏览器是ie6 或 ie7
 //加入个隐藏的绝对定位的div,宽度要为百分比,若值太小不起作用。这是处理ie6、ie7浏览器版本的特殊方法,本例的关键之处
  $("body").append( '<div id="ie-resize" style="width:10%;height:10%;position:absolute;z-index:-999;visibility:hidden"></div>');
  $("#ie-resize").resize(function() {//将resize事件绑定在该层上
//只要浏览器宽度发生改变,马上执行以下函数
    var wid=$(window).width();//获取当前浏览器可视区的宽度
  if(wid>990){
 $("#div1").css("width","auto");
  }else if(wid<990){
 $("#div1").css("width",990);
 }
  else{
 $("#div1").css("width",990);
 }
 
  });
}
 else{//其他浏览器 
  $(window).resize(function() {
  var wid=$(window).width();
  if(wid>990){
 $("#div1").css("width","auto");
  }else if(wid<990){
 $("#div1").css("width",990);
 }
  else{
 $("#div1").css("width",990);
 }

  })
  
 }
});
</script>
</head>

<body>
<div style="width:auto;height:100px;background:#C30" id=div1></div>
<div style="width:990px;height:100px; margin:0 auto;background:#FC0" id=div2></div>
</body>
</html>
  评论这张
 
阅读(323)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017