-2

次のフィドルは私を夢中にさせています。左の列にコンテンツを追加すると、驚くべき Internet Explorer ブラウザーで右の列ヘッダーの高さが失われます。何か案は？

http://jsfiddle.net/P3wBD/

HTML:

<table class="structure">
    <tbody>
        <tr>
            <td class="left" rowSpan="2">
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            </td>
            <td class="header" colSpan="2">
            </td>
        </tr>
        <tr>
            <td class="content">
            </td>
            <td class="right">
            </td>
        </tr>
    </tbody>
</table>

CSS:

html, body {
    height: 100%;
    font-family: "Signika Negative";
}

.structure {
    width: 100%;
    height: 100%;
}

.structure > tbody > tr:first-child > td:last-child {
    height: 20px;
    line-height: 20px;
    vertical-align: middle;
}

.structure > tbody > tr > td {
    padding: 10px;
}

.structure > tbody > tr > td.left {
    width: 200px;
    background-color: #333;
    padding: 10px 0;
}

.structure > tbody > tr > td.header {
    background-color: #f0f0f0;
    border-bottom: 1px solid #d8d8d8;
    text-align: right;
}

.structure > tbody > tr > td.content {
    border-right: 1px solid #d8d8d8;
}

.structure > tbody > tr > td.right {
    width: 300px;
}
4

1 に答える 1

0

レイアウトにテーブルを使用しないようにしてください。テーブルはそのために設計されていないため、おそらく機能しません。

代わりに、必要に応じて、、、、を使用して絶対測位を試してください。position:absolutetopleftrightbottom

于 2013-01-28T20:23:34.280 に答える