Heim >Web-Frontend >HTML-Tutorial >网页总是有上边距，且JS脚本只能用于IE_html/css_WEB-ITnose
网页总是有上边距，且JS脚本只能用于IE_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:17:571195Durchsuche
最近需要做一个效果，点击按钮(图片)，隐藏左边菜单和上面的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大家一起试试。。。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：如何让DIV 和DIV 相分离_html/css_WEB-ITnoseNächster Artikel：有关命名空间问题_html/css_WEB-ITnose