jquery-ui - Jqueryタブ、タブ内のテキストがChromeの境界からはみ出す

Question

画像からわかるように、テキストがタブの境界線からはみ出していることを示しています..しかし、タブをクリックすると、オーバーフローは魔法のようになくなりました.

したがって、基本的に、この問題はロード中およびクロムでのみ持続します..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>

CSS

#tabs{background: none;width:100%;}

Javascript

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

    });
</script>