Jquery ui Jquery选项卡中，选项卡内的文本在Chrome中溢出其边框

正如您从图像中看到的，它显示文本溢出了选项卡边框。但单击选项卡后，溢出神奇地消失了

因此，这个问题基本上在加载期间持续存在，并且只在chrome中存在。在firefox和iE中可以完美地工作

有办法解决这个问题吗？我花了数小时调整css，但都没有用

Html

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Post</a></li>
        <li><a href="#tabs-2">Draw</a></li>
        <li><a href="#tabs-3">Snapshot</a></li>
    </ul>

    <div id="tabs-1">
        <p>containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><br>
        <p>containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><br>
        <p>containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><br>
    </div>

    <div id="tabs-2">
        <p>containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><br>
    </div>

    <div id="tabs-3">
        <p>containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p><br>

    </div>
</div>

Javascript

<script type="text/javascript">
    $(function() {
        //tabs
        $( "#tabs" ).tabs({collapsible: true});

    });
</script>

$（函数（）{
//标签
$（“#tabs”）.tabs（{可折叠：true}）；
});

我找到了解决方案，这种奇怪的行为是由于我调整了jquery-ui.css造成的。

你能为相关区域发布一些相关的css吗？@RionWilliams基本上没有针对选项卡的特定规则，它只使用jquery ui.css中的规则。我可以从firebug中确认它不会从其他元素继承任何规则。您是否尝试过调整选项卡本身的宽度，或设置最大宽度以确保它们不会超出其边界。父容器中的内部填充可能有问题，100%的宽度导致其超过。@您的意思是调整

本身的宽度？可能是选项卡的CSS，请尝试通过Chrome的Inspector进行修补。它将允许您动态更改CSS元素和样式。尝试使用宽度：95%或删除填充，看看这是否有区别。

<script type="text/javascript">
    $(function() {
        //tabs
        $( "#tabs" ).tabs({collapsible: true});

    });
</script>