区块链、APP、公众号、小程序、物联网、智能硬件、网站开发新模式,安全,超速,可控。
所在位置:
切片软件攻略
IE6下相对定位DIV被select挡住的解决方法
      人气:

在IE中,[[[[[[[[[[[[select]]]]]]]]]]]]属于window类型控件,它会“挡住”所有非window类型控件
可以这么理解,div这样的组件是在浏览器客户区使用代码“渲染”的,
他们被渲染在客户区的绘画表面上,
而[[[[[[[[[[[[select]]]]]]]]]]]]是使用的标准windows控件,只是作为客户区的子控件放置而已,
它会覆盖所有客户区绘画表面上“画”出来的一切,但不一定会覆盖其他类型的window控件,比如和其他的[[[[[[[[[[[[select]]]]]]]]]]]]。IE7、IE8解决了此BUG。

有多种种办法:
1. 修改[[[[[[[[[[[[select]]]]]]]]]]]],不用标准[[[[[[[[[[[[select]]]]]]]]]]]],而是自己用其他html元素模拟
2. 修改你的div,使用。
3. 在div被显示的时候或者到达[[[[[[[[[[[[select]]]]]]]]]]]]所在位置时隐藏[[[[[[[[[[[[select]]]]]]]]]]]]
4. 在div中或div的同一坐标上,用相同尺寸的先遮挡一下,然后在上显示div的内容。
5.Object对象的优先度较高,可以挡住[[[[[[[[[[[[select]]]]]]]]]]]]框

第4种方法的例子:最好的方法:来当作div的底

div直接盖不住[[[[[[[[[[[[select]]]]]]]]]]]],但是div可以盖,而可以盖[[[[[[[[[[[[select]]]]]]]]]]]],所以,把一个来当作div的底,这个div就可以盖住[[[[[[[[[[[[select]]]]]]]]]]]]了。

<div style=”height:1000px;width:1000px;position:relative;'>
<div style='height:100px;width:100px;position:absolute;top:100px;left:100px;'>
<[[[[[[[[[[[[select]]]]]]]]]]]] name=''>
<option>测试</option>
<option>测试</option>
</[[[[[[[[[[[[select]]]]]]]]]]]]>
</div>
<!--[if lte IE 6]>< frameborder='0' style='position:absolute;width:100px;height:100px;top:100px;left:100px;z-index:-1;filter:alpha(opacity=0);'></><![endif]-->
</div>

第3种方法的例子:最直接的方法:隐藏下拉框.

下面提供的是一个比较通用的一组函数:

test.htm

------------

<>
var HideElementTemp = new Array();
//点击菜单时,调用此的函数,菜单对象
function cal_hideElementAll(obj){
cal_HideElement('IMG',obj);
cal_HideElement('[SELECT]',obj);
cal_HideElement('OBJECT',obj);
cal_HideElement('',obj);
}
function cal_HideElement(strElementTagName,obj){
try{
var showDivElement = obj;
var calendarDiv = obj;
var intDivLeft = cal_GetOffsetLeft(showDivElement);
var intDivTop = cal_GetOffsetTop(showDivElement);//+showDivElement.offsetHeight;
//HideElementTemp=new Array()
for(i=0;i<window.document.all.tags(strElementTagName).length; i++){
var objTemp = window.document.all.tags(strElementTagName)[i];
if(!objTemp||!objTemp.offsetParent)
continue;
var intObjLeft=cal_GetOffsetLeft(objTemp);
var intObjTop=cal_GetOffsetTop(objTemp);
if(((intObjLeft+objTemp.clientWidth)>intDivLeft)&&
(intObjLeft<intDivLeft+calendarDiv.style.posWidth)&&
(intObjTop+objTemp.clientHeight>intDivTop)&&
(intObjTop<intDivTop+calendarDiv.style.posHeight)){
//var intTempIndex=HideElementTemp.length;//已经有的长度
//save elementTagName is stutas
//HideElementTemp[intTempIndex]=new Array(objTemp,objTemp.style.visibility);
HideElementTemp[HideElementTemp.length]=objTemp
objTemp.style.visibility='hidden';
}
}
}catch(e){alert(e.message)
}
}

