标签：第九天 浏览器 color 前端 IE6 Hack 新手 display red

文章目录

• • • IE 浏览器常见兼容问题
    • CSS Hack

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显示红色
      

标签：第九天,浏览器,color,前端,IE6,Hack,新手,display,red
来源： https://blog.csdn.net/Beckoning_/article/details/111527421

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。