问下IE下Select和Iframe的关系。解决思路
日期：2014-05-16 浏览次数：20407 次
问下IE下Select和Iframe的关系。。
下面的CODE用IFF和OP测试均可以显示SELECT元素，可是IE就不能显示，这个东西怎么解决？？
<!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=gb2312 " />
<title> 全屏 </title>
<style type= "text/css ">
#Dall_screen, #Iall_screen {
position:absolute;
left:0px;
top:0px;
}
#Dall_screen {
z-index:100;
background-color:#F4F4F4;
filter:alpha(opacity=30);
opacity:0.3;
}
#Iall_screen {
z-index:99;
filter:alpha(opacity=0);
opacity:0;
}
</style>
<script type= "text/javascript ">
var $ = function (id) {
//获取对象
return document.getElementById(id);
};
var all_screen = function () {
var div, iframe;
document.body.innerHTML += ' <div id= "Dall_screen "> <\/div> <iframe id= "Iall_screen " frameborder= "0 "> <\/iframe> ';
div = $( "Dall_screen "), iframe = $( "Iall_screen ");
div.style.height = iframe.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px ";
div.style.width = iframe.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px ";
};
</script>
</head>
<body>
<select>
<option> </option>
<option> </option>
<option> </option>
<option> </option>
</select>
<input type= "button " value= "添加 " onclick= "all_screen() " />
</body>
</html>
------解决方案--------------------
....
IE 有两个怪胎, 你一次都弄了,,,服了....
------解决方案--------------------
是的，IE6下米办法！
IE7可以，但是IE7下FLASH又会消失了！
------解决方案--------------------
hehe,两个怪胎就是select和iframe
这两个东西在显示的优先级和正常的元素不一样
这个在IE中，iframe会盖住select的
所以要想实现这个全屏的效果，只能不嫌麻烦了
<!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=gb2312 " />
<title> 全屏 </title>
<style type= "text/css ">
#Dall_screen, #Iall_screen {
position:absolute;
left:0px;
top:0px;
}
#Dall_screen {
z-index:100;
background-color:#F4F4F4;
filter:alpha(opacity=30);
opacity:0.3;
}
#Iall_screen {
z-index:99;
filter:alpha(opacity=0);
opacity:0;
}
</style>
<script type= "text/javascript ">
var $ = function (id) {
//获取
下面的CODE用IFF和OP测试均可以显示SELECT元素，可是IE就不能显示，这个东西怎么解决？？
<!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=gb2312 " />
<title> 全屏 </title>
<style type= "text/css ">
#Dall_screen, #Iall_screen {
position:absolute;
left:0px;
top:0px;
}
#Dall_screen {
z-index:100;
background-color:#F4F4F4;
filter:alpha(opacity=30);
opacity:0.3;
}
#Iall_screen {
z-index:99;
filter:alpha(opacity=0);
opacity:0;
}
</style>
<script type= "text/javascript ">
var $ = function (id) {
//获取对象
return document.getElementById(id);
};
var all_screen = function () {
var div, iframe;
document.body.innerHTML += ' <div id= "Dall_screen "> <\/div> <iframe id= "Iall_screen " frameborder= "0 "> <\/iframe> ';
div = $( "Dall_screen "), iframe = $( "Iall_screen ");
div.style.height = iframe.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px ";
div.style.width = iframe.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px ";
};
</script>
</head>
<body>
<select>
<option> </option>
<option> </option>
<option> </option>
<option> </option>
</select>
<input type= "button " value= "添加 " onclick= "all_screen() " />
</body>
</html>
------解决方案--------------------
....
IE 有两个怪胎, 你一次都弄了,,,服了....
------解决方案--------------------
是的，IE6下米办法！
IE7可以，但是IE7下FLASH又会消失了！
------解决方案--------------------
hehe,两个怪胎就是select和iframe
这两个东西在显示的优先级和正常的元素不一样
这个在IE中，iframe会盖住select的
所以要想实现这个全屏的效果，只能不嫌麻烦了
<!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=gb2312 " />
<title> 全屏 </title>
<style type= "text/css ">
#Dall_screen, #Iall_screen {
position:absolute;
left:0px;
top:0px;
}
#Dall_screen {
z-index:100;
background-color:#F4F4F4;
filter:alpha(opacity=30);
opacity:0.3;
}
#Iall_screen {
z-index:99;
filter:alpha(opacity=0);
opacity:0;
}
</style>
<script type= "text/javascript ">
var $ = function (id) {
//获取
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
