How to make min-width in percentage work in in IE7

问题:

How to make {min-width:100%} work in in IE7? working fine in IE8+ and other browsers.

I'm using a dropdown menu where width of dropdown should depend on longest text in dropdown but not less then the parent's link width. So I added min-width:100% to dropdown. But it's working for other browsers but not for IE7.

How I can make it work?

Demo is here to fork and play with it. Check this in IE7 http://codepen.io/jitendravyas/pen/AheDs

回答1:

Please check This i think its exactly what you are looking for.

回答2:

Try Modernizr, it makes a lot of things possible in older/less compatible browsers without a lot of trouble. Try the development version to see if it can help you and compose your own production version targeting your specific needs to minimize the size (and speed) of the javascript library.

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

回答3:

The accepted answer on this SE question should do the trick for you: CSS - How to make IE7 respect min-width

回答4:

IE7 does not function like the other browsers in this manner. It needs an explicit width on the parent element. Your current code gives it a width here:

.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);
}

If you know the width of your widest element, you could change that number there to a wider amount, which "works" as this fiddle demonstrates (Note: the CodePen example was not working for me in IE7 mode, so I moved the code to jsfiddle.net). However, it may be better for you to implement some javascript workaround for IE7 similar to the solution in this question (which basically was asking the same thing as you are).

回答5:

check CSS Compatibility and Internet Explorer. Make sure you have an appropriate doc type and toy are not in Quirks mode by looking in the developer tools at the Document Mode.

check IE7 and minWidth

回答6:

ie9.js claims to add support for min-width, and you can add it to your source to test with:

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

You can read more about the ie7.js project (including ie9.js) at http://code.google.com/p/ie7-js/.

Please keep in mind, some other javascript libraries, such as css3 pie will not work with ie9.js.