成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

關(guān)于css兼容性問(wèn)題及一些常見問(wèn)題匯總

seanlook / 2747人閱讀

摘要：解決辦法添加復(fù)制內(nèi)容到剪貼板一行右側(cè)第一個(gè)元素有雙邊距一行左側(cè)第一個(gè)元素有雙邊距在，下，自身沒(méi)浮動(dòng)，但是的內(nèi)容有浮動(dòng)，下邊就會(huì)產(chǎn)生一個(gè)間隙解決辦法給加浮動(dòng)給加注意當(dāng)下最小高度問(wèn)題，和的間隙問(wèn)題共存的時(shí)候，給加浮動(dòng)才能解決。

目前主流瀏覽器的兼容性做的都比較好了，本文主要針對(duì)IE6，7的不兼容問(wèn)題進(jìn)行解決。

1.圓盤時(shí)鐘有浮動(dòng)存在時(shí)，計(jì)算一定要精確，不要讓內(nèi)容的寬高超出我們所設(shè)置的寬高，IE6下，內(nèi)容會(huì)撐開設(shè)置好的高度。

解決方法：給對(duì)應(yīng)的父級(jí)加overflow:hidden;但是會(huì)有部分被隱藏掉，最好是精確計(jì)算寬高再設(shè)定

eg：（ie會(huì)撐開）

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <style>??
  2. box{?width:400px;} ??
  3. left{?width:200px;height:300px;background:red;float:left;} ??
  4. right{?width:200px;float:right;} ??
  5. div{width:180px;height:180px;background:blue;padding:15px;} ??
  6. * ??
  7. ???計(jì)算一定要精確?不要讓內(nèi)容的寬高超出我們?cè)O(shè)置的寬高 ??
  8. ???在IE6下，內(nèi)容會(huì)撐開設(shè)置好的寬高 ??
  9. / ??
  10. style>??
  11. head>??
  12. <body>??
  13. <div?class="box">??
  14. ??<div?class="left">div>??
  15. ??<div?class="right">??
  16. ??????<div?class="div">div>??
  17. ??div>??
  18. div>??
  19. body>??
  20. ??

2.圖片旋轉(zhuǎn)在IE6下有元素浮動(dòng)時(shí)，如果寬度需要由內(nèi)容撐開，就給里邊的塊元素都加浮動(dòng)，正常瀏覽器不用加浮動(dòng)。

eg：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <style>??
  2. box{?width:400px;} ??
  3. left{background:red;float:left;} ??
  4. right{float:right;?background:blue;} ??
  5. ?h3{margin:0;height:30px;?float:left;} ??
  6. ?/* ??
  7. ?????在IE6元素浮動(dòng)，如果寬度需要內(nèi)容撐開，就給里邊的塊元素都加浮動(dòng) ??
  8. ?*/ ??
  9. ?style>??
  10. >??
  11. >??
  12. class="box">??
  13. ???<div?class="left">??
  14. ???????<h3>左側(cè)h3>??
  15. ???div>??
  16. ???<div?class="right">??
  17. ???????<h3>右側(cè)h3>??
  18. ???div>??
  19. >??
  20. >??


3. 抽獎(jiǎng)在IE6下元素的高度的小于19px的時(shí)候，會(huì)被當(dāng)做19px來(lái)處理

　　解決辦法：添加overflow:hidden;

?

4. 在IE6下border:1px dotted #000;中，dotted不支持，會(huì)以虛線的方式的出現(xiàn)。

　　解決方法：切背景平鋪

?

5. 在所有瀏覽器中子元素的margin-top，margin-bottom值會(huì)傳遞給父級(jí)；

　　解決辦法：

　　　　a：給父級(jí)都添加浮動(dòng)（或者給子級(jí)添加浮動(dòng)也能解決margin-top問(wèn)題，但是margin左右值會(huì)出現(xiàn)雙倍的值，也就是雙邊據(jù)bug問(wèn)題，下面會(huì)講）；

　　　　b：給父級(jí)添加position:relative;(或position:absolute;但是會(huì)脫離文檔流)

　　　　c：添加display:inline-block; 正常瀏覽器，可行，但是IE,7下，塊元素不支持display:inline-block;

　　　　d: 給附件添加border屬性，例如border:1px solid red; 正常瀏覽器可行，在IE6下必須再給父級(jí)添加zoom:1;