function cal_ShowElement(){
var i;
for(i=0;i<HideElementTemp.length; i++){
var objTemp = HideElementTemp[i]
if(!objTemp||!objTemp.offsetParent)
continue;
objTemp.style.visibility=''
}
HideElementTemp=new Array();
}
function cal_GetOffsetLeft(src){
var set=0;
if(src && src.name!='divMain'){
if (src.offsetParent){
set+=src.offsetLeft+cal_GetOffsetLeft(src.offsetParent);
}
if(src.tagName.toUpperCase()!='BODY'){
var x=parseInt(src.scrollLeft,10);
if(!isNaN(x))
set-=x;
}
}
return set;
}

function cal_GetOffsetTop(src){
var set=0;
if(src && src.name!='divMain'){
if (src.offsetParent){
set+=src.offsetTop+cal_GetOffsetTop(src.offsetParent);
}
if(src.tagName.toUpperCase()!='BODY'){
var y=parseInt(src.scrollTop,10);
if(!isNaN(y))
set-=y;
}
}
return set;
}

</>
<[[[[[[[[[[[[select]]]]]]]]]]]]></[[[[[[[[[[[[select]]]]]]]]]]]]>
<[[[[[[[[[[[[select]]]]]]]]]]]]></[[[[[[[[[[[[select]]]]]]]]]]]]>
<div style='position:absolute;left:0;top:0;width:100;height:100;background-color:red' onclick='cal_hideElementAll(this)'>
点击让[[[[[[[[[[[[select]]]]]]]]]]]]隐藏
</div>
<br><br><br><br><br><br>
<input type='button' value='点击让[[[[[[[[[[[[select]]]]]]]]]]]]显示' onclick='cal_ShowElement()'>

以上这种方法,如果对于[[[[[[[[[[[[select]]]]]]]]]]]]框数目少,相对固定的话,直接用obj.style.visibility='hidden'这样进行隐藏是更直接的.

第2种方法:用作载体

以下是一简单的例子:

-----------

<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
<meta name='GENERATOR' content='Microsoft FrontPage 4.0'>
<meta name='ProgId' content='FrontPage.Editor.Document'>
<title>简单菜单</title>
<!--
提供定位函数,用作载体,不会被[[[[[[[[[[[[select]]]]]]]]]]]]挡住
By Fason(2003-5-21)
-->
<style id=s>
#div1{
position:absolute;
z-index:100;
width:100;
height:130;
background-color:#d2e8ff;
border:1 solid black;
}
div{cursor:hand;font-size:12px;}
a{text-decoration:none;color:red;font-size:12px}
</style>
</head>
<body>
<>
function window.onload(){
var shtml=div1.innerHTML;
var ifm=document.createElement('< frameborder=0 marginheight=0 marginwidth=0 hspace=0 vspace=0 scrolling=no></>')
ifm.style.width=div1.offsetWidth
ifm.style.height=div1.offsetHeight
ifm.name=ifm.uniqueID
div1.innerHTML=''
div1.appendChild(ifm)
window.frames[ifm.name].document.write(s.outerHTML+'<body leftmargin=0 topmargin=0>'+shtml+'</body>')
}

function show(){
with(document.all.img1){
x=offsetLeft;
y=offsetTop;
objParent=offsetParent;
while(objParent.tagName.toUpperCase()!= 'BODY'){
x+=objParent.offsetLeft;
y+=objParent.offsetTop;
objParent = objParent.offsetParent;
}
y+=offsetHeight-1
}
with(document.all.div1.style){
pixelLeft=x
pixelTop=y
visibility=''
}
}
function hide(){
document.all.div1.style.visibility='hidden'
}
</>
<img id=img1 onmouseover='show()' onmouseout='hide()' src='ie.gif'><br><[[[[[[[[[[[[select]]]]]]]]]]]]></[[[[[[[[[[[[select]]]]]]]]]]]]>
<div id=div1 onmouseover='style.visibility=''' onmouseout='style.visibility='hidden'' style='visibility:hidden;'>
<div href='http://www.csdn.net' onmouseover='style.backgroundColor='highlight'' onmouseout='style.backgroundColor=''' onc

版权所有 © 2017 ymznkf.com. 成都玉目科技有限公司 蜀ICP备17032468号-1