DIV DIV CSS compatible solve the maximum width and a minimum width problem

In the web pages, we often encounter min / max-width, min / max-height underneath IE6 is invalid, and this is one of the architects of the most troublesome problem web, the following method can solve these problems and compare simple. Of course, if you have a better, and I hope I can leave a message on the home page to: <div style = "max-width: 250px;"> This text content, ax / min in ie7 and firfox, safari, opera browser the support, the widest value 250px </ div> but not IE6 recognize and read this property, it is better support IE express their properties of javascript, for example: div {width: expression_r (250 "PX")} and div {widt : 250px} in recognizing and reading are the same in IE! But if some users disable javascript in your browser, this wording would have failed. Therefore, the need for a method: #mycss { width: 100%; max-width: 500px; width: expression_r (document.body.clientWidth> 500 "500px": "Auto"?);} Or: #mycss { width-max: 33em; width: expression_r (document.body.clientWidth> (500/12) *










? parseInt (document.body.currentStyle.fontSize) "33em": "Auto"); } we set the width of the container mycss is: width: 100%; in fact, this is nonsense, because DIV is a block element, the default width It is the width of the parent element. Div width in this embodiment, if the declaration for the equivalent to the width of the body. We set the max-width container is 500px. This FF is valid. For IE no effect.   IE face no effect, we apply expression_r embedded script, declared when the width is greater than 500px, the width is equal to 500px. parseInt (document.body.currentStyle.fontSize) "33em": ? "auto" If the actual width is greater than (500/12) the current font size, set the page width is 33em. Similarly, for a minimum width, and ax / min-hight, is the same: Minimum: #mycss { min-width: 333px; width: expression_r (? Document.body.clientWidth <334 "333px": "Auto"); } maximum height:
  

  













#mycss {
max-height: 333px;

height: expression_r( this.scrollHeight > 332 ? "333px" : "auto" )
}
最小高度:

#mycss {

min-height: 333px;

height: expression_r( this.scrollHeight < 334 ? "333px" : "auto" );
}

There is also a simple way:

#a {height: auto important; min
-height:! 400px;} This pattern can solve the problem at minimum height IE5.5, IE6, IE7 and FF, Safari browser and the like, the maximum height not practiced, Oh .

Published an original article · won praise 2 · views 10000 +

Guess you like

Origin blog.csdn.net/u011927449/article/details/104027258