表格的行高根据我使用的浏览器的不同而有所不同

Question

这段小代码动态创建了一个表，但在不同的浏览器中它的工作方式并不相同。理想情况下，我需要动态设置行高（这本身就是一个我无法解决的问题），但是在尝试弄清楚如何做到这一点时，我发现我的表格以不同的方式显示，具体取决于我使用的浏览器使用。它适用于 Firefox 和 IE，但不适用于 Chrome。在 Chrome 中，第一行几乎占据了表格的全部高度，为其他行留下了很少的空间。

顺便说一下，这段代码只创建了 3 行，但稍后它将擦除其原始内容并创建 5 行具有不同内容的行（擦除和重新创建部分未在此处实现，但它已在另一个代码中完成并工作）。我被这个 tr 高度问题困住了......

    CreateRow(0);

    CreateRow(1);

    CreateRow(2);

    

    function CreateRow(iRow){

        var Html_Content = document.getElementById("id_MainTable").innerHTML ;

        Html_Content += StandardRow(iRow);

        document.getElementById("id_MainTable").innerHTML = Html_Content;

    }

    function StandardRow(iRow){

        var iColumn, Html_Content = "";

        for (iColumn = 0; iColumn < 10; iColumn++){

            Html_Content += "<td id='Row" + iRow + "Col" + iColumn + "'>-</td>";

        }

        Html_Content += "</row></table>";     

        return Html_Content;

    }  

    html, body{

        height:100%;

        width:100%;

        margin: 0px;

        padding: 0px;

    }

    table{

        height:100%;

        width:100%;

    }  

    table tr{

        height:33%;

    }

    table td{

        width: 10%;

        font-size: 5vmin;

        text-align: center;

        border: solid 1px;

    }

    <table id = "id_MainTable"></table>

Answer 1

一旦您纠正了表格标签问题，您可能仍然会遇到高度问题。我过去曾经使用过格式正确的 html。我的解决方案是为基于 Mozilla 的浏览器分配自己的属性值。例子：table tr{  height:33%;}@-moz-document url-prefix('') {  table tr{    height:30%;  }}可能有更好的方法，但这对我来说一直有效。希望有帮助。

Answer 2

不止一个问题你不开始你的行<tr>你用</row></table>而不是关闭你的行</tr>Chrome 将尝试“修复”无效的 HTML。您需要添加一个，<tbody></tbody>因为 Chrome 现在插入了多个 tbodiesCreateRow(0);CreateRow(1);CreateRow(2);function CreateRow(iRow) {&nbsp; document.getElementById("id_MainTable").innerHTML += StandardRow(iRow);}function StandardRow(iRow) {&nbsp; let Html_Content = ["<tr>"]; // I prefer using an array&nbsp; for (let iColumn = 0; iColumn < 10; iColumn++) {&nbsp; &nbsp; Html_Content.push("<td id='Row" + iRow + "Col" + iColumn + "'>-</td>");&nbsp; }&nbsp; Html_Content.push("</tr>");&nbsp; return Html_Content.join("");}html,body {&nbsp; height: 100%;&nbsp; width: 100%;&nbsp; margin: 0px;&nbsp; padding: 0px;}table {&nbsp; height: 100%;&nbsp; width: 100%;}table tr {&nbsp; height: 33%;}table td {&nbsp; width: 10%;&nbsp; font-size: 5vmin;&nbsp; text-align: center;&nbsp; border: solid 1px;}<table>&nbsp; <tbody id="id_MainTable"></tbody></table>

Answer 3

在这个函数中：function StandardRow(iRow){&nbsp; &nbsp; &nbsp; &nbsp; var iColumn, Html_Content = "";&nbsp; &nbsp; &nbsp; &nbsp; for (iColumn = 0; iColumn < 10; iColumn++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Html_Content += "<td id='Row" + iRow + "Col" + iColumn + "'>-</td>";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; Html_Content += "</row></table>";&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; return Html_Content;&nbsp; &nbsp; }&nbsp;table您错误地关闭了标签。你的结果会是这样的：<table id = "id_MainTable"><td><td></row></table><td><td></row></table><td><td></row></table></table>另外你应该Html_Content开始<tr>将函数更改为：function StandardRow(iRow){&nbsp; &nbsp; &nbsp; &nbsp; var Html_Content = "<tr>";&nbsp; &nbsp; &nbsp; &nbsp; for (var iColumn = 0; iColumn < 10; iColumn++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Html_Content += "<td id='Row" + iRow + "Col" + iColumn + "'>-</td>";&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; Html_Content += "</tr>";&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; return Html_Content;&nbsp; &nbsp; }