IE7 和 inline-block PLUS 使 li 扩展到子元素的大小答案

【问题标题】：IE7 and inline-block PLUS making li expand to size of children elementsIE7 和 inline-block PLUS 使 li 扩展到子元素的大小
【发布时间】：2011-12-07 05:12:08
【问题描述】：

我有一个非常不错的导航菜单，它可以跨浏览器工作，除了 IE7。

我是带有 inline-block 的浮动列表项，它在 IE 中不受支持。我已经找到了一些解决方法。唯一的问题是内联块类型的收缩将我的列表项包裹在内容周围。而 IE7 的所有这些其他方法都没有这样做。我必须分配一个不适合这个网站的特定宽度，因为它不是静态的。

<ul id="mini-nav">
<li class="">
  <a href="">authenticated/basic">BASIC</a>
  <div></div>
</li>
<li class="">
  <a href="">ADVANCED</a>
  <div></div></li>
<li class="">
  <a href="">BEST PRACTICES</a>
  <div></div>
</li>
</ul>

我需要在此处扩展我的列表项以适应超链接中文本的大小。如何在不使用 inline-block 的情况下完成此操作。

【问题讨论】：

你能做一个jsFiddle 或JS Bin 测试用例吗？
这是一个关于它应该如何运作的粗略想法jsfiddle.net/uh7ht 你看到内联块如何扩展以适应项目吗？简单地使用 display:block 和 float left 不会产生相同的结果
您能否进一步解释或告诉我您为什么需要display: inline-block？将其替换为 float: left; margin-right: 4px 会得到 exact 与您的演示相同的结果：jsfiddle.net/thirtydot/uh7ht/1（在 Chrome 中查看，而不是在 IE7 中查看）
jsfiddle.net/uh7ht/3 抱歉。更具体地说，这是我想要完成的。列表项中的浮动 div 在 ie7 中搞砸了。有什么解决方案吗？

标签： internet-explorer internet-explorer-7 css-float css

【解决方案1】：

您可以只使用float: left 而不是display: inline-block。根据您的设计，您可能需要将 overflow: hidden 添加到您的 <ul> 或使用通用的 clearfix。

【讨论】：

这行得通..但没有考虑到我无法定义列表项的宽度..如果我可以定义一个静态宽度就可以了。