個人前端筆記 之 bug篇

 有多少人出現過這種狀況，PC端網頁正常顯示可是，手機端網頁右側出現空白。

問題所在 ：子元素寬度超過父元素，解決方法:

設置父元素的最小寬度是子元素的寬度

father {
        width: 100%;
        min-width: sonWidth;
        }
複製代碼

2. 給子元素們設置display：inline-block 後，之間出現縫隙

解決方法:

father{
        font-size: 0;
       }
或者

<div>**</div><div>
  ***</div>   (標籤之間不要有換行或者空格)複製代碼

3. IE6/7 對display：inline-block；的支持欠缺， 有時候會垂直顯示。

 解決：

{ _zoom：1; *display：inline; }複製代碼

4. IE文本兩端對齊

{ text-justify: inter-ideograph; }  複製代碼

5. SEO 標題 使用text-indent:-9999px; 圖片也沒了

 解決：

內部元素遇到float或者display: block後就不繼承外部這個縮進的屬性了，因此只要給圖片加上float或者display: block的 這個CSS 屬性後，圖片所繼承的縮進會自動失效。

{ font-size: 0; text-indent:-9999px;  }   img{ display:block; }  複製代碼

6. IE8及如下不支持 border-radius

很差意思這個我好像沒解決複製代碼

7. IE 低版本下元素浮動後會獨佔一行

 解決：

       兩欄狀況下分別給元素浮動 定寬

div1 {float: left; width:500px; } 
div2 {float: right; width:500px;}複製代碼

8. i9 如下 不支持 H5語義性標籤  

 解決：

<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->複製代碼

本地沒有文件的話，能夠應用開源社區的文件

<!--[if lt IE 9]> 
 <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<![endif]-->複製代碼

9. ie8不支持min-height  

解決：

div { min-height:100px; height:100px; height:auto !important; }複製代碼