eg:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <style>??
  2. body{margin:0;} ??
  3. box{background:blue;border:1px?solid?#000;?zoom:1;} ??
  4. div{width:200px;height:200px;background:red;margin:100px;} ??
  5. ?/* ??
  6. ?????在IE6下解決margin傳遞要觸發(fā)haslayout ??
  7. ????? ??
  8. ?????在IE6下父級(jí)有邊框的時(shí)候，子元素的margin值消失 ??
  9. ????? ??
  10. ???解決辦法:觸發(fā)父級(jí)的haslayout ??
  11. */ ??
  12. style>??
  13. head>??
  14. <body>??
  15. <div?class="box">??
  16. ???<div?class="div">div>??
  17. div>??
  18. body>??

?

6. css3背景動(dòng)畫在IE6下，塊元素有浮動(dòng)和和橫向的margin值 ，橫向的margin值會(huì)被放大成兩倍。

解決辦法：添加display:inline;

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <style>??
  2. ?.box{?float:left;border:10px?solid?#000;} ??
  3. ?.box?div{width:100px;height:100px;background:Red;margin-right:20px;border:5px?solid?#ccc;?float:left;} ??
  4. ?/* ??
  5. ?????margin-right?一行右側(cè)第一個(gè)元素有雙邊距 ??
  6. ????? ??
  7. ?????margin-left?一行左側(cè)第一個(gè)元素有雙邊距 ??
  8. ?*/ ??
  9. ?style>??
  10. head>??
  11. <body>??
  12. <div?class="box">??
  13. ????<div>1div>??
  14. ????<div>2div>??
  15. ????<div>3div>??
  16. ????<div>4div>??
  17. div>??
  18. body>??

?

7. 在IE6，7下，li自身沒(méi)浮動(dòng)，但是li的內(nèi)容有浮動(dòng)，li下邊就會(huì)產(chǎn)生一個(gè)間隙

解決辦法：1.給li加浮動(dòng)
??????? 　2.給li加vertical-align:top;

注意：當(dāng)IE6下最小高度問(wèn)題，和 li的間隙問(wèn)題共存的時(shí)候， 給li加浮動(dòng)才能解決。

eg:

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <style>??
  2. ul{margin:0;padding:0;width:302px;} ??
  3. li{?list-style:none;height:30px;border:1px?solid?#000;?vertical-align:top;} ??
  4. a{width:100px;float:left;height:30px;background:Red;} ??
  5. span{width:100px;float:right;height:30px;background:blue;} ??
  6. /* ??
  7. ????在IE6，7下，li本身沒(méi)浮動(dòng)，但是li的內(nèi)容有浮動(dòng)，li下邊就會(huì)產(chǎn)生一個(gè)間隙 ??
  8. ????解決辦法: ??
  9. ????????1.給li加浮動(dòng) ??
  10. ???????2.給li加vertical-align ??
  11. */ ??
  12. style>??
  13. head>??
  14. <body>??
  15. <ul>??
  16. ???<li>??
  17. ???????<a?href="#">a>??
  18. ???????<span>span>??
  19. ???li>??
  20. ???<li>??
  21. ???????<a?href="#">a>??
  22. ???????<span>span>??
  23. ???li>??
  24. ???<li>??
  25. ???????<a?href="#">a>??
  26. ???????<span>span>??
  27. ???li>??
  28. ul>??
  29. body>??
  30. ??

8.當(dāng)一行子元素占有的寬度之和和父級(jí)的寬度相差超過(guò)3px,或者有不滿行狀態(tài)的時(shí)候,最后一行子元素的下margin在IE6下就會(huì)失效

解決方法：額，還沒(méi)發(fā)現(xiàn)

eg：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <style>??
  2. .box{border:10px?solid?#000;width:600px;?/*?width:603px;?*/?overflow:hidden;} ??
  3. .box?div{width:100px;height:100px;background:Red;margin:20px;border:5px?solid?#ccc;?float:left;?display:inline;} ??
  4. /* ??
  5. ????當(dāng)一行子元素占有的寬度之和和父級(jí)的寬度相差超過(guò)3px,或者有不滿行狀態(tài)的時(shí)候,最后一行子元素的下margin在IE6下就會(huì)失效 ??
  6. */ ??
  7. style>??
  8. head>??
  9. <body>??
  10. <div?class="box">??
  11. ???<div>1div>??
  12. ???<div>2div>??
  13. ???<div>3div>??
  14. ???<div>4div>??
  15. ???<div>1div>??
  16. ???<div>2div>??
  17. ???<div>3div>??
  18. ???<div>4div>??
  19. ???<div>1div>??
  20. ???<div>2div>??
  21. ???<div>3div>??
  22. ?????
  23. div>??

?

9. Bootstrap插件在IE6下的文字溢出BUG。即：子元素的寬度和父級(jí)的寬度相差小于3px的時(shí)候,或者兩個(gè)浮動(dòng)元素中間有注釋或者內(nèi)嵌元素的時(shí)候，IE6下文字溢出

解決辦法:用div把注釋或者內(nèi)嵌元素用div包起來(lái)。

eg：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <style>??
  2. .box{?width:400px;} ??
  3. .left{float:left;} ??
  4. .right{width:400px;float:right;} ??
  5. style>??
  6. head>??
  7. <body>??
  8. <div?class="box">??
  9. ????<div?class="left">div>??
  10. ???<span>span>??
  11. ???<div?class="right">↓哈哈哈哈哈哈哈哈哈哈div>??
  12. div>??