当宽度指定为百分比时，如何使IE正确呈现浮动块？

Question

示例代码：

.container { width:700px; margin:0 auto; background:red; color:orange; }
.container .wrapper { width:100%; background:green; }
.container .left { width:48%; padding-right:2%; background:black; float:left; }
.container .right { width:48%; padding-left:2%; background:blue; float:left; }
.container .left div, .container .right div { background: grey; }

<div class="container">
<div class="wrapper">
    <div class="left">
        <div>Left column</div>
    </div>
    <div class="right">
        <div>Right column</div>
    </div>
</div>

在IE中，左右列的渲染宽度小于指定的百分比。

我如何解决这个错误？