为什么显示:inline-block;在IE中有填充和边距,我无法清除?

时间:2012-10-31 16:19:52

标签: css

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

2 个答案:

答案 0 :(得分:2)

使用内联块时,请注意将呈现用于格式化标记的空格。这可能被误解为持久性填充或边距。

答案 1 :(得分: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: leftfloat: right来显示您的块元素,而不是inline-block。请注意,这将引入其他问题,例如必须确保包含元素为clearfixed

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