jQuery 选项卡 - 内容出现在选项卡边框之外

Question

更新：我需要使用 IE8。

我想在 jquery 选项卡中放置一些 div。内容正在出现，但它在选项卡边框之外：

我试过使用 #tabs {border: none} 删除边框，但我希望边框就在那里。

这是页面的 HTML（精简）：

<div class="ui-widget">
    <!-- Tabs -->
    <h2 class="demoHeaders">
        Codes</h2>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">GT2</a></li>
            <li><a href="#tabs-2">GT3</a></li>
            <li><a href="#tabs-3">GT4</a></li>
        </ul>
        <div id="tabs-1">
            <div id="container">
                <div id="questionActions">
                    Phasellus mattis tincidunt nibh. Cras orci urna, bl
                </div>
                <!-------------------------------------------ADD CONTENT BELOW THIS LINE---------------------------------------->
                <!-----------------------------------------------Slide 1----------------------------------------------->
                <div class="content" id="slide1">
                    <div class="slideText">
                        <strong>Nam dui erat, auctor a</strong><br />
                        Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet
                        ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum
                        bibendum.
                    </div>
                </div>
            </div>
        </div>
        <div id="tabs-2">
            Phasellus
        </div>
        <div id="tabs-3">
            Nam dui erat,
        </div>
    </div>
</div>

这是页面的 CSS（精简）：

#container 
{
    position:absolute;
    width:99%;
    height:93%
}

#questionActions 
{
    width:99%;
    height:20px;
    padding:5px;
    margin-bottom:1%;
    color:white;
    background-color:#005293;
}

Answer 1

您需要从 #container 中删除 position:absolute。

见this fiddle

jQuery 选项卡 - 内容出现在选项卡边框之外

jQuery tabs - content appearing outside the tab border

css

jquery

tabs