码迷,mamicode.com
首页 > Web开发 > 详细

浏览器常见兼容问题、cssHack

时间:2020-12-28 11:03:28      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:auto   移除   flow   border   img   clear   兼容   after   下划线   

兼容

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

浏览器常见兼容问题、cssHack

标签:auto   移除   flow   border   img   clear   兼容   after   下划线   

原文地址:https://www.cnblogs.com/majiancheng/p/14169451.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!