同一个属性如何兼容各种浏览器

背景:css在chrome下运行无误,上线后,发现不兼容低版本的IE.

测试条件:chrome、firefox、360IE(文档模式为7)、QQ、搜狗浏览器

遇到的问题：

产品数量增减按钮在chrome下显示如下,但是在firefox和360中都显示"部件分离"状

   

    修改CSS,调整整个部件(加减号和input框)的宽度,区分不同的浏览器,

     IE:用*width

           .Numinput{

                width:92px;   //主流浏览器

                *width:94px;   //*是IE的专用符

           }

 

     firefox:

         @-moz-document url-prefix() /*Firefox,就是以下句子只针对firefox有效*/

 

         {
              .Numinput {
                    width:94px;
              }

 

         }

 

这只是冰山一角,因为遇到了这个问题就mark下了，还有很多H5属性的兼容，做这个的时候还遇到了data-value属性不兼容的问题,这个就需要判断是否能通过dataset.value获取,否则就用算法实现.