css - 为什么显示: inline-block; in IE have padding and margin that I can't clear?

Question

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

Answer 1

这很可能是因为您在标记中的 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 以内嵌方式显示您的 block 元素，而不是 inline-block。请注意，这会引入其他问题，例如必须确保包含元素是 clearfixed .

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