How to show a div with initial width equal min-width in IE but can expand as necessary?
I want to have a div to have an initial width equal to a min-width say 800px and expand in width as elements inside grow in width. I did a <div style="min-width: 800px".. />
but in IE the div starts with a width less than 800px, sum of widths of inner elements.
How can this be done for IE? I can't use width:800px because elements inside can't expand beyond 800px. I use jQuery.
Addition:
I am using IE8. I just created a new page with an outer div with just min开发者_JAVA百科-width and inner div with a width. The outer width used the whole screen width. Not same issue but related. I will have to find out why my page behaves differently.
How about using CSS expressions:
div {
display: inline-block;
width: inherit;
/* min-width for good browsers */
min-width: 800px;
/* CSS expression for older IE */
width: expression(document.body.clientWidth < 800? "800px": "auto");
}
Example here: min-width CSS expression hack. The yellow background is the outer div the dotted line is the inner element so the div keeps size properties of it's child :)
In IE6 min-width, max-width, min-height and max-height properties does not work. You can create a conditional stylesheet and use width for IE6 and min-width for the other browsers.
You can target IE6 by using underscore hack. Example:
<div style="min-width:800px;_width:800px;">...</div>
For max-width/height, you have to use IE-proprietary expression() property: http://www.svendtofte.com/code/max_width_in_ie/
精彩评论