css - 同じ幅の 3 列のレイアウトは、Opera と Safari で均等にレンダリングされません

Question

3 セクション (float: left; width: 33.333%) を含むラッパーを使用した非常に単純なページがあります。

#wrapper{
    position: relative;
    max-width: 960px;
    margin: 0 auto;
}

.row{
    width: 100%;
    _height: expression(this.height > 384 ? 384: true);
    max-height: 384px;  
    margin-bottom: 30px;
    overflow: hidden;
}  
.row:after
{
    content: "";
    display: table;
    clear: both;
}
.row .column{
    float: left;    
    width: 33.333%;
    height: 100%;
    line-height: 0; 
    overflow: hidden;
} 
.row .column .item {
    width: 100%;
    height: 50%;
    overflow: hidden;
} 

今、SafariとOperaを除くすべてのブラウザで完全に動作するようになりました。スタックオーバーフローとグーグルを検索した後、実際に機能するソリューションなしで同様の質問をいくつか見つけました...幅は 34% ですが、列 1 と 2 は 33% でしたが、うまくいきませんでした..右側にはまだ非常に小さなピクセルがあります..

基本的には丸めの問題のようです。私はそれについてよく読みましたが、デザインを変更できないため、回避策を探していました...

私の現在の解決策は、サファリ/オペラで流動的なデザインを避けることです...しかし、私はそれを誇りに思っていません..

ここで私はhtml + cssを本当に素早く掘り下げました： http://jsfiddle.net/ventie30/N9SFJ/

もう少し情報を提供するために、3 行と 3 列があり、行は 40px で区切られています。