3个回答
6
一个有用的场景是当你想要有高度不同的项目行时。如果你使用浮动，那么你还必须想出一些方法来清除第二行中所有来自第一行的内容。这里有一个丑陋的例子。
但是，使用内联块的神奇技巧，这里有一个可行的版本。只需两个额外的CSS规则，它甚至可以在IE6和7中使用！
- sdleihssirhc
2
感谢您说明了浮点数无法实现的内容-这是最有意义的。但是，您能解释一下“两个额外的CSS规则”是什么意思吗？ - Yarin
3IE6/7无法明确识别
display: inline-block，但是如果同时包括*display:inline; zoom:1，它们会表现出大致相同的行为。第一个规则是一种hack，第二个规则会触发hasLayout。（抱歉回复你这么久。） - sdleihssirhc4
我通常会使用inline-block来处理那些需要设置高度和宽度的内联元素。这在使用精灵图时很有帮助（特别是对于使用滑动门方法创建圆角按钮的情况）。但并不是所有情况都适用，如果需要使用浮动，我更倾向于使用浮动而不是将块级元素转换为inline-block。
- scrappedcola
2
据我所知，inline-block不是“标准”实现。也就是说，一些浏览器可以处理它，而另一些则不能。至少在我最后尝试的时候是这样。 - Brad Christie
IE7可以正常运行，FF也没有问题。不过我还没有在Chrome/Safari中进行测试（尽管我猜它应该能够工作）。 - scrappedcola
3
因为浮动在IE中引入问题，需要明确指定宽度才能保持同一水平级别的水平浮动。使用inline-block（带有修复）可以避免为浮动项分配显式宽度，但保持所需的块状内联行为。
您也不必在之后清除这些项，但我想这会弥补你需要做的inline-block修复工作。
您也不必在之后清除这些项，但我想这会弥补你需要做的inline-block修复工作。
- meder omuraliev
1
@meder- 你总是给我一些值得思考的东西，但这个属性难道只有在补偿IE浮动问题时才有用吗？顺便说一下，我很喜欢你的网站。 - Yarin
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
- 相关问题
- 3 为什么 anchor 标签在 display:inline-block 时会更高？
- 4 为什么display:inline-block可以防止外边距折叠？
- 6 同时使用display:inline-block和display:flex的效果
- 5 Safari中display:inline-block无效
- 658 display: inline和display: inline-block有什么区别？
- 6 display:inline-block and text-indent
- 9 如何在IE7中使用"display: block"覆盖"display:inline-block"?
- 11 为什么display:inline-block的元素无法正确对齐？
- 3 为什么display:inline-block的效果不一样？
- 5 为什么在Firefox中使用display: block; overflow: hidden包裹display: inline-block元素？
display: inline-block在 CSS3 中并不是新的。 - BoltClock