Html css常见Bug及hack

Bug和Hack描述：

   首先，先简单的描述下在css中bug和hack的概念，虽然很多人早已经对bug理解的很透彻和清晰了，但我还是写一下我对它们的描述。
   CSS Bug：CSS样式在各浏览器中解析不一致的情况，或者说CSS样式在浏览器中不能显示我们所想要的效果，这样的问题称为CSS Bug。
   CSS Hack：在CSS 中，Hack一般指某种兼容CSS在不同的浏览器中正确显示的技巧方法，对于这种方法而言，都是开发者个人对CSS代码的修改，也可以称为“非官方的补丁”。

---

问题描述：

问题1：图片在IE浏览器上出现边框(在IE11以下会出现)：
描述：当给图片添加超链接 在IE11以下会图片四周会出现边框

  div a img{
            border: 0;
         /* border: none;  */
        }

代码见上👆
Hack：给图片加border: 0; 或者 border: none;   边框已经去除



问题2：图片间隙：
描述：给div盒子里面嵌套img标签会产生3~6像素的间隙

 div img{
            display: block;
           /*vertical-align: top;*/
        }

代码见上👆
Hack：给图片加 display: block; 或者 vertical-align: top;   间隙已经去除



问题3：双倍浮向（双倍边距）（只有IE6出现）：
描述：当IE6及以下版本浏览器在解析浮动元素时，会错误低把浮向边界（margin）加倍显示
比如：margin-left: 50px; 在IE6以下浏览器解析出来会显示 100px 边距

 div{
            display: inline;
        } 

代码见上👆
Hack：给div加 display: inline;   双倍边距已经去除

问题4：默认高度（ IE6及以下）：
描述：当IE6及以下版本浏览器中，部分块元素拥有默认高度（在16px~20px左右）

 div{
        overflow: hidden;
        /* font-size: 0; */
     } 

代码见上👆
Hack：给元素加 overflow: hidden; 或是 fon-size: 0 ;   默认高度已经去除

问题5：表单元素行高对齐不一致 ：
描述：表单元素行高对齐不一致

 float: left;

代码见上👆
Hack：给表单元素加 float: left; ;   解决对齐不一致

问题6：百分比Bug（ IE7及以下）：
描述：在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。只有在50% 这个比例上会出现该Bug。（也会受系统影响）

 .right{
            width: 50%;
            height: 300px;
            background: gold;
            float: right;
            clear: right; /* 清除右浮动 */
            
        }

代码见上👆
hack: 给右面的浮动元素添加声明：clear:right; 意思：清除右浮动。 clear:left:清除左浮动
        clear:both; 清除两边的浮动

问题7：透明属性：
hack: 兼容其他浏览器写法：opacity:value;(value的取值范围0-1; 例：opacity:0.5; )
         IE浏览器写法：filter:alpha(opacity=value);取值范围 1-100(整数)

问题8：li列表的Bug
描述: 1.当父元素(li) 有float:left;子元素(a) 没设置浮动的情况下会出现垂直bug；
Hack：给父元素li和子元素a都设置浮动；
问题2：当给li中的a转成block；并且有height,并有float的，li中没设置浮动会出现阶梯显示，
hack：同时给li加float;

问题9：当前元素(父元素里面第一个子元素)与父元素没有设置任何浮动的情况下，设置margin-top后，会错误的把margin-top加在父级元素上
Hack：1.给父级元素添加overflow:hidden;(推荐使用)
Hack：2.给父元素或者子元素加浮动
Hack：3.给父元素加边框 border: 1px solid #fff;

---

总结：

就先把学到的解决基本Bug的方法写到这。