网页元素位置错乱点击“审查元素”恢复

php中文网

发布时间：2016-06-23 13:58:35

1526人浏览过

来源于php中文网

原创

原先网页都正常显示的，后来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>

css文件是这样的：

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

网址是中国数控网