css - 表中的 jQuery UI 选项卡偏移其他单元格中的内容？

Question

我已经使用表格构建了一个使用 3 列布局的模板(根据给定的建议 here )。然后，我将一些 jQuery UI 选项卡放入其中一个单元格中。但是，其他单元格中的内容似乎被选项卡标题偏移了。我对正在发生的事情感到很困惑，无法追溯到使用 Firebug 或如何移动其他单元格中内容的垂直位置的位置。

        <table>
            <tr>
                <td id="left" class="ui-content-widget ui-corner-all">
                    <p>Left</p>
                </td>
                <td id="middle" class="ui-content-widget ui-corner-all">
                    <p>Lorem ipsum... </p>
                </td>
                <td id="right" class="ui-content-widget ui-corner-all">
                    <ul>
                            <li> <a href="#Tabs-Tab1">Tab1</a></li>
                            <li> <a href="#Tabs-Tab2">Tab2</a></li>
                    </ul>
                    <div id="Tabs-Tab1">
                        <p>Nunc volutpat ... </p>
                    </div>
                    <div id="Tabs-Tab2">
                        <p>Lorem ipsum ... </p>
                    </div>
                </td>
            </tr>
        </table>

关于如何解决这个问题的任何想法？这是一个 site有了这个问题。

Answer 1

在 resets.css 中，您可以将垂直对齐设置为“顶部”而不是“基线”

vertical-align: top;