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

php中文网
发布: 2016-06-23 13:58:35
原创
1482人浏览过

原先网页都正常显示的,后来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">@@##@@</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="">@@##@@</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="">@@##@@</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="">@@##@@</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">@@##@@</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.height='100%';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}
登录后复制


网址是 中国数控网


回复讨论(解决方案)

首页我把微信二维码隐藏掉了 就正常了,但是其它页面还是错位的

把你的

首页我把微信二维码隐藏掉了 就正常了,但是其它页面还是错位的


某些 id class冲突了!  

太神奇了...不是id class的冲突 也没有在外面包一个div。
原来是放到header.php里面的  现在放到footer.php的最下面就好了...

网页元素位置错乱 点击“审查元素”恢复网页元素位置错乱 点击“审查元素”恢复网页元素位置错乱 点击“审查元素”恢复网页元素位置错乱 点击“审查元素”恢复网页元素位置错乱 点击“审查元素”恢复
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号