如何使表行/单元格有相同的固定高度没有内部div在它

Question

我正在尝试制作某种"菜单"，但我的菜单项在IE中高度太大。在chrome、firefox和safari上进行了测试，效果很好。我的代码有什么问题?请帮助。我只是想让他们"固定"在高度2em，这是可能的吗?我想知道，这是一个错误在我的页面或只是一个IE错误?

window.onload=init;
window.onpageshow=init;
function init()
{
    var main=document.getElementById("mainview");
    var str=String.fromCharCode(Math.round( Math.random()*(90-65))+65);
    var chr;
    for(var i=0;i<20000;i++)
    {
        chr=String.fromCharCode(Math.round(Math.random()*(122-97))+97);
        if(chr!="<") str=str+chr;
        if(Math.random()<0.02) 
        {  chr=". "+String.fromCharCode(Math.round(Math.random()*(90-65))+65);
        }
        if(Math.random()<0.2) 
        {  str+=" ";
        }
        str+=chr;
    }
    main.innerHTML=str;
}

table
{    width: 100%;
    border-collapse: collapse;
    border-spacing: 0px;
    padding: 0;
    background-color: #fff;
    table-layout: fixed;
}
tr.first
{
    background-color: #000;
    height: 2em;
}
tr.space
{
    height: 1em;
}
td.lmargin
{
    width: 3em;
}
td.label
{
    width: 10em;
    height: 4em;
    background-color: #c30425;
}
td.menu
{
    padding-left: 2em;
    vertical-align: middle;
    height: 2em;    
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
td.dummy
{
    height: auto;
}
td#mainview
{
    padding-left: 2em;
}

<table>
    <tr class="first">
        <td class="lmargin">
        </td>
        <td rowspan="2" class="label">
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td class="lmargin">
        </td>
        <td>
        </td>
    </tr>
    <tr class="space">
        <td class="lmargin">
        </td>
        <td>
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td class="lmargin">
        </td>
        <td class="menu">
            Menu item 1
        </td>
        <td rowspan="6" id="mainview">
        </td>
    </tr>
    <tr>
        <td class="lmargin">
        </td>
        <td class="menu">
            Menu item 2
        </td>
    </tr>
    <tr>
        <td class="lmargin">
        </td>
        <td class="menu">
            Menu item 3
        </td>
    </tr>
    <tr>
        <td class="lmargin">
        </td>
        <td class="menu">
            Menu item 4
        </td>
    </tr>
    <tr>
        <td class="lmargin">
        </td>
        <td class="menu">
            Menu item 5
        </td>
    </tr>
    <tr>
        <td class="lmargin">
        </td>
        <td class="dummy">
        </td>
    </tr>
</table>

Answer 1

更新:发现原因

https://support.microsoft.com/en-us/kb/2312750

如果网页在表格单元格中包含标签，则ROWSPAN属性在Internet Explorer 8中被禁用

似乎IE不允许右单元格大于左单元格。在IE上打开开发者控制台(按F12) change

<td id="mainview" rowspan="6">

<td id="mainview" rowspan="1">