我有一个项目列表，我想在网格中显示。为了保持灵活性，我宁愿让元素漂浮在容器内并用百分比控制它们的宽度。例如：
<div style="overflow:hidden">
<div style="float:left ; width:25%">Element 1</div>
<div style="float:left ; width:25%">Element 2</div>
<div style="float:left ; width:25%">Element 3</div>
<div style="float:left ; width:25%">Element 4</div>
<!-- etc. -->
</div>
现在，我还想在这些单元格之间设置一个排水沟。同样，这很简单 - 只需对单元格应用边距或填充。但是，这也给了我容器边缘的排水沟，这不是我想要的。
为了解决这个问题，我在彼此内部创建了两个容器，其中内部容器的负边距等于单元格的填充。这实际上在现代浏览器中运行良好，但在 IE 9 和更早版本中失败。我不太关心 IE 7 和向后的版本，但 IE 8 + 9 仍然有太大的市场份额不容忽视。
所以我的问题是：为什么 IE 8 + 9 在下面的小提琴中没有给我一个负的水平边距（请注意，它实际上确实给出了一个垂直的负边距 - 它只是在水平方向上没有做同样的事情）。当然，我能做些什么来解决这个问题？