DIV+CSS兼容IE6、IE7、Firefox方法探究
发布日期:2021-05-13 07:41:49 浏览次数:10 分类:博客文章

本文共 6605 字,大约阅读时间需要 22 分钟。

���������Firefox���IE������������������!important���������������������������������������������������������������������������������������������������������������������:@import���������������������������������������������������voice-family���������,������������������CSS������������������������������������

������������IE���Firefox���CSS���������������

1.DOCTYPE������CSS������

2.Firefox:DIV������margin-left,margin-right���auto���������������,IE������

3.Firefox:body������text-align���,DIV������������margin:auto(���������margin-left,margin-right)������������

4.Firefox:������padding���,DIV���������height���width,���IE������,������������!important������������height���width

5.Firefox:������!important,IE���������,������!important���Firefox������������������������������������������������������xxxx!important������������������������������

6.DIV���������������������:vertical-align:middle;���������������������������DIV���������line-height:200px;������������������������������������������������������������������������������

7.cursor:pointer���������������IEFirefox���������������������������hand���IE������

8.Firefox:���������������������������������������display:block,������������float:left������������������������menubar,���a���menubar���������������������������������������������,���������height,���������menubar������������������������

9.���mozillafirefox���IE������BOX���������������������������������2px���������������DIV{margin:30px!important;margin:28px;}

���������������margin������������������������������������������������!important������������IE���������������������������������������������������������IE���������������������������DIV{maring:30px;margin:28px}
���������������������������������������������������������������������margin:XXpx!important;

10.IE5���IE6���BOX���������������

IE5���DIV{width:300px;margin:010px010px;}

DIV������������������������300px-10px(���������)-10px(���������)������DIV������������280px���������IE6������������������������������������300px+10px(���������)+10px(���������)=320px������������������������������������������������DIV{width:300px!important;width/**/:340px;margin:010px010px}
������������/**/���������������������������������������IE5���firefox������������IE6���������������������������������������������������������������������������

11.ul���������Mozilla���������������padding������,������IE���������margin���������������������ul{margin:0;padding:0;}������������������������������

������������������

 

1���float���DIV������������������

���������(������floatA���floatB������������������������

float:left;)<#DIVid=\���floatA\���>    <#DIVid=\���floatB\���>    <#DIVid=\���NOTfloatC\���> 

���������NOTfloatC���������������������������������������������������

���������������IE������������������������������Firefox������������NOTfloatC������float������������������float���������������
���

<#DIVclass=\���floatB\���>    <#DIVclass=\���NOTfloatC\���>    ������������<#DIVclass=\���clear\���> 

������DIV���������������������������������������������������������������������������������������������float���������DIV������������������������������������������������������������������

���������clear������������������������������������

���.clear{     clear:both;}  

������������������������������������������������wrapper������������overflow:hidden;

���������float���box���������������������������������IE���������������������������������IE���layout������������(���������IE������)���zoom:1;������������������������������������������
���������������wrapper������������

���.colwrapper{     overflow:hidden;     zoom:1;     margin:5pxauto;}  

2���margin������������������

������������float���DIV���IE������������margin������������������������IE6������������bug���

������������������������DIV������������display:inline;
��������� 

<#DIVid=\���imfloat\���>        ���������CSS���     #IamFloat{     float:left;     margin:5px;/*IE������������10px*/     display:inline;/*IE���������������5px*/}      

3������������������������������

���������������������������������������������������������������������float���DIV���������������������������������������IE������������������������������������������DIV���������������������Photoshop������Firework���������������������������

4������������������������

���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������

5������������������-!important;

������������������������������������������������,���������������������.Firefox���������!important������������������������,������IE������������.������

.tabd1{     background:url(/res/images/up/tab1.gif)no-repeat0px0px!important;/*StyleforFirefox*/     background:url(/res/images/up/tab1.gif)no-repeat1px0px;/*StyleforIE*/}  

���������������������������������xxxx!important���������������������������������������������������

IE7.0���������������CSS���������������������������������������������������������������������������������������������������������������IE7.0������������������������������������������������

���������������������������!important���hack���������IE6���firefox���������������������������������IE7���!important���������������������������������������������������������������������������������������������IE7���������hack���������������������*+html���������������IE7���������������������������������������

���������������CSS��������������� 

#example{color:#333;}/*Moz*/     *html#example{color:#666;}/*IE6*/     *+html#example{color:#999;}/*IE7*/ 

���������firefox������������������������#333���IE6������������������������#666���IE7������������������������#999������������������������������������������������������IE6���������������

���DIV+CSS��������������������������������������������� 

  1. <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"  
  2.  
  3. "http://www.w3.org/TR/html4/strict.dtd"> 
  4. <HTML> 
  5. <HEAD> 
  6. <TITLE>DIV������������</TITLE> 
  7. <styletypestyletype="text/CSS"> 
  8.  
  9. DIV  
  10. {  
  11. height:150px;  
  12. }  
  13. DIV.left  
  14. {  
  15. width:20%;  
  16. float:left;  
  17. clear:right;  
  18. background-color:#eeeeee;  
  19. }  
  20.  
  21. DIV.center  
  22. {  
  23. width:50%;  
  24. float:left;  
  25. clear:right;  
  26. background-color:#CCCCCC;  
  27. }  
  28.  
  29. DIV.right  
  30. {  
  31. width:30%;  
  32. float:left;  
  33. clear:right;  
  34. background-color:#808080;  
  35. }  
  36. DIV.both  
  37. {  
  38. width:100%;  
  39. clear:both;  
  40. background-color:#696969;  
  41. }  
  42.  
  43. </style> 
  44. </HEAD> 
  45.  
  46. <BODY> 
  47. <DIVclassDIVclass="left">������</DIV> 
  48. <DIVclassDIVclass="center">������</DIV> 
  49. <DIVclassDIVclass="right">������</DIV> 
  50.  
  51. <DIVclassDIVclass="both">������</DIV> 
  52.  
  53. <DIVclassDIVclass="left">������</DIV> 
  54. <DIVclassDIVclass="center">������</DIV> 
  55. <DIVclassDIVclass="right">������</DIV> 
  56. </BODY> 
  57. </HTML> 

���������

���������������������

上一篇:Jquery常用技巧收集整理(1)
下一篇:asp.net网站安全常见问题与防范

发表评论

最新留言

能坚持,总会有不一样的收获!
[***.219.124.196]2025年04月25日 10时51分13秒