我的前端笔记 之 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; }复制代码

转载于:https://juejin.im/post/5ad58b32518825557e78e274