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