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

最新推荐文章于 2023-03-25 10:40:12 发布
最新推荐文章于 2023-03-25 10:40:12 发布
阅读量768 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mofu3227/article/details/53981836
版权
原先网页都正常显示的，后来include了一个在线客服.php进来。
Firefox、IE11、360兼容模式中正常；360极速模式、Google Chrome中就会错位，但是点击右键“审查元素”就又都会恢复正常...
请问是什么原因？

下面是include进来的一个div 


<DIV id=kefu οnmοuseοver=toBig() οnmοuseοut=toSmall()>

<TABLE style="FLOAT: left" border=0 cellSpacing=0 cellPadding=0 width=157>

  <TBODY>

  <TR>

    <TD class=main_head height=39 vAlign=top>&nbsp;</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>&nbsp;</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.οnlοad=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

}


网址是 中国数控网
mofu3227
关注
TortoiseSVN (Subversion客户端) 使用手册(中文) （四）
zjyzfn的专栏
01-31 322
4.4 提交修改 提交修改：将工作副本的修改更新到版本库的操作，提交修改的相关操作在提交对话框中进行。可以使用【TortoiseSVN】→【更新】/【检查修改】命令实现。4.4.1 提交对话框 选择需要提交的文件和/或文件夹→【TortoiseSVN】→【提交】，即可打开提交对话框。 提交对话框主要分为4个区域，顶部显示将要提交到的版本库URL路径，往下分别是描述信息（也即日志）、项目列表、复选框及操作按钮。 一．项目列表 定制列：项目列表中的列是可定制并保持的，可右键单击列标题→单击特定条目即可启用/禁用
web学习笔记
刘群智的博客
07-27 1万+
常用属性............................................................................................ 1 Html基础........................................................................................... 3 ...
css审查元素一直有一块html,css父元素定位后子元素审查元素位置错乱
weixin_34015347的博客
06-30 144
父元素position:fixed写了一个遮罩层，里面的子元素审查元素位置错乱，在超出这个元素的位置还能定位到这个元素直播平台授权.toolstip {position: fixed;left: 0;right: 0;bottom: 0;top: 0;width: 100%;background-color: rgba(0,0,0, 0.3);display: flex;justify-conte...
解决网页设计中网页元素错乱的问题
weixin_30378311的博客
03-14 339
以下是登录页面的HTML代码 在网页设计中在body标签加入clear：both属性清除浮动以免导致页面元素错乱 如果在header标签加入background-color或者其它属性有可能会发生浏览器不兼容问题以导致无法进行正常显示 <!DOCTYPE html><html> <head> <meta name="viewport" cont...
网页审查元素css乱码,css父元素定位后子元素审查元素位置错乱
weixin_36246992的博客
08-04 268
父元素position:fixed写了一个遮罩层，里面的子元素审查元素位置错乱，在超出这个元素的位置还能定位到这个元素直播平台授权.toolstip {position: fixed;left: 0;right: 0;bottom: 0;top: 0;width: 100%;background-color: rgba(0,0,0, 0.3);display: flex;justify-conte...
阻止/恢复页面元素的事件
bookscape的专栏
06-03 305
var events_b = $._data($('#id')[0],'events'); //储存 $._data($('#id')[0],'events',{}); //解绑 $._data($('#id')[0],'events',events_b); //恢复 作者：平仄链接：https://www.zhihu.com/question/21891734/answer/...
HTML图片错位重叠,css html网页错位原因解决方法
weixin_29103027的博客
05-31 1513
(HTML)DIV+CSS网页错位的原因与解决方式每每咱们会碰着我们要设置装备摆设在一行显露的布局，却因为各种缘由组成为了错位，看到终归是在一行的结尾一个盒子组织错位掉下去了(如下图)。错位一3错位零落与1与2下方错位二 网页组织错位树模形成DIV CSS网页组织错位的起因笼统有两种状况，一种是宽度计算过失，一种是IE BUG形成，额定是IE6与IE7。然后咱们挨着为人人引见错位与操持错位方法。...
html+css+js基础问答
qq_43751465的博客
08-26 5205
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
A002-185-2531
GONGZIXUY的博客
01-05 1384
目录 第一页作业 2 1.1验收承认(acceptance) 2 1.2要求需要(requirement) 5 1.3最初形态(Prototype) 6 1.4Model(模型) 7 1.5异义词(Homonym) 8 1.6检查(Inspection) 8 1.7敏捷式项目管理(Agile project management) 9 1.8特征(Feature) 10 1.9实体(Entity) 12 1.10错误(Error) 14 第二页作业 15 2.1实现视图(implementation vie
MySQL入门 初学者详细笔记
coralpink的博客
04-22 920
第二章 1.选择语句 SELECT * --选择全部语句,顺序影响 SELECT column 1, column 2 --以列为主 FROM customers --table SELECT DISTINCT column --distinct 自动删去该列中的重复项 SELECT price, price * 1.1 AS 'new price' --用AS关键字为列重命名 --用单引号或者双引号写字符串 2.WHERE 写Boolean语句，判断是否符合条件，筛选 SELECT * FROM
html网页不能审查元素,4种方法JavaScript禁用网页右键菜单和F12审查元素防止源码被扒...
weixin_35135480的博客
07-15 4780
代码1：禁用右键和F12我们的网页常常会被人扒源码，辛辛苦苦写的内容被人复制转账，很是苦恼，用了下面代码可以完美有效屏蔽禁用鼠标右键的菜单，同时也禁用F12审查元素功能。在 HTML 页面中插入一段 JavaScript：代码2：F12打开后提示Paused in debugger以下代码放入js文件1.((function() {var callbacks = [],timeLimit = 50...
网页审查元素
m0_67373485的博客
03-25 3209
我们可以在本地修改HTML信息，为网页”整容”，但是我们修改的信息不会回传到服务器，服务器存储的HTML信息不会改变。我们在页面的哪个位置点击审查元素，浏览器就会为我们定位到相应的HTML位置，进而就可以在本地更改HTML信息。我们可以看到，我们已经顺利获得了该网页的HTML信息。举个容易理解的例子：我们的基因决定了我们的原始容貌，服务器返回的HTML决定了网站的原始容貌。requests.get()方法必须设置的一个参数就是url，因为我们得告诉GET请求，我们的目标是谁，我们要获取谁的信息。
一步搞定无法审查元素
惯性给力
11-27 1万+
有的时候我们想去审查别人的网站的时候 鼠标点击右键无法审查元素的 这时是javascript 中的onselectstart="return false" 被禁止右键了。 如果你想某区域审查元素的话， 就要关掉浏览器的JavaScript浏览器上任何网站运行， 然后在刷新你要审查的网站。 例子：360浏览器 工具--选项--高级设置--网页设置中的网页内容高级设置， 在里面
360安全浏览器右击不显示审查元素 或按F12不弹出开发人员工具的原因和解决方法:设为极速模式
热门推荐
chenhao0568的专栏
10-29 9万+
IE兼容模式  会显示 IE的开发人员工具 极速模式 才会显示谷歌的那种方式
网页英文 错位_网页错位怎么解决？
weixin_39769228的博客
12-19 235
常常我们会遇到我们要设置在一行显示的布局，却因为种种原因造成了错位，看到结果是在一行的最后一个盒子布局错位掉下去了。造成DIV CSS网页布局错位的原因大概有两种情况，一种是宽度计算错误，一种是IE BUG造成，特别是IE6和IE7。接下来我们为大家介绍错位原因与解决错位方法。一、宽度计算错误解决方法宽度计算错误，假如总宽度为500px，有3个盒子，分别css宽度为200px、200px、100p...
CSS中绝对定位导致页面混乱的原因以及解决办法
超域的博客
06-26 6289
实现子元素在父元素中的绝对定位必须满足以下两个条件： 1、父元素要有相对定位属性（position：relative）， 2、子元素设置绝对定位（position：absolute），并且同时加四个方向（top，bottom，left，right）的任意方向的属性值 子元素的绝对定位是包含块“containing block”的知识， 在 10.1 节 (http://www.w3....
更改contenteditable元素属性innerHTML之后 光标位置错乱
最新发布
06-09
更改 `contenteditable` 元素的 `innerHTML` 属性后，光标位置错乱通常是由于浏览器重新渲染导致的。可以尝试在更改 `innerHTML` 属性之前记录光标的位置，然后在更改完成后再将光标位置设置回去。 具体实现方式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值