3

如何让 {min-width:100%} 在 IE7 中工作？在 IE8+ 和其他浏览器中运行良好。

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

我怎样才能使它工作？

Demo 在这里分叉和使用它。检查这个在 IE7 http://codepen.io/jitendravyas/pen/AheDs

4

5 回答 5

5

请检查这我认为它正是您正在寻找的。

于 2012-11-01T09:53:18.440 回答
3

试试 Modernizr，它可以在较旧/不太兼容的浏览器中轻松实现很多事情。尝试开发版本，看看它是否可以帮助您，并针对您的特定需求编写您自己的生产版本，以最小化 javascript 库的大小（和速度）。

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

于 2012-10-29T15:32:04.837 回答
2

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最宽的元素，您可以将那里的数字更改为更大的数量，正如这个小提琴演示的那样“有效” （注意：CodePen 示例在 IE7 模式下不适合我，所以我将代码移到了 jsfiddle 。网）。但是，您最好为 IE7 实施一些类似于此问题中的解决方案的javascript 解决方法（基本上与您提出的问题相同）。

于 2012-10-26T14:46:35.080 回答
1

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

检查 IE7 和 minWidth

于 2012-10-24T05:18:44.127 回答
1

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。

于 2012-10-31T04:07:21.267 回答