HTML和JavaScript [英] HTML and JavaScript
本文介绍了HTML和JavaScript的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Firefox的问题，但与Internet Explorer确定。
我尝试了很多，但尚未解决。请帮帮我。
实际上这里的问题在于，它在firefox中没有格式化顺序。但在Internet Explorer中显示。
< html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< title> HOME< / title>
< link rel =stylesheethref =dropdown.csstype =text / css/>
< script type =text / javascriptsrc =dropdown.js>< / script>
<！ - / *下面的javascript函数是处理Enter键表单提交* / - >
< script language =javascript>
< / script>
< script type =text / javascript>
function change1（）{
document.getElementById（'id1'）。style.display ='block'
document.getElementById（'id2'）。style.display ='none'
document.getElementById（'id3'）。style.display ='block'
document.getElementById（'id4'）。style.display ='none'
document.getElementById（'body1' ）.style.display ='block'
document.getElementById（'body2'）。style.display ='none'
document.home_page.reg_id.focus（）;
}
function change2（）{
document.getElementById（'id1'）。style.display ='none'
document.getElementById（'id2'）。style.display ='block'
document.getElementById（'id3'）。style.display ='none'
document.getElementById（'id4'）。style.display ='block'
document。 getElementById（'body1'）。style.display ='none'
document.getElementById（'body2'）。style.display ='block'
document.home_page.uname.focus（）;
}
< / script>
<！ - 输入键处理功能的结束。 - >
< / head>
< form method =POSTaction =home_page.phpname =home_page>
< table width =320height =200border =1>
< tr style =width：315px;对齐= 中心 >
< td align =centerstyle =background-repeat：no-repeat; bgcolor =＃000099width =155height =28id =id1onClick =change1（）>< / td>
< td align =centerbgcolor =＃009900style =display：none; background-repeat：no-repeat; width =155height =28id =id2onClick =change1（）>< / td>
< td align =centerstyle =background-repeat：no-repeat; bgcolor =＃009900width =155height =28id =id3onClick =change2（）>< / td>
< td align =centerbgcolor =＃000099style =display：none; background-repeat：no-repeat; width =155height =28id =id4onClick =change2（）>< / td>
< / tr>
< tr>
< td colspan =2id =body1>
< table width =318height =44border =0>
< tr>
< td width =318height =40align =center>
< span class =loginstyle3>注册状态< / span>
< / td>
< / tr>
< / table>< / td>
< td colspan =2id =body2style =display：none;>
< table width =318height =45border =0>
< tr>
< td width =107height =41align =centerbackground =images / glossy1grey.gif>
< span class =loginstyle3>登录条目< / span>
< / td>
< / tr>
< / table>
< / td>
< / tr>
< / table>
<！ - 下面的代码块是在登录尝试后设置登录页面并且失败 - >
< script type =text / javascript> change2（）< / script>
< / form>
< / body>
< / html>
解决方案
我不认为设置表格单元格code>< td> 元素）显示为display：block在Firefox中运行良好。表格单元格有它们自己的显示类型，如果你使它们成为display：block，浏览器就会按照你的要求去做。请注意，display：block是 not 简单地与display：none相反。尝试使用display：table-cell而不是阻止。
编辑—我已经试过了，这肯定是问题所在。
Problem in Firefox, but ok with Internet Explorer.
I tried a lot but not solve yet. Please help me.
Actually the problem over here is that, it is not in formatte order in firefox. but is displaying on in internet explorer.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HOME</title>
<link rel="stylesheet" href="dropdown.css" type="text/css" />
<script type="text/javascript" src="dropdown.js"></script>
<!-- /* below javascript function is to handle the "Enter" key form submission */ -->
<script language="javascript">
</script>
<script type="text/javascript">
function change1(){
document.getElementById('id1').style.display='block'
document.getElementById('id2').style.display='none'
document.getElementById('id3').style.display='block'
document.getElementById('id4').style.display='none'
document.getElementById('body1').style.display='block'
document.getElementById('body2').style.display='none'
document.home_page.reg_id.focus();
}
function change2(){
document.getElementById('id1').style.display='none'
document.getElementById('id2').style.display='block'
document.getElementById('id3').style.display='none'
document.getElementById('id4').style.display='block'
document.getElementById('body1').style.display='none'
document.getElementById('body2').style.display='block'
document.home_page.uname.focus();
}
</script>
<!-- end of "enter" key handling functions. -->
</head>
<form method="POST" action="home_page.php" name="home_page">
<table width="320" height="200" border="1">
<tr style="width:315px;" align="center">
<td align="center" style="background-repeat:no-repeat;" bgcolor="#000099" width="155" height="28" id="id1" onClick="change1()"></td>
<td align="center" bgcolor="#009900" style="display:none; background-repeat:no-repeat;" width="155" height="28" id="id2" onClick="change1()"></td>
<td align="center" style="background-repeat:no-repeat;" bgcolor="#009900" width="155" height="28" id="id3" onClick="change2()"></td>
<td align="center" bgcolor="#000099" style="display:none; background-repeat:no-repeat;" width="155" height="28" id="id4" onClick="change2()"></td>
</tr>
<tr>
<td colspan="2" id="body1">
<table width="318" height="44" border="0">
<tr>
<td width="318" height="40" align="center">
<span class="loginstyle3">Registration Status</span>
</td>
</tr>
</table></td>
<td colspan="2" id="body2" style="display:none;">
<table width="318" height="45" border="0">
<tr>
<td width="107" height="41" align="center" background="images/glossy1grey.gif">
<span class="loginstyle3">Login Entry </span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- below block of code is to set login page after login attempt and failed -->
<script type="text/javascript">change2()</script>
</form>
</body>
</html>
解决方案
I don't think that setting table cells (<td> elements) to be "display: block" is going to work out well in Firefox. Table cells have their own "display" type, and if you make them "display: block" the browser is going to do what you ask. Note that "display: block" is not simply the opposite of "display: none".
Try using "display: table-cell" instead of "block".
edit — I've tried this and it's definitely what the problem is.
这篇关于HTML和JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
