物品详情页面特性盒子模型优雅降级 by @赵彪

@@ -16,6 +16,7 @@ var goodsDiscountEl = document.getElementById('goodsDiscount'),
     goodsDiscountHammer = goodsDiscountEl && new Hammer(goodsDiscountEl);
     goodsDiscountHammer = goodsDiscountEl && new Hammer(goodsDiscountEl);
 
 
 var $cart = $('.cart-bar');
 var $cart = $('.cart-bar');
+var UA = navigator.userAgent.toLowerCase().toString();
 
 
 require('./desc');
 require('./desc');
 require('./comments-consults');
 require('./comments-consults');
@@ -81,4 +82,8 @@ $.ajax({
     }
     }
 });
 });
 
 
+
+if (UA.indexOf('MQQBrowser') > -1) {
+    $('.detail > div').removeClass('column').addClass('oldbox');
+}
 require('./like');
 require('./like');

@@ -64,6 +64,20 @@ $basicBtnC:#eb0313;
                         flex-basis: 49.9%
                         flex-basis: 49.9%
                     ))
                     ))
                 }
                 }
+                .oldbox{
+                    padding: 4% 3%;
+                    width: 49.9%;
+                    background-color: $tableCellC;
+                    box-sizing: border-box;
+                    border-bottom: 1px solid #fff;
+                    border-right: 1px solid #fff;
+                    width: 49.9%;
+                    height: 100%;
+                    float: left;
+                    text-overflow:ellipsis; 
+                    white-space:nowrap; 
+                    overflow:hidden;
+                }
             }
             }
         }
         }
     }
     }

@@ -11,10 +11,6 @@
             background-size: cover;
             background-size: cover;
         }
         }
         .detail{
         .detail{
-            // background-color: $tableCellC;
-            // &.table .inner-container{
-            //     background-color: $tableCellC;
-            // }
             margin-bottom: 1px;
             margin-bottom: 1px;
         }
         }
         .desc-text {
         .desc-text {
@@ -42,30 +38,21 @@
         .detail {
         .detail {
             .material-item{
             .material-item{
                 margin: pxToRem(10px) 0;
                 margin: pxToRem(10px) 0;
-                @include flexbox((
-                    display: box,
-                    box-align: center
-                ), $version: 1);
-                @include flexbox((
-                    display: flex,
-                    align-items: center
-                ));
+                width: 100%;
+                height: auto;
+                overflow: hidden;
+                display: block;
+                position: relative;
 
 
                 img {
                 img {
                     margin: 0;
                     margin: 0;
                 }
                 }
                 .material-image {
                 .material-image {
                     width: 23%;
                     width: 23%;
-                    @include flexbox((
-                        box-flex: 1.0,
-                        display: box,
-                        box-pack: center
-                    ), $version: 1);
-                    @include flexbox((
-                        display: flex,
-                        flex-basis: 23%,
-                        justify-content: center
-                    ));
+                    position: absolute;
+                    left: 0;
+                    top: 50%; 
+                    @include transform(translateY(-50%))
                 }
                 }
                 .material-desc {
                 .material-desc {
                     font-size: pxToRem(24px);
                     font-size: pxToRem(24px);
@@ -76,15 +63,8 @@
                     line-height: pxToRem(38px);
                     line-height: pxToRem(38px);
                     color: #4b4b4b;
                     color: #4b4b4b;
                     word-wrap: break-word;
                     word-wrap: break-word;
-                    width: 76.9;
-                    @include flexbox((
-                        box-flex: 1.0,
-                        display: box
-                    ), $version: 1);
-                    @include flexbox((
-                        display: flex,
-                        flex-basis: 76.9%
-                    ));
+                    width: 76.9%;
+                    float: right;
                 }
                 }
                 &:last-child{
                 &:last-child{
                     border-bottom: none;
                     border-bottom: none;