Maison > Article > interface Web > 网页总是有上边距，且JS脚本只能用于IE_html/css_WEB-ITnose
网页总是有上边距，且JS脚本只能用于IE_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 12:17:571169parcourir
最近需要做一个效果，点击按钮(图片)，隐藏左边菜单和上面的Banner条
抄了一个很简单例子回来修改，基本满意，但是存在下面的问题：
1）隐藏Banner的按钮(图片)显示不全，因为这个showtop.html总是消不掉上边距；
2）控制变换图片、FrameSet大小的JS只能在IE下适用；
望大家给予指点
(有八个页面，一个正式的界面效果，代码比较简单，打了AR包，但是上传说太小啦)
(1)index.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Frame Test</title> <style> html,body { margin-left:0; margin-top:0; } </style> </head> <frameset id="mainFrame" rows="70,14,25,*,25" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"> <frame src="top.html" name="top" id="top" title="top" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/> <frame src="showtop.html" name="showtop" id="showtop" title="showtop" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/> <frame src="userinfo.html" name="userinfo" id="userinfo" title="userinfo" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/> <frameset id="main" cols="200,9,*" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"> <frame src="left.html" name="leftmain" id="leftmain" title="leftmain" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/> <frame src="middle.html" name="middlemain" id="middlemain" title="middlemain" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/> <frame src="right.html" name="rightmain" id="rightmain" title="rightmain" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/> </frameset> <frame src="bottom.html" name="bottom" id="bottom" title="bottom" marginwidth="0" marginheight="0" scrolling="NO" frameborder="0" noresize framespacing="0"/></frameset> <noframes> <body> </body> </noframes></html> (2)top.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Frame Left</title> <style> body{ background-color:#004600; } </style> </head> <body> </body> </html> (3)showtop.html
<html> <head> <title>Frame Middle</title><style type="text/css"><!--/*body { background-color:#000000; margin-top:0px; height:9px;}img { margin-top:0px;}-->*/</style> <script language="javascript"> function isShowtop() { if(window.parent.mainFrame.rows == "70,9,25,*,25") { window.parent.mainFrame.rows = "0,9,0,*,0"; document.images['topcontrol'].src='showtop.gif'; } else { window.parent.mainFrame.rows = "70,9,25,*,25"; document.images['topcontrol'].src='hiddetop.gif'; } } </script> </head> <body> <table border="0" align="center"><tr valign="top"><td valign="bottom"><img id="topcontrol" src="hiddetop.gif" onclick="isShowtop()" / alt="网页总是有上边距，且JS脚本只能用于IE_html/css_WEB-ITnose" ></td></tr></table> </body> </html> (4)userinfo.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Frame Left</title> <style> body{ background-color:#00CA00; } </style> </head> <body> </body> </html> (5)left.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Frame Left</title> <style> body{ background-color:#00FF00; } </style> </head> <body> </body> </html> (6)middle.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Frame Middle</title> <style> html,body { margin-left:0; } img { margin-top:200px; } </style> <script language="javascript"> function isShowleft() { if(window.parent.main.cols == "200,9,*") { window.parent.main.cols = "0,9,*"; document.images['imghiddetop'].src='showleft.gif'; } else { window.parent.main.cols = "200,9,*"; document.images['imghiddetop'].src='hiddeleft.gif'; } } </script> </head> <body> <img id="imghiddetop" src="hiddeleft.gif" onclick="isShowleft()" / alt="网页总是有上边距，且JS脚本只能用于IE_html/css_WEB-ITnose" > </body> </html> (7)right.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Frame Right</title> <style> body{ background-color:#0000FF; } </style> </head> <body> </body> </html> (8)bottom.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Frame Left</title> <style> body{ background-color:#AC0000; } </style> </head> <body> </body> </html> 回复讨论(解决方案)
showtop.html错了
是乱改之后的版本………………
原始版本CSS没有被注释，Body里没有Table\tr\td，只有
<html> <head> <title>Frame Middle</title><style type="text/css">body { background-color:#000000; margin-top:0px; height:9px;}img { margin-top:0px;}</style> <script language="javascript"> function isShowtop() { if(window.parent.mainFrame.rows == "70,9,25,*,25") { window.parent.mainFrame.rows = "0,9,0,*,0"; document.images['topcontrol'].src='showtop.gif'; } else { window.parent.mainFrame.rows = "70,9,25,*,25"; document.images['topcontrol'].src='hiddetop.gif'; } } </script> </head> <body> <img id="topcontrol" src="hiddetop.gif" onclick="isShowtop()" / alt="网页总是有上边距，且JS脚本只能用于IE_html/css_WEB-ITnose" > </body> </html> 1.楼主指的上边距是？
2.修改两个JS即可
middle.html
<script type="text/javascript"> function isShowleft() { if (window.parent.window.document.getElementById("main").cols == "200,9,*") { window.parent.window.document.getElementById("main").cols = "0,9,*"; document.images['imghiddetop'].src = 'http://csdnimg.cn/bbs/m/i/yellow_1.gif'; } else { window.parent.window.document.getElementById("main").cols = "200,9,*"; document.images['imghiddetop'].src = 'http://csdnimg.cn/bbs/m/i/yellow_1.gif'; } } </script> -------------------------------------------------------
showtop.html
70,9,25,*,25 ==>70,14,25,*,25
<script type="text/javascript"> function isShowtop() { if (window.parent.window.document.getElementById("mainFrame").rows == "70,14,25,*,25") { window.parent.window.document.getElementById("mainFrame").rows = "0,9,0,*,0"; document.images['topcontrol'].src = 'http://csdnimg.cn/bbs/m/i/yellow_1.gif'; } else { window.parent.window.document.getElementById("mainFrame").rows = "70,14,25,*,25"; document.images['topcontrol'].src = 'http://csdnimg.cn/bbs/m/i/yellow_1.gif'; } } </script> PS：
楼主的花花好多
膜拜下
………………
showtop.html在火狐下没有上边距，在IE下就有
………………
showtop.html在火狐下没有上边距，在IE下就有
IE下有默认边距的。
一般用下面的清除边距，消除差异，然后再设置所有CSS：
* {margin:0;padding:0}
引用 7 楼 ccs02287 的回复:
………………
showtop.html在火狐下没有上边距，在IE下就有
IE下有默认边距的。
一般用下面的清除边距，消除差异，然后再设置所有CSS：
* {margin:0;padding:0}
非常感谢！
其实吧，所谓多浏览器运行，无非就是在frameset做点手脚，只是语法问题而已。
变量=window.parent.document.getElementById（’你的frameset名字‘）；
变量.cols="frame的宽度变化"；这样写个判断就认了，很坑爹的...需要的话我可以传段JS大家一起试试。。。
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：如何让DIV 和DIV 相分离_html/css_WEB-ITnoseArticle suivant：有关命名空间问题_html/css_WEB-ITnose