我正在尝试制作一个表单，就像问卷一样，然后根据用户如何回答问题给出答案。这是我为我的驾驶教练工作的网站，它允许我获得免费课程！
无论如何，我的布局和表格在最新的Chrome和Firefox中运行得非常出色，但是最新的IE将我的桌子放在了一边。
所以这是代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Course calculator to estimate the length of the driving course">
<meta name="keywords" content="driving courses in blackpool, driving courses in north west, learn to drive on holiday, length of driving course">
<title>Cruisin Driving Courses</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="banner">
<img src="images/logo.jpg" alt="img" width="1000px" height="280px"/>
</div>
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="course_information.html">Course Information</a></li>
<li><a href="theory.html">Theory Test</a></li>
<li><a href="independent_driving.html">Independent Driving</a></li>
<li><a href="accommodation.html">Accommodation</a></li>
<li><a href="travel.html">Travel</a></li>
</ul>
</div>
<div id="contentbody">
<div>
<h1>
Time
</h1>
</div>
<div>
<h2>
Below is the course calculator, this will give you a guide as to how long your driving course should take.</h2>
</div>
<script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript" src="js/scriptaculous.js"></script>
<script type="text/javascript" src="js/unittest.js"></script><script type="text/javascript" src="js/calc.js"></script>
<script type="text/javascript" src="js/calculator.js"></script>
<form id="checklist" name="checklist"><center>
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<span style="font-size: medium;">
Q1) When was the last time you drove a car?
</span>
</td>
</tr>
<tr>
<td>a)
<input
name="Q1Check"
type="radio" onclick="qupdate('Q1.1');"
/> Never.
</td>
</tr>
<tr>
<td>b)
<input onclick="qupdate('Q1.2');"
type="radio"
name="Q1Check"
/> Over a year ago.
</td>
</tr>
<tr>
<td>c)
<input onclick="qupdate('Q1.3');" type="radio" name="Q1Check" /> Less than six months ago.</td>
</tr>
<tr>
<td>d)
<input onclick="qupdate('Q1.4');" type="radio" name="Q1Check" /> Less than a month ago.</td>
</tr>
</tbody>
</table>
</form>
<hr />
<form>
<table>
<tbody>
<tr>
<td><span style="font-size: medium;">Q2) Roughly how many hours driving experience do you have?</span></td>
</tr>
<tr>
<td>a)
<input name="Q1Check" type="radio" onclick="qupdate('Q2.1');" /> 0-5 hours.</td>
</tr>
<tr>
<td>b)
<input onclick="qupdate('Q2.2');" type="radio" name="Q1Check" /> 5-15 hours.</td>
</tr>
<tr>
<td>c)
<input onclick="qupdate('Q2.3');" type="radio" name="Q1Check" /> 15-30 hours.</td>
</tr>
<tr>
<td>d)
<input onclick="qupdate('Q2.4');" type="radio" name="Q1Check" /> 30+ hours.</td>
</tr>
</tbody>
</table>
</form>
<hr />
<form>
<table>
<tbody>
<tr>
<td><span style="font-size: medium;">Q3) Manoeuvres - Which best describes your skill level?</span></td>
</tr>
<tr>
<td>a)
<input name="Q1Check" type="radio" onclick="qupdate('Q3.1');" /> Not done them.</td>
</tr>
<tr>
<td>b)
<input onclick="qupdate('Q3.2');" type="radio" name="Q1Check" /> Need a lot of practice.</td>
</tr>
<tr>
<td>c)
<input onclick="qupdate('Q3.3');" type="radio" name="Q1Check" /> Need to brush up a little.</td>
</tr>
<tr>
<td>d)
<input onclick="qupdate('Q3.4');" type="radio" name="Q1Check" /> At near to test standard.</td>
</tr>
</tbody>
</table>
</form>
<hr />
<form>
<table>
<tbody>
<tr>
<td><span style="font-size: medium;">Q4) When did you last take a driving test?</span></td>
</tr>
<tr>
<td>a)
<input name="Q1Check" type="radio" onclick="qupdate('Q4.1');" /> Never.</td>
</tr>
<tr>
<td>b)
<input onclick="qupdate('Q4.2');" type="radio" name="Q1Check" /> 6+ months ago.</td>
</tr>
<tr>
<td>c)
<input onclick="qupdate('Q4.3');" type="radio" name="Q1Check" /> 2 to 6 months ago.</td>
</tr>
<tr>
<td>d)
<input onclick="qupdate('Q4.4');" type="radio" name="Q1Check" /> 1 month ago.</td>
</tr>
</tbody>
</table>
</form>
<hr />
<form>
<table>
<tbody>
<tr>
<td><span style="font-size: medium;">Q5) Roundabouts - What best describes your skill level?</span></td>
</tr>
<tr>
<td>a)
<input name="Q1Check" type="radio" onclick="qupdate('Q5.1');" /> Not Done them.</td>
</tr>
<tr>
<td>b)
<input onclick="qupdate('Q5.2');" type="radio" name="Q1Check" /> Need a lot of practice.</td>
</tr>
<tr>
<td>c)
<input onclick="qupdate('Q5.3');" type="radio" name="Q1Check" /> Need to brush up a little.</td>
</tr>
<tr>
<td>d)
<input onclick="qupdate('Q5.4');" type="radio" name="Q1Check" /> At near test standard.</td>
</tr>
</tbody>
</table>
</form>
<hr />
<form>
<table>
<tbody>
<tr>
<td><span style="font-size: medium;">Q6) How old are you? (Age <em>may</em> affect your ability to learn). How old are you?</span></td>
</tr>
<tr>
<td>a)
<input name="Q1Check" type="radio" onclick="qupdate('Q6.1');" /> 60 - 75.</td>
</tr>
<tr>
<td>b)
<input onclick="qupdate('Q6.2');" type="radio" name="Q1Check" /> 40 - 59.</td>
</tr>
<tr>
<td>c)
<input onclick="qupdate('Q6.3');" type="radio" name="Q1Check" /> 26 - 39.</td>
</tr>
<tr>
<td>d)
<input onclick="qupdate('Q6.4');" type="radio" name="Q1Check" /> 17 - 25.</td>
</tr>
</tbody>
</table>
</form>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td><span style="font-size: medium;"><strong>Recommended Course Length:</strong>
<input id="days" class="textInput" style="background-color: transparent; border-width: 0;" type="TEXT" name="days" readonly="readonly" size="10" maxlength="10" /></span></td>
</tr>
</tbody>
</table>
</center>
<table>
<tbody>
<tr>
<td><input id="q1scr" style="color: transparent; background-color: transparent; border-width: 0;" type="TEXT" name="Q1Scr" value="0" readonly="readonly" size="1" /></td>
<td><input id="q2scr" style="color: transparent; background-color: transparent; border-width: 0;" type="TEXT" name="Q2Scr" value="0" readonly="readonly" size="1" /></td>
<td><input id="q3scr" style="color: transparent; background-color: transparent; border-width: 0;" type="TEXT" name="Q3Scr" value="0" readonly="readonly" size="1" /></td>
<td><input id="q4scr" style="color: transparent; background-color: transparent; border-width: 0;" type="TEXT" name="Q4Scr" value="0" readonly="readonly" size="1" /></td>
<td><input id="q5scr" style="color: transparent; background-color: transparent; border-width: 0;" type="TEXT" name="Q5Scr" value="0" readonly="readonly" size="1" /></td>
<td><input id="q6scr" style="color: transparent; background-color: transparent; border-width: 0;" type="TEXT" name="Q6Scr" value="0" readonly="readonly" size="1" /></td>
<td><input style="color: transparent; background-color: transparent; border-width: 0;" type="TEXT" name="total" value="0" readonly="readonly" size="3" /></td>
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>
我看过一些消息，人们说你不能在表格中嵌套表格，但我真的不认为这就是我在这里所做的。我想我只是把表格放在一张桌子里。那么有没有人有任何想法，就像我说它在Chrome和Firefox中表现得很好，但是因为我的知识而失去了IE。我只是习惯于在线方面而不是html / css所以我不知道我是否需要浏览器代码或类似的东西！
以下是您需要的CSS文件：
@charset "utf-8";
/* CSS Document */
body {
background-color:#000000;
width:1000px;
margin: 0 auto;
padding:35px 0px 0px 0px;
}
#banner {width:1000px;
height:280px;
border-bottom-color:#000 2px;
}
#nav {border-bottom:#000 1px;
padding:10px;
display:inline-block;
background:#2c2c2c;
height:20px;
width:980px}
#nav ul {display:inline;
}
#nav ul li {display: inline;
padding:0px 5px;
}
#nav ul li a {display:inline;
text-decoration: none;
font-size:12px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: white;
padding: 10px 10px 10px 10px;
}
#nav ul li a:hover{ background-color: white;
color:#2c2c2c;
padding: 10px 10px 10px 10px;
height: 20px;}
#nav ul li a:active{ background-color: white;
color:#2c2c2c;
height: 20px;
color: #000; }
#contentbody {float:left;
background:#0b0b0b;
width:1000px;
}
#contentbody p{padding:0px 200px 10px 200px;
font-size:15px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:white;}
a{
color:#F60;
}
#theorybooks {
float:left;
padding:0px 0px 0px 200px;
margin:0px 20px 20px 0px;
}
#contentbody h1{padding:50px 0px 30px 200px;
font-family:Verdana, Geneva, sans-serif;
color:white;
font-size:32px;
}
#contentbody h2{padding:0px 0px 50px 200px;
font-size:12px;
font-family:Verdana, Geneva, sans-serif;
color:white;
}
#contentbody a{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
}
#leftmarg {display:block;
float:left;
padding:10px 10px 10px 200px;
width:290px;
}
#rightmarg {display:block;
float:right;
padding:10px 200px 10px 10px;
width:290px;
}
#margintextprop {float:left;
background:#0b0b0b;
width:1000px;
}
#leftmargtext {display:block;
float:right;
font-size:15px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:white;
padding:0px 200px 10px 10px;
width:290px;
}
#rightmargtext {display:block;
float:right;
font-size:15px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:white;
padding:0px 10px 10px 200px;
width:290px;
}
#checklist{
color:#FFF;
}
#days{
color:#FFF;
}
#table {
color:#FFF;
padding:0px 200px 0px 200px;
}
#contactform { margin:0; padding:0px 200px 0px 200px;}
#contactform * { color:#7a7a7a;}
#contactform ol { margin:0; padding:0px 200px 0px 200px; list-style:none;}
#contactform li { margin:0; padding:0; background:none; border:none; display:block;}
#contactform li.buttons { margin:5px 0 5px 0;}
#contactform label { float:left; margin:0; width:150px; padding:5px 0; font:normal 12px Arial, Helvetica, sans-serif; color:#838383; text-transform:capitalize;}
#contactform label span { font:normal 10px Arial, Helvetica, sans-serif;}
#contactform input.text { width:280px; border:1px solid #e9e9e9; margin:5px 0; padding:5px 2px; height:20px; background:#f8f8f8; float:left;}
#contactform textarea { width:280px; border:1px solid #e9e9e9; margin:10px 0; padding:2px; background:#f8f8f8; height:150px; float:left;}
#contactform li.buttons input { padding:3px 0; margin:none; border:0; color:#FFF;}
* /// EDIT \ *
我设法让它在所有浏览器中都能运行。我遇到的第一个问题是我有嵌套表格。我想我需要这个，因为没有这样做，我的径向按钮输入会取消之前的那个。相反，我将每个问题的径向按钮输入的名称分别更改为Q1Check和Q2Check（通过代码来检查我的意思）。一旦完成，我只需要一个包含所有内容的表单。这解决了我的问题，文本是不可见的，并排序了一些布局问题。要完成布局问题，我只需更改<tbody> <tbody align:left）。这对我有用。
我要感谢所有帮助过我的人，给了我支持和建议。