如何让 IE < 10 应用负边距？答案

【问题标题】：How do I get IE < 10 to apply negative margins?如何让 IE < 10 应用负边距？
【发布时间】：2013-07-31 22:11:02
【问题描述】：

我有一个项目列表，我想在网格中显示。为了保持灵活性，我更喜欢让元素漂浮在容器内并用百分比控制它们的宽度。例如：

<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 在下面的小提琴中没有给我一个负的水平边距（请注意，它实际上确实给出了一个垂直的负边距 - 它只是没有水平方向相同）。当然，我能做些什么来解决这个问题？

http://jsfiddle.net/Pd4vd/1/

【问题讨论】：

标签： css internet-explorer-8 internet-explorer-9

【解决方案1】：

尝试将此代码放在页面的head：

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

【讨论】：