Clear:both 与margin-top混合使用

Posted on 2006-12-25 星期一

(本文翻译自ADOBE)

Clear:both 与margin-top混合使用时在不同浏览器中显示是不一样的,所以尽量避免这两个属性在同一元素上同时使用。

下面是不同浏览器中的显示情况:

  1. .floats {
  2.         width: 25px;
  3.         height: 25px;
  4.         background-color: #CCCCCC;
  5.         border: 1px solid black;
  6.         float: left;
  7. }
  8.  
  9.  
  10. .clear1, .clear2, .clear3, .clear4
  11. {
  12.         clear: both;
  13.         margin-bottom: 20px;
  14. }
  15.                
  16. .clear1 {
  17.         border: 1px solid red;
  18.         margin-top: -1px;
  19. }
  20.  
  21. .clear2 {
  22.         border: 1px solid green;
  23.         margin-top: 25px;
  24. }
  25.  
  26. .clear3 {
  27.         border: 1px solid purple;
  28.         margin-top: 45px;
  29. }
  30.  
  31. .clear4 {
  32.         border: 1px solid orange;
  33.         margin-top: 24px;
  34. }
  35.                
  36. .nonclear {
  37.         margin-top: -1px;
  38.         border: 1px solid blue;
  39.         margin-bottom: 20px;
  40. }

Firefox 1.0
Firefox 1.0

Firefox 1.5
Firefox 1.5

IE 6.0
IE 6.0

IE 7.0
IE 7.0

Opera 7 &; 8
Opera 7 &; 8

Opera 9
Opera 9


No comments have been added to this post yet.

留下评论

(必需)

(必需)


Information for comment users
Line and paragraph breaks are implemented automatically. Your e-mail address is never displayed. Please consider what you're posting.

Use the buttons below to customise your comment.


RSS feed for comments on this post | TrackBack URI