The difference between the height and min-height of new notes in the Web front

Browser reference benchmarks: Firefox, Chrome, Safari, Opera, IE;
* IE6 does not support CSS Min-height properties. Definition of minimum height: 1. The element has a default height; 2. When content exceeds the default height of an element, the height of the element increases with the content increasing
Figure 1: Requirements for

* For example, the height of two regions is different. This is the Min-height effect demonstration. Element has a default height, and when content exceeds that default height, the height of the element increases with the content.

EG1:
<style>. test{float: Left;    width:200px; Margin:05px;    padding:10px; Border-radius:10px; Background: #eee;}. test{min-height:80px;/*Implement minimum Height code*/}</style><divclass="Test"> Why is drinking water poisoning? </div><divclass="Test"> Why is drinking water poisoning? <br> recently reported that the day drinking 3 liters of water young 10 years old, so someone really began to drink, can drink 4 days later, urine. Water is the source of life, but is not the more water the better? What happens when you drink more water? </div>

* As with the code above, we only need one line of code to  min-height:80px; Achieve the minimum height of the non-IE6 browser. 

. test{    height:80px;   /* */}

* Will be min-height:80px; changed to height:80px; view this style under IE6. You may have found a miracle, yes, you read it right. The demo's performance is consistent with the EG1 demo in the Advanced Browser, which is the minimum height effect.

* But this is not the time to win, because you will find this example in the Advanced browser is Gameover. Is this not a pit daddy? Don't worry, as a qualified coder, you will definitely think of ways to fix it.

* You are a front-end engineer, so you have to know some browser-specific CSS Hack, although most cases are not recommended. We try to make the advanced browser still use Min-height, and IE6 use height, it seems to be able to achieve the goal, do it.

　

Figure 4: A triumphant scene
. test{    min-height:80px;  /*  */    _height:80px        ; /* */}

* OK, we implemented the Min-height effect including IE6.

* Remember, do not add overflow other than the visible value, or your IE6 will be tragic demo

The difference between the height and min-height of new notes in the Web front