bgiframe 解决IE6 DIV 档不住下拉选择框

来源:互联网 发布:苹果屏幕录制软件 编辑:程序博客网 时间:2024/05/05 09:06

bgiframe 插件用来轻松解决 IE6 z-index 的问题,如果网页上有浮动区块和下拉选单重叠时,在IE6会看到下拉选框总是把浮动区块覆盖住,无论怎么调整 z-index 都是没用的,而用 bgiframe 就可以轻松解决这个问题。

使用方法:

$(document).ready(function() { 
  $('#floatingBox').bgiframe(); 
}); 
 
下载
 
官方地址:http://plugins.jquery.com/project/bgiframe

 

 

demo案例: 

 

<!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>bgiframe 案例</title>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/jquery.bgiframe.js" type="text/javascript"></script>
</head>
<!--bgiframe 插件用来轻松解决 IE6 z-index 的问题,如果网页上有浮动区块和下拉选单重叠时,在IE6会看到下拉选框总是把浮动区块覆盖住,无论怎么调整 z-index 都是没用的,而用 bgiframe 就可以轻松解决这个问题。-->
<script type="text/javascript">
$(document).ready(function() {
 $('#cart_sidebar').bgiframe();
});
</script>
<script type="text/javascript">
jQuery(function($) { 
  $(".float_div").hover(function(){
  if(!$("#cart_sidebar").is(":animated"))
    $("#cart_sidebar").css('display','block');  //.show();
  },function(){
    $("#cart_sidebar").css('display','none'); //.hide();
  })
});
</script>
<style type="text/css">
#cart_sidebar {
 position:absolute
}
</style>
<body>
<div class="float_div">鼠标悬浮上来看效果哦</div>
<div id="cart_sidebar" style="display:none">我悬浮在select上的喽~~~我悬浮在select上的喽~~~我悬浮在select上的喽~~~我悬浮在select上的喽~~~我悬浮在select上的喽~~~IE6下兼容的!</div>
<div class="sort_select" id="floatingBox">
  <div class="sort_by">
    <label>SORT BY:</label>
    <select>
      <option selected="selected" value=""> Date: newest to oldest1</option>
      <option value=""> Date: newest to oldest2</option>
      <option value=""> Date: newest to oldest3</option>
    </select>
  </div>
</div>
</body>
</html>