适合前端新手学习资料(第九天)

文章目录

IE 浏览器常见兼容问题

  • 兼容问题

    • ie中图片边框问题

      • 图片放在a标签中

      • img {
            border:none
        }
        
    • ie8以下浏览器中背景复合属性的写法问题

      • .bg {
            background:url("./images/bg.jpg")no-repeat center
        }
        
      • //解决方案:在url和no-repeat 直接加上空格
        .bg {
            background:url("./images/bg.jpg") no-repeat center
        }
        
    • 其他ie低版本兼容问题

      • 在IE6及更早浏览器中定义小高度的容器

        • #test {
          	overflow:hidden;
              height:1px;
              font-size:0;
              line-height:0;
          }
          
      • IE6及更早浏览器浮动时产生双倍边距的BUG

        • 解决方案:针对ie6设置该标签的display属性为inline即可

        • #test {
          	float:left;
              _display:inline;
          }
          
      • IE7及更早浏览器下子标签相对定位时父标签overflow属性的auto|hidden失效的问题

        • 解决方案:给父标签也设置相对定位position:relative;
      • 块转行内块 ie7 不在一行显示

        • 解决方案:

        • div {
              display:inline-block;
              *display:inline;
              *zoom:1;
          }
          
      • ie7 及以下浏览器 清浮动问题

        • 		/* : 单冒号兼容性更好,不推荐用双冒号 :: */
                  .clearfix:after {
                      content: '';
                      display: block;
                      clear: both;
                  }
            
                  /* 兼容 ie7 及以下浏览器 清浮动问题 */
                  .clearfix {
                      *zoom: 1;
                  }
          

CSS Hack

  • 条件Hack

    • 大于:gt

    • 大于或等于:gte

    • 小于:lt

    • 小于或等于:lte

    • <!--[if IE]>
             <p>只在IE中能看到这个段落</p> 
         <![endif]-->
         //只有IE6以上,才能看到应用了test类的标签是红色文本
       <!--[if gt IE 6]>
             <style>
               .test {
                     color:red;
               }
             </style>
       <![endif]-->
      
    • IE10以上已经将条件注释移除,使用时要注意

    • 属性级Hack

      • _ 下划线:选择IE6及以下

      • *:选择IE7及以下

      • \0:选择ie8以上

    • color:red;//所有浏览器可识别
      _color:red;//仅IE6识别
      *color:red;//IE6、IE7识别
      color:red\0;//IE8、IE9识别
      
    • 选择符级Hack

      • * html .box {
            background:red;
        }//只有在IE6显示红色
        
      • * + html .box {
            background:red;
        }//只有在IE7显示红色
        
上一篇:CTF web每日一题


下一篇:Hack The Box::Blunder