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

最新推荐文章于 2017-07-03 10:53:00 发布

nb_pdd

最新推荐文章于 2017-07-03 10:53:00 发布

阅读量1k

点赞数

分类专栏： jquery 文章标签： ie div function date class xhtml

本文链接：https://blog.csdn.net/nb_pdd/article/details/6306934

版权

jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>

<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>