边界导致DIV溢出

Question

我有一个宽度为80%的根div和宽度为100%的子节点,当我向子节点添加一个边框时会出现一个滚动条.我想这是因为100%宽度+ 1px边框溢出.我可以避免这样的问题吗？如何将子div定义为包含边框的父级？

我需要这个在IE8上运行

<div style="width:80%;overflow:auto;">
    <div style="float:left;width:100%;border-left:1px solid;">
        <div class="title">Title1</div>
        <div style="width:100%;">
            <div class="title">Title2</div>
            <div class="title">Title3</div>
        </div>
        <div style="clear:both;"></div>
    </div>
    <div>text</div>
    <div>text</div>
</div>

CSS

div.title {
    float: left;
    width:33%;
}

示例:http://jsfiddle.net/FN3mv/

Answer 1

添加box-sizing: border-box到您的100%宽度元素.

你也需要-moz-box-sizing: border-box.