Css safari中的填充/宽度百分比

我正在尝试创建一个具有不同列的流体网格布局。我有一个包含2个50%列的包装器和一个包含4个25%列的包装器。这在除safari之外的所有浏览器中都能正常工作。有一个小小的gab 1像素吗？在最后一列之后。在添加边距和填充边距后，边距会变得更大，调整浏览器大小时，边距的宽度也会有所不同

我找不到导致这种行为的原因，我在这里做错了什么

HTML：

    <div id="column2">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="clear"></div>
</div>
<div id="column4">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
    <div class="clear"></div>               
</div>

我在这里设置了一个快速的基本小提琴：

非常感谢您的帮助

它不能100%工作

但这更好：

---

谢谢你的回答，这是很多额外的div的只是为了狩猎。。。gab确实更小，但仍然存在并在移动。我使用带有彩色背景的框，所以我需要它是像素完美的：

    #column2 {
width:84%;
height:auto;
padding-left:8%;
padding-right:8%;
margin-left:auto;
margin-right:auto;
background-color:#FFFFCC;
}

.left {
float:left;
width:50%;
height:100px;
background-color:#FFFF66
}

.right {
float:left;
width:50%;
height:100px;
background-color:#FF9900;
}



#column4 {
width:84%;
height:auto;
padding-left:8%;
padding-right:8%;
margin-left:auto;
margin-right:auto;
background-color:#66FFFF;
}

#column4 .box1, #column4 .box2, #column4 .box3, #column4 .box4{
float:left;
width:22.25%;
height:100px;
padding-left:1%;
padding-right:1%;
margin-left:1%;
}

#column4 .box1 {
background-color: #FF3300;
margin-left:0;
}

.box2 {
background-color: #333399;
}

.box3 {
background-color: #3366FF;
}

.box4 {
background-color: #009900;
}

.clear {
clear:both;
}

<div id="column2">
<div id="spaces">%8</div>
<div class="left">left</div>
<div class="right">right</div>
<div id="spaces">%8</div>
<div class="clear"></div>
</div>
<div id="column4">
<div id="spaces">%8</div>
<div class="box1">box1</div>
<div id="margin">&nbsp;</div>
<div class="box2">box2</div>
<div id="margin">&nbsp;</div>
<div class="box3">box3</div>
<div id="margin">&nbsp;</div>
<div class="box4">box4</div>
<div id="spaces">%8</div>
<div class="clear"></div>               
</div>



html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}


#spaces {
    width:8%;
    float:left;
}
#margin {
 float:left;
    width:1%;
}
#column2 {
width:100%;
height:auto;
margin-left:auto;
margin-right:auto;
background-color:#FFFFCC;
}

.left {
float:left;
width:42%;
height:100px;
background-color:#FFFF66
}

.right {
float:left;
width:42%;
height:100px;
background-color:#FF9900;
}



#column4 {
height:auto;
margin-left:auto;
margin-right:auto;
background-color:#66FFFF;
}

#column4 .box1, #column4 .box2, #column4 .box3, #column4 .box4{
float:left;
width:20.25%;
height:100px;
}

#column4 .box1 {
background-color: #FF3300;
margin-left:0;
}

.box2 {
background-color: #333399;
}

.box3 {
background-color: #3366FF;
}

.box4 {
background-color: #009900;
}

.clear {
clear:both;
}