我的前端筆記 之 bug篇

韓可樂發表於2018-04-17
前端筆記

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

我的前端筆記 之 bug篇

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

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

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; }複製程式碼


相關文章