在 Firefox/IE/Chrome 中设置相同的 td

【问题标题】：Make a td the same in Firefox/IE/Chrome在 Firefox/IE/Chrome 中设置相同的 td
【发布时间】：2019-02-05 17:18:30
【问题描述】：

我有一个表格，我为每个<td>s 指定了一些样式以具有背景颜色等。它们中的数据量也不同。具体来说，我有两个相邻的<td>s，其中一个包含使其比另一个更高的内容。在 Chrome 中，较短的 <td> 与较高的 <td> 具有相同的高度，包括样式和所有内容。在 Firefox/IE 中，较短的 <td> 只占用所需的空间。我试过给<td> height: 100%，但这并没有真正做任何事情。我还尝试在 td 中使用 height: 100% 的 div，但这也没有做任何事情。

我怎样才能让它在所有三个浏览器中表现相同？我不一定需要它是任何一种方式，尽管实际上能够控制它会很好。我主要只需要它的行为相同。

这是最终的 html。这可能有点难以理解，因为里面有很多淘汰赛的东西。

    <div class="container">
    <div class="inner-container">
<table>
        <tbody><tr><td style="text-align: right"><input type="button" id="manageSaveButtonTop" class="journal-button manage-save-button manage-save-button-top" value="Save"></td></tr>
        <tr>
            <td id="template" class="outer-div">
                    <h6>Templates</h6>
                    <ol class="journalTree sortable template manageJournal ui-sortable" >
<li class="group mine template">
    <div>
        <span class="itemText" data-bind="textToTextbox: Description">New Group</span>
</li>

<li class="no-nest mine template">
    <div>
        <span class="itemText" data-bind="textToTextbox: Description">New Objective</span>
</li>

                    </ol>
                <!--</div>-->
            </td>
            <td id="myJournal" class="outer-div droppable ui-droppable">
                <!--<div id="myJournal" class="outer-div droppable ui-droppable">-->
                    <h6>My Journal</h6>
                    <ol class="journalTree sortable myJournal manageJournal ui-sortable">
<li class="group mine ">
    <div>
        <span class="itemText" data-bind="textToTextbox: Description">New Group</span>
</li>

<li class="no-nest deleted ">
    <div>
        <span class="itemText" data-bind="textToTextbox: Description">Blank Objective</span>
</li>

<li class="group deleted ">
    <div>
        <span class="itemText" data-bind="textToTextbox: Description">Deleting Group</span>
    <input type="text" style="display:none" class="itemTextBox"></div>
        <ol >
<li class="no-nest deleted ">
    <div>
        <span class="itemText" data-bind="textToTextbox: Description">Test Deleting</span>
</li>
        </ol>
</li>

<li class="group deleted ">
    <div>
        <span class="itemText" data-bind="textToTextbox: Description">New Group</span>
    <input type="text" style="display:none" class="itemTextBox"></div>
        <ol>
<li class="no-nest deleted ">
    <div>
        <span class="itemText" data-bind="textToTextbox: Description">New Objective</span>
</li>

        </ol>
</li>

                    </ol>
                <!--</div>-->
            </td>
        </tr>
        <tr><td style="text-align: right"><input type="button" id="manageSaveButtonBottom" class="journal-button manage-save-button bottom" value="Save"></td></tr>
    </tbody></table></div></div>

​

我无法将高度设置为特定高度，因为右表的高度会动态变化（通过向其添加更多内容）。这是相关的 CSS：

#myJournal
{
    border: 1px solid black;
    display: inline-block;
    vertical-align: top;
    background-color: #dde5e4;
    width: 650px;
    height: 100%;
    border-radius: 25px;
    -moz-border-radius: 25px;
}


#template
{
    border: 1px solid black;
    display: inline-block;
    vertical-align: top;
    background-color: #dde5e4;
    width: 500px;
    height: 100%;
    margin-right: 100px;
    border-radius: 25px;
    -moz-border-radius: 25px;
}

【问题讨论】：

• 我以前只是 div，没有表格，但是当我切换到表格时，其他格式的东西变得容易多了。
• 请展示一个实际发生的例子。
• 我们只支持 IE9。所以，IE9。
• 我刚刚重新测试了它，它也是IE9的全高。以前不是这样的。我改变的东西改变了这一点。此外，在 Chrome/Firefox 中，第一个和最后一个 中的保存按钮显示在最右侧，而在 I9 中，它们显示在第一个 上方。所以，这很好。
• 这是一个显示此问题的 jsfiddle（以及 IE 中的更多问题）：jsfiddle.net/UP2Jv