css - 为什么显示：inline-block; 在 IE 中有我无法清除的填充和边距？

Question

显示：inline-block；IE 中的属性似乎有填充和边距，无论我尝试做什么，我都无法清除。有没有其他人遇到过这个错误并知道如何修复它？

Answer 1

使用 inline-block 时，请注意您用于格式化标记的空白将被呈现。这可能会被误解为持久填充或边距。

Answer 2

inline-block这很可能是因为标记中的元素标签之间至少有一个空格或换行符。

换行符将转换为inline-block元素之间的单个空格。因此，您看到的额外空间不是填充或边距，而是包含元素文本中的实际空格字符。

有一些解决方法：

1. Uglify更改您的标记以删除或重新定位换行符：

   <ul>
       <li>item</li>
       <li>item</li>
   </ul>
   <!-- becomes -->
   <ul>
       <li>item</li><li>item</li>
   </ul>
   <!-- or -->
   <ul>
       <li>item</li><li>
           item</li>
   </ul>
   

2. 使用float: left或float: right内联显示块元素，而不是inline-block. 请注意，这将引入其他问题，例如必须确保包含元素是clearfixed。

3. word-spacing: -1em在包含元素上设置。请注意，如果您的inline-block元素包含任何文本，并且您不希望此文本具有不规则的字间距，则需要使用word-spacing: normal内联元素覆盖继承的规则。演示：http: //jsbin.com/ucivel/1/edit