开发者

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/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