我有 2 个下拉菜单，其中一个将根据下拉菜单的选择显示在页面上:
在 firefox 中，我在第二行的两个下拉菜单中都得到了 form:select 标记。在 chrome 和 IE 中，它按预期完美运行。
var flag = 1;
function showHide() {
if (flag == 1) {
document.getElementById('dbTypeDropdown1').style.display = "none";
document.getElementById('dbTypeDropdown2').style.display = "block";
document.getElementById('dbTypelable1').style.display = "none";
document.getElementById('dbTypelable2').style.display = "block";
flag = 0;
} else {
document.getElementById('dbTypeDropdown1').style.display = "block";
document.getElementById('dbTypeDropdown2').style.display = "none";
document.getElementById('dbTypelable1').style.display = "block";
document.getElementById('dbTypelable2').style.display = "none";
flag = 1;
}
}
function loadHide() {
document.getElementById('dbTypeDropdown1').style.display = "block";
document.getElementById('dbTypeDropdown2').style.display = "none";
document.getElementById('dbTypelable1').style.display = "block";
document.getElementById('dbTypelable2').style.display = "none";
}<body onLoad=loadHide()>
<table>
<tr>
<td>
<label path="osType" style="text-align: left;" id="osTypelable"><b>Product Type</b> </label>
</td>
<td>
<select path="osType" style="width:205px; height:25px" id="osTypeDropdown" onChange="showHide()">
<option value="windows">Windows</option>
<option value="linux">Linux</option>
</select>
</td>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td id="dbTypelable1">
<label path="dbType1" style="text-align: left;"><b>Database Type</b>
</label>
</td>
<td id="dbTypeDropdown1">
<select path="dbType1" style="width:205px; height:25px">
<option value="embedded">Embedded</option>
<option value="mssql2008">MS SQL 2008</option>
<option value="mssql2012">MS SQL 2012</option>
<option value="mssql2014">MS SQL 2014</option>
<option value="oracle11">Oracle 11g</option>
<option value="oracle12">Oracle 12c</option>
</select>
</td>
<td id="dbTypelable2">
<label path="dbType2" style="text-align: left;"><b>Database Type</b>
</label>
</td>
<td id="dbTypeDropdown2">
<select path="dbType2" style="width:205px; height:25px;">
<option value="embedded">Embedded</option>
<option value="oracle11">Oracle 11g</option>
<option value="oracle12">Oracle 12c</option>
</select>
</td>
</tr>
</table>
</body>最佳答案
Chrome 的错误修正正在为您解决问题，但问题仍然存在。问题不仅出现在 Firefox 中。
你有几个问题:
- 您有多个
<tr>标签 - 你说你想把它放在一行中？ - 您没有使用
colspan如果你需要多个<tr>标签。 - 您正在使用
display: block;- 你不能使用display: block在用于切换的表格元素上，因为它会破坏表格单元格的工作方式。您可以使用display: table-cell和display: none, 但不是display: block.
这是您修改后的 HTML:(JSFiddle:https://jsfiddle.net/1ntn0yh5/)
<table>
<tr>
<td>
<label path="osType" style="text-align: left;" id="osTypelable"><b>Product Type</b> </label>
</td>
<td>
<select path="osType" style="width:205px; height:25px" id="osTypeDropdown" onChange="showHide()">
<option value="windows">Windows</option>
<option value="linux">Linux</option>
</select>
</td>
<td id="dbTypelable1">
<label path="dbType1" style="text-align: left;"><b>Database Type</b>
</label>
</td>
<td id="dbTypeDropdown1">
<select path="dbType1" style="width:205px; height:25px">
<option value="embedded">Embedded</option>
<option value="mssql2008">MS SQL 2008</option>
<option value="mssql2012">MS SQL 2012</option>
<option value="mssql2014">MS SQL 2014</option>
<option value="oracle11">Oracle 11g</option>
<option value="oracle12">Oracle 12c</option>
</select>
</td>
<td id="dbTypelable2">
<label path="dbType2" style="text-align: left;"><b>Database Type</b>
</label>
</td>
<td id="dbTypeDropdown2">
<select path="dbType2" style="width:205px; height:25px;">
<option value="embedded">Embedded</option>
<option value="oracle11">Oracle 11g</option>
<option value="oracle12">Oracle 12c</option>
</select>
</td>
</tr>
</table>
关于javascript - Firefox 第二列有一个换行符，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36569862/