Heim > Artikel > Backend-Entwicklung > 网页元素位置错乱 点击“审查元素”恢复
原先网页都正常显示的,后来include了一个在线客服.php进来。
Firefox、IE11、360兼容模式中正常;360极速模式、Google Chrome中就会错位,但是点击右键“审查元素”就又都会恢复正常...
请问是什么原因?
下面是include进来的一个div
<DIV id=kefu onmouseover=toBig() onmouseout=toSmall()><TABLE style="FLOAT: left" border=0 cellSpacing=0 cellPadding=0 width=157> <TBODY> <TR> <TD class=main_head height=39 vAlign=top> </TD></TR> <TR> <TD class=info vAlign=top> <TABLE class=qqtable border=0 cellSpacing=0 cellPadding=0 width=120 align=center> <TBODY> <!-- <TR> <TD align=middle><a href="" target="_blank"><IMG border=0 src="images/kefu/kefu_head.gif"></a> </TD> </TR> <TR> <TD height=5></TD></TR> --> <TR> <TD height=5 align=middle><SPAN>机加工-徐工:</SPAN></TD></TR> <TR> <TD height=30 align=middle><SPAN><a target="_blank" href=""><img border="0" src="" alt="机加工产品相关请联系我" title="机加工产品相关请联系我"/></a></SPAN></TD></TR> <TR> <TD height=8 align=middle></TD></TR> <TR> <TD height=5 align=middle><SPAN>计量设备-周工:</SPAN></TD></TR> <TR> <TD height=30 align=middle><SPAN><a target="_blank" href=""><img border="0" src="" alt="计量设备相关请联系我" title="计量设备相关请联系我"/></a></SPAN></TD></TR> <TR> <TD height=8 align=middle></TD></TR> <TR> <TD height=5 align=middle><SPAN>网络-小俞:</SPAN></TD></TR> <TR> <TD height=30 align=middle><SPAN><a target="_blank" href=""><img border="0" src="" alt="点击这里给我发消息" title="点击这里给我发消息"/></a></SPAN></TD></TR><TR> <TD height=5></TD></TR> <TR> <TD height=5 align=middle><SPAN>中国数控网官方微信:</SPAN></TD></TR> <TR> <TD height=135 vAlign=top align=middle><A href="images/kefu/2d.png" target="_blank"><IMG border=0 src="images/kefu/2d.png" width=130 height=130></A></TD> </TR> <TR> <TD align=middle> </TD></TR></TBODY></TABLE></TD></TR> <TR> <TD class=down_kefu vAlign=top></TD></TR></TBODY></TABLE><DIV class=Obtn></DIV></DIV><SCRIPT language=javascript> 客服=function (id,_top,_left){ var me=id.charAt?document.getElementById(id):id, d1=document.body, d2=document.documentElement; d1.style.height=d2.style. style="max-width:90%";me.style.top=_top?_top+'px':0;me.style.left=_left+"px";//[(_left>0?'left':'left')]=_left?Math.abs(_left)+'px':0; me.style.position='absolute'; setInterval(function (){me.style.top=parseInt(me.style.top)+(Math.max(d1.scrollTop,d2.scrollTop)+_top-parseInt(me.style.top))*0.1+'px';},10+parseInt(Math.random()*20)); return arguments.callee; }; window.onload=function (){ 客服 ('kefu',100,-152) }</SCRIPT><SCRIPT language=javascript> lastScrollY=0; var InterTime = 1; var maxWidth=-1; var minWidth=-152; var numInter = 8; var BigInter ; var SmallInter ; var o = document.getElementById("kefu"); var i = parseInt(o.style.left); function Big() { if(parseInt(o.style.left)<maxWidth) { i = parseInt(o.style.left); i += numInter; o.style.left=i+"px"; if(i==maxWidth) clearInterval(BigInter); } } function toBig() { clearInterval(SmallInter); clearInterval(BigInter); BigInter = setInterval(Big,InterTime); } function Small() { if(parseInt(o.style.left)>minWidth) { i = parseInt(o.style.left); i -= numInter; o.style.left=i+"px"; if(i==minWidth) clearInterval(SmallInter); } } function toSmall() { clearInterval(SmallInter); clearInterval(BigInter); SmallInter = setInterval(Small,InterTime); } </SCRIPT>
.main_head { BACKGROUND: url(../images/kefu/img3-5_2.png) no-repeat}* HTML .main_head { FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/kefu/img3-5_2.png",sizingMethod='crop'); BACKGROUND: none transparent scroll repeat 0% 0%}* + HTML .main_head { BACKGROUND: url(../images/kefu/img3-5_2.png) no-repeat}.info { PADDING-BOTTOM: 10px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: url(../images/kefu/img3-5_3.png) repeat-y; PADDING-TOP: 5px}* HTML .info { FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/kefu/img3-5_3.png",sizingMethod='crop'); BACKGROUND-REPEAT: repeat-y}* + HTML .info { PADDING-BOTTOM: 10px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: url(../images/kefu/img3-5_3.png) repeat-y; PADDING-TOP: 5px}.down_kefu { WIDTH: 157px; BACKGROUND: url(../images/kefu/img3-5_4.png) no-repeat; HEIGHT: 8px}* HTML .down_kefu { FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/kefu/img3-5_4.png",sizingMethod='crop'); WIDTH: 157px; BACKGROUND-REPEAT: repeat-y; HEIGHT: 8px}* + HTML .down_kefu { WIDTH: 157px; BACKGROUND: url(../images/kefu/img3-5_4.png) no-repeat; HEIGHT: 8px}.Obtn { MARGIN-TOP: 104px; WIDTH: 32px; BACKGROUND: url(../images/kefu/img3-5_1.png) no-repeat; FLOAT: left; HEIGHT: 139px; MARGIN-LEFT: -5px}* HTML .Obtn { FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/kefu/img3-5_1.png",sizingMethod='crop'); WIDTH: 32px; BACKGROUND: none transparent scroll repeat 0% 0%; FLOAT: left; HEIGHT: 139px}* + HTML .Obtn { MARGIN-TOP: 104px; WIDTH: 32px; BACKGROUND: url(../images/kefu/img3-5_1.png) no-repeat; FLOAT: left; HEIGHT: 139px; MARGIN-LEFT: -5px}.qqtable SPAN { PADDING-BOTTOM: 5px; LINE-HEIGHT: 20px; PADDING-LEFT: 0px; WIDTH: 100px; PADDING-RIGHT: 0px; COLOR: #ff6600; FONT-SIZE: 13px; FONT-WEIGHT: bold; PADDING-TOP: 5px}.qqtable A { TEXT-DECORATION: none}.qqtable A:hover { TEXT-DECORATION: none}.qun { BORDER-BOTTOM: #ffd2bf 1px solid; BORDER-LEFT: #ffd2bf 1px solid; PADDING-BOTTOM: 5px; LINE-HEIGHT: 20px; BACKGROUND-COLOR: #ffffff; PADDING-LEFT: 0px; WIDTH: 100px; PADDING-RIGHT: 0px; FONT-SIZE: 12px; BORDER-TOP: #ffd2bf 1px solid; BORDER-RIGHT: #ffd2bf 1px solid; PADDING-TOP: 5px}.qun SPAN { COLOR: #ff6600; FONT-SIZE: 13px; FONT-WEIGHT: bold}
首页我把微信二维码隐藏掉了 就正常了,但是其它页面还是错位的
把你的
首页我把微信二维码隐藏掉了 就正常了,但是其它页面还是错位的
太神奇了...不是id class的冲突 也没有在外面包一个div。
原来是放到header.php里面的 现在放到footer.php的最下面就好了...