火狐第二列具有一個換行符

-1

我有2個下拉列表，其中一個將頁上顯示根據下拉的選擇：火狐第二列具有一個換行符

在Firefox，我得到的形式：選擇標記在第二線路用於下拉菜單。在鉻和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>&nbsp;&nbsp;</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>

來源

2016-04-12 Joshi

分享工作的例子。這意味着**呈現** html（不是你的模板代碼）和附加的CSS。您可以使用stacksnippets或外部服務，如jsfiddle.net。用一個顯示問題的例子來編輯這個問題，或者這應該被關閉爲** offtopic **。 –

閱讀此以獲取更多信息http://stackoverflow.com/help/how-to-ask –

這不是一個原始的html-javascript-css代碼 – cor

Chrome的糾錯修復這個問題對你，但問題依然存在。這個問題不僅在Firefox中。

你有幾個問題：

您有多個<tr>標籤 - 你說你想有這樣一個單行？
如果您需要多個<tr>標籤，則表明您沒有使用colspan。
您正在使用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>&nbsp;&nbsp;</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>

來源

2016-04-12 11:58:40 Pegues

顯示：表格單元格作品 – Joshi

我很高興它爲你工作。並且請確保清理你的表格html。如果您想測試您的工作，我爲您提供了一個JSFiddle。快樂編程！ – Pegues

火狐第二列具有一個換行符

回答

相關問題