css中常见的bug和hack

1、css hack原理：

针对不同的浏览器编写不同的样式代码

2、css中常见的bug和hack

2-1、图片3px问题

对应的hack：

<!-- 问题：一个盒子没有设置高度，图片放里面，盒子会比图片高出3px及以上。 -->
    <div><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_360_360%2Fbe%2F38%2Fbf%2Fbe38bf0082e844d1e99a108ac3a07ee4.jpeg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648017798&t=05ee3ebc734759c714af5a7ba7e1d7e4
"alt="">
    </div>

  div{
        width: 350px;
        /* 加边框是为了方便看到效果 */
        border: 1px solid #000;
    }

    img{
        /* 解决办法一：给图片加 vertical-align: top;就可以了 */
        vertical-align: top;
        /* 解决办法二：给图片设置display：block； */
    }

2-2、行内块元素水平方向之间有间隔

对应的hack：

  <!-- 问题：行内块元素水平方向之间有间隔 -->
    
    <!-- /* 解决办法二：去掉元素代码之间的间隔和换行 */ -->
    <input type="text"><button>提交</button>

/* 解决办法一：加浮动（但是需要清理浮动） */
        /* input {
            float: left;
        }
        button {
            float: left;
        } */

2-3、图片被a标签包裹，在低版本浏览器中会有边框

这里是IE7中

对应的hack：

  <!-- 问题：图片被a包裹，在低版本浏览器中会有边框 -->
   <a href="#"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_360_360%2Fcb%2Fcd%2Fca%2Fcbcdca8b8ff6c93491b559915bf47942.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648017798&t=3887cabab0256bed3623f2f202662492" alt=""></a>

/* 解决办法：给图片去掉边框border: 0px solid #000; 然后在ie里面查看效果，鼠标右键-查看源-选择版本8以下*/
    img{
        border: 0px solid #000;
    }

2-4、png24格式的图片，在低版本浏览器中显示不透明

对应的hack：

• 保存成png8格式（png是带透明格式的图）
• 保存成gif格式
  拓展：jpeg（jpg）图片格式，可以提升或者降低图片压缩级别，减少内存，会自动填充透明为白色

2-5、表单元素垂直方向不能对齐（细微差别！）

对应的hack：

<!-- 问题：表单元素垂直方向上不能对齐 -->
    <input type="text">
    <button>提交</button>

    /* 解决办法一:给元素添加浮动(但是要清除浮动） */
    /* input{
        float:left;
    }
    button{
        float:left;
    } */

    /* 解决办法二：给input设置vertical-align:*/
    input{
        vertical-align:top;
    }

2-6、margin的粘连问题（面试题）

对应的hack：

  <!-- 问题：margin的粘连问题（父随子动），就是一个大盒子（绿色）和小一个盒子（橘色），都分别的设置了宽高，
        但给橘色盒子设置距离绿色盒子外边距的时候，两个盒子还是粘在一起的 -->
    <div class="box1">
        <div class="box2"></div>
    </div>

   * {
        margin: 0;
        padding: 0;
        }
    .box1 {
            width: 200px;
            height: 200px;
            background-color: darkgreen;
           
            /* 解决办法一：使用内边距padding实现,哪个盒子大就给哪个盒子设置内边距 */
            /* padding-top:10px; */

            /* 解决办法二：给父元素设置透明边框 */
            /* border: 1px solid transparent; */

            /* 解决办法三：给父元素添加  overflow:hidden; */
            overflow:hidden;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: coral;
            margin-top: 10px;   
        }

2-7、margin的塌陷问题（面试题）

对应的hack：

  <!-- margin的塌陷问题 就是一个盒子设置了margin-bottom:20px;    一个盒子设置了margin-top:50px;   
        出现的问题就是两个盒子之间的间距并不是70px，而两个盒子之间的间隔是最大数值50px  -->
   
       <div class="box1"></div>
       <div id="wrap">
            <div class="box2"></div>
       </div>  

 * {
        margin: 0;
        padding: 0;
        }
    .box1{
        width: 1000px;
        height: 100px;
        background-color: blue;
        margin-bottom: 20px;
       
         /* 解决方法一：给一个元素身上设置足够的间隔
           (注意要把之前设置的margin-button:20px;和margin-top:50px;都注释掉）*/
        /* margin-bttom: 70px; */
    }


    .box2{
        width: 200px;
        height: 50px;
        background-color: cyan;
        margin-top: 50px;
       
    }
  

     #wrap{
         overflow: hidden;
     }

   /* 解决方法二：给其中一个元素添加一个父亲，给父亲设置overflow：hidden；
    (注意要把之前设置的margin-button:20px;和margin-top:50px;都显示出来哦） */ 

2-8、鼠标手型

对应的hack：

• 低版本中 cursor：hand；
• cursor：pointer；