Question

如何让{min-width：100％}在IE7中工作？在IE8 +和其他浏览器中正常工作。

我正在使用下拉菜单，其中下拉列表的宽度应取决于下拉列表中的最长文本，但不得低于父级的链接宽度。所以我添加了min-width：100％下拉列表。但它适用于其他浏览器，但不适用于IE7。

我如何才能使它发挥作用？

演示就是在这里分叉玩。请在IE7中查看 http://codepen.io/jitendravyas/pen/AheDs

Answer 1

请检查This我认为它正是您要找的。

Answer 2

尝试使用Modernizr，它可以在较旧/兼容性较差的浏览器中实现很多功能而不会有太多麻烦。尝试使用开发版本来查看它是否可以帮助您并根据您的特定需求撰写自己的生产版本，以最大限度地减少javascript库的大小（和速度）。

Modernizr是一个检测HTML5和CSS3功能的JavaScript库在用户的浏览器中。

Answer 3

关于这个SE问题的接受答案应该适合你： CSS - How to make IE7 respect min-width

Answer 4

IE7不像其他浏览器那样运行。它需要父元素上的显式width。您的当前代码在此处为其提供了width：

.site-nav .flyout-content{
    border:1px solid #e4e4e3;
    /*  width:100%;*/
    height:100%;
    min-width:100%;
    *width:170px;  <-------------- THIS IS PICKED UP BY IE7
    box-shadow: 8px 6px 10px rgba(65, 65, 65, 0.45);
}

如果您知道最宽元素的width，则可以将该数字更改为更宽的数量，其中＆＃34;工作＆＃34; as this fiddle demonstrates（注意：CodePen示例在IE7模式下不适合我，所以我将代码移到了jsfiddle.net）。但是，对于IE7实现类似于the solution in this question的一些javascript解决方法可能会更好（这基本上与您的要求相同）。

Answer 5

检查CSS Compatibility and Internet Explorer。通过在文档模式下查看开发人员工具，确保您具有适当的文档类型并且玩具不处于Quirks模式。

check IE7 and minWidth

Answer 6

ie9.js声称添加了对min-width的支持，你可以将它添加到你的源代码来测试：

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

您可以在http://code.google.com/p/ie7-js/了解有关ie7.js项目（包括ie9.js）的更多信息。

请记住，其他一些javascript库，例如css3 pie，不能用于ie9.js。

如何在IE7中使min-width的百分比工作？

6 个答案: