Change Font Size:

IE6/IE7 and Firefox handle on the differences Div

Basic HTML code 

  <DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" 
  "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" /> 
  <html Xmlns="http://www.w3.org/1999/xhtml" /> 
 <head> 
  <title> Div Float Sample </ title> 
  <style Type="text/css" /> 
  Div (margin: 3px;) 
  . D1 (width: 250px; min-height: 20px; border: 1px solid # 00cc00;) 
  . D2 (width: 130px; min-height: 40px; border: 1px solid # 0000cc;) 
  . D3 (width: 100px; min-height: 40px; border: 1px solid # cc0000;) 
  </ Style> 
  </ Head> 
 <body> 
  <div Class="d1" /> 
  <div Class="d2" /> </ div> 
  <div Class="d3" /> </ div> 
  </ Div> 
  </ Body> 
  </ Html>

The results show that the above code as follows normal, the same results.

Below this will be conducted on the basis of changes in the revised content style, the other code will not repeat wrote.

Please note that here Style used in the min-height, and height is different, min-height designated a minimum height of the object when the object of the contents of more than minimum height, and this object will be automatically hold large. This is a very cattle style, it is a pity that, in this style and float the same style with the use of cattle when there will be problems.

Div become a revised internal float: left 

  . D1 (width: 250px; min-height: 20px; border: 1px solid # 00cc00;) 
  . D2 (width: 130px; min-height: 40px; border: 1px solid # 0000cc; float: left;) 
  . D3 (width: 100px; min-height: 40px; border: 1px solid # cc0000;)

Showing results are as follows.

The result, Firefox a bit outrageous, two boxes stacked up with it, why that Gongkuang girth pinch? And change the size of a bizarre, I do not know what is in accordance with the formula calculated. IE here shows that the standards should be echoing.

Laws are two internal Div become float: left 

  . D1 (width: 250px; min-height: 20px; border: 1px solid # 00cc00;) 
  . D2 (width: 130px; min-height: 40px; border: 1px solid # 0000cc; float: left;) 
  . D3 (width: 100px; min-height: 40px; border: 1px solid # cc0000; float: left;)

Showing results are as follows.

In such circumstances, the results of Firefox able to explain, is to float the outer lining float as a Div also affect the scope of this outer lining of the Div will not hold out great. IE here Failure of the Margin, can be interpreted as the second float lining caused an impact.

Simply the outer Div amend a float: left 

  . D1 (width: 250px; min-height: 20px; border: 1px solid # 00cc00; float: left;) 
  . D2 (width: 130px; min-height: 40px; border: 1px solid # 0000cc; float: left;) 
  . D3 (width: 100px; min-height: 40px; border: 1px solid # cc0000; float: left;)

Showing results are as follows,

Under such circumstances, Firefox normal, and the continuation of the previous IE not normal circumstances.

Is the outer float: left, lining the last no longer float: left 

  . D1 (width: 250px; min-height: 20px; border: 1px solid # 00cc00; float: left;) 
  . D2 (width: 130px; min-height: 40px; border: 1px solid # 0000cc; float: left;) 
  . D3 (width: 100px; min-height: 40px; border: 1px solid # cc0000;)

Showing results are as follows,

This is the first increase in front of float: left of the same.

Conclusion

Then once again, this paper is a more advanced topics. If the style used in the min-height rather than to set a high degree of height, there will not be any more of these problems. However, no min-height automatically lost div hold a very large need for this character.

In the min-height and float: left of the circumstances, there is no perfect way to the same as Firefox and IE. But still can be found to bypass method.

Further tests can be found, the impact of margin was relatively good in the padding, padding and margin is the best, no, or only padding.

Taken as follows the same code, 

  Div (padding: 3px;) 
  . D1 (width: 250px; min-height: 20px; border: 1px solid # 00cc00; float: left;) 
  . D2 (width: 130px; min-height: 40px; border: 1px solid # 0000cc; float: left;) 
  . D3 (width: 100px; min-height: 40px; border: 1px solid # cc0000; float: left;)

Showing results are as follows,

Oh, finally is the same, although the makeshift different. Fortunately, the same way, or else had to use a table.

Of course, all these may be a reasonable explanation, perhaps increasing to a style settings, these issues are solved, but at the moment I have not found this setting.

About Doctype

Below these in the above code under Doctype tested, the results of the same. 

  <DOCTYPE html PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN" 
  "Http://www.w3.org/TR/html4/strict.dtd" /> 
  <DOCTYPE html PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN" 
  "Http://www.w3.org/TR/html4/loose.dtd" /> 
  <DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN" 
  "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" /> 
  <DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" 
  "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />

Author: miyiyi [at] gmail [point] com

Time :2006-12-20