IE 和 FF 中的 inline-table 和 inline-block 问题答案

【问题标题】：inline-table and inline-block issues in IE and FFIE 和 FF 中的 inline-table 和 inline-block 问题
【发布时间】：2015-12-31 16:14:46
【问题描述】：

我在一个块 div 中有 4 个内联块 div。如您所见，它们在 Chrome 中看起来不错。在 Opera 中看起来也不错。但是，当我在 IE 和 FF 中看到相同的 div 时，它看起来像这样：

我尝试了几种技巧，例如 display:inline 或 zoom:1，但到目前为止没有任何帮助。

这里是CodePen。用IE和FF检查一下看看问题。

这是您在图像中看到的每个内联 div 的确切 css 代码：

#win_logo_1{
    width:46px;
    height:46px;
    background-position:-229px -151px;
    background-image:url(http://topdesignstudio.ir/img/icons/icon_sheet.png);
    background-repeat:no-repeat;
    display:inline-block;
    *zoom: 1;
    *display: inline;
    position:relative;
    margin-left:0px;
    margin-right:0px;
    margin-top:10px;
    margin-bottom:0px;
}

【问题讨论】：

首先将代码放入问题中； codepen 有帮助，但最好也将代码与问题内联。其次，尝试将问题（即代码）减少到演示问题所需的最小示例。代码应该尽可能少。最后，要弄清楚问题是什么：仅仅说“他们都没有工作”是不够好的描述。它以什么方式不起作用？它在做什么不应该做的事情，反之亦然？你尝试了哪些技巧？他们中的一些人是否比其他人工作得更好？
这是否发生在任何 Ie 浏览器上还是特定于版本？
我在IE 11上查过，其他版本不知道。

标签： html css internet-explorer firefox

【解决方案1】：

毕竟我有一个很好的解决方案。首先，我使用 inline-table 而不是 inline-block 为我的 win 徽标的每个框。其次，我稍微增加了 winLogo（四个框的父级）的宽度。第三，我检测是否是 IE，然后删除我的 win_logo_2 nad 4 的 maigin-left。这是Codepen 在 IE 上可以正常工作。仍在开发 FF 和 Safari

【讨论】：