Question

我正在尝试制作某种“菜单”，但我的菜单项在IE中的高度太大了。在chrome，firefox和safari上测试它，它工作正常。我的代码出了什么问题？请帮忙。我只是希望它们在高度“固定”2em，是否可能在ie？我想知道，这是我的页面中的错误还是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

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

似乎IE不允许右单元格大于左单元格。在IE上打开开发人员控制台（按F12）更改

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

到

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

并看到差异。

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

1 个答案: