CHROME和IE的兼容有关问题
日期：2014-05-17 浏览次数：20802 次
CHROME和IE的兼容问题
在IE上点击显示很正常
CHROME点击位置会往下掉
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT>
function showAndHide(obj,types){
var Layer=window.document.getElementById(obj);
switch(types){
case "show":
Layer.style.display="block";
break;
case "hide":
Layer.style.display="none";
break;
}
}
function gv(obj,str){
var input = window.document.getElementById(obj);
input.value = str;
}
</SCRIPT>
<style>
.Menu {position:relative;width:150px;height:auto;z-index:1;background: #FFF;border:1px solid #ccc;margin-top:-100px;display:block;left:0px;top:97px;}
.MenuSub{position: absolute;left:0;top:0;width:100%;height:auto;overflow:hidden;z-index:1;background-color:#fff;}
.MenuSub ul{margin:0;padding:0}
.MenuSub ul li{width:100%;height:25px;line-height:25px;text-indent:15px; font-size:10px;
border-bottom:1px dashed #ccc;color:#666;cursor:pointer;
change:expression(
this.onmouseover=function(){ this.style.background="#F2F5EF"; },
this.onmouseout=function(){ this.style.background=""; }
)
}
</style>
</HEAD>
<BODY>
<!-- -->
<table border="0" cellspacing="0" cellpadding="0">
<tr height="40">
<td>姓名</td>
<td><input /> </td>
</tr>
<tr height="40">
<td>姓别</td>
<td><input onFocus=" showAndHide('loselist','show');" onBlur="showAndHide('loselist','hide');" type="text" name="lose" id="zlose" value="" style="width:150px;" />
<div class="Menu" id="loselist" >
<div class="MenuSub">
<ul><li >1</li>
<li >2</li>
<li >3</li>
<li >4</li>
</ul>
</div>
</div></td>
</tr>
</table>
</BODY>
</HTML>
------解决方案--------------------
首先说一下的你编码格式：script最好写在style的下面，万一你的js报错你的css就不能作用到，导致你的页面很乱无法看，如果写在下面只是有些功能没有了，但是页面布局还是存在的。
第二 .Menu {position:relative;width:150px;height:auto;z-index:1;background: #FFF;border:1px solid #ccc;margin-top:-100px;display:block;left:0px;top:97px;}
这个样式我确实没有看懂，首先距离原来的位置向上偏移100个像素，然后在距离偏移后的100px的地方在向下走97px个像素，实际上你就是往上偏移了3个像素而多写这么多代码还导致那个小偏差，将这两个属性去掉就可以了。margin-top 和top 如果你要间隔点距离直接加个top=3px；就可以了
在IE上点击显示很正常
CHROME点击位置会往下掉
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT>
function showAndHide(obj,types){
var Layer=window.document.getElementById(obj);
switch(types){
case "show":
Layer.style.display="block";
break;
case "hide":
Layer.style.display="none";
break;
}
}
function gv(obj,str){
var input = window.document.getElementById(obj);
input.value = str;
}
</SCRIPT>
<style>
.Menu {position:relative;width:150px;height:auto;z-index:1;background: #FFF;border:1px solid #ccc;margin-top:-100px;display:block;left:0px;top:97px;}
.MenuSub{position: absolute;left:0;top:0;width:100%;height:auto;overflow:hidden;z-index:1;background-color:#fff;}
.MenuSub ul{margin:0;padding:0}
.MenuSub ul li{width:100%;height:25px;line-height:25px;text-indent:15px; font-size:10px;
border-bottom:1px dashed #ccc;color:#666;cursor:pointer;
change:expression(
this.onmouseover=function(){ this.style.background="#F2F5EF"; },
this.onmouseout=function(){ this.style.background=""; }
)
}
</style>
</HEAD>
<BODY>
<!-- -->
<table border="0" cellspacing="0" cellpadding="0">
<tr height="40">
<td>姓名</td>
<td><input /> </td>
</tr>
<tr height="40">
<td>姓别</td>
<td><input onFocus=" showAndHide('loselist','show');" onBlur="showAndHide('loselist','hide');" type="text" name="lose" id="zlose" value="" style="width:150px;" />
<div class="Menu" id="loselist" >
<div class="MenuSub">
<ul><li >1</li>
<li >2</li>
<li >3</li>
<li >4</li>
</ul>
</div>
</div></td>
</tr>
</table>
</BODY>
</HTML>
------解决方案--------------------
首先说一下的你编码格式：script最好写在style的下面，万一你的js报错你的css就不能作用到，导致你的页面很乱无法看，如果写在下面只是有些功能没有了，但是页面布局还是存在的。
第二 .Menu {position:relative;width:150px;height:auto;z-index:1;background: #FFF;border:1px solid #ccc;margin-top:-100px;display:block;left:0px;top:97px;}
这个样式我确实没有看懂，首先距离原来的位置向上偏移100个像素，然后在距离偏移后的100px的地方在向下走97px个像素，实际上你就是往上偏移了3个像素而多写这么多代码还导致那个小偏差，将这两个属性去掉就可以了。margin-top 和top 如果你要间隔点距离直接加个top=3px；就可以了
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
