Question

我使用css flexbox作为网格视图，使用Modernizr检测不支持flexbox的浏览器。

但似乎Android UC浏览器不理解flex-wrap: wrap;（它显示一行中的所有项目），同时使用应用于.flexbox.flexwrap类的样式。我做错了什么？

以下是示例代码：

＆＃13;

/*! modernizr 3.3.1 (Custom Build) | MIT *
 * https://modernizr.com/download/?-flexbox-flexwrap-addtest-prefixed-prefixedcss-prefixedcssvalue-setclasses-testallprops-testprop !*/
!function(e,n,t){function r(e,n){return typeof e===n}function o(){var e,n,t,o,i,s,f;for(var a in C)if(C.hasOwnProperty(a)){if(e=[],n=C[a],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(o=r(n.fn,"function")?n.fn():n.fn,i=0;i<e.length;i++)s=e[i],f=s.split("."),1===f.length?Modernizr[f[0]]=o:(!Modernizr[f[0]]||Modernizr[f[0]]instanceof Boolean||(Modernizr[f[0]]=new Boolean(Modernizr[f[0]])),Modernizr[f[0]][f[1]]=o),_.push((o?"":"no-")+f.join("-"))}}function i(e){var n=S.className,t=Modernizr._config.classPrefix||"";if(b&&(n=n.baseVal),Modernizr._config.enableJSClass){var r=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(r,"$1"+t+"js$2")}Modernizr._config.enableClasses&&(n+=" "+t+e.join(" "+t),b?S.className.baseVal=n:S.className=n)}function s(e,n){if("object"==typeof e)for(var t in e)w(e,t)&&s(t,e[t]);else{e=e.toLowerCase();var r=e.split("."),o=Modernizr[r[0]];if(2==r.length&&(o=o[r[1]]),"undefined"!=typeof o)return Modernizr;n="function"==typeof n?n():n,1==r.length?Modernizr[r[0]]=n:(!Modernizr[r[0]]||Modernizr[r[0]]instanceof Boolean||(Modernizr[r[0]]=new Boolean(Modernizr[r[0]])),Modernizr[r[0]][r[1]]=n),i([(n&&0!=n?"":"no-")+r.join("-")]),Modernizr._trigger(e,n)}return Modernizr}function f(e){return e.replace(/([a-z])-([a-z])/g,function(e,n,t){return n+t.toUpperCase()}).replace(/^-/,"")}function a(e){return e.replace(/([A-Z])/g,function(e,n){return"-"+n.toLowerCase()}).replace(/^ms-/,"-ms-")}function l(){return"function"!=typeof n.createElement?n.createElement(arguments[0]):b?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}function u(e,n){return!!~(""+e).indexOf(n)}function p(e,n){return function(){return e.apply(n,arguments)}}function d(e,n,t){var o;for(var i in e)if(e[i]in n)return t===!1?e[i]:(o=n[e[i]],r(o,"function")?p(o,t||n):o);return!1}function c(){var e=n.body;return e||(e=l(b?"svg":"body"),e.fake=!0),e}function h(e,t,r,o){var i,s,f,a,u="modernizr",p=l("div"),d=c();if(parseInt(r,10))for(;r--;)f=l("div"),f.id=o?o[r]:u+(r+1),p.appendChild(f);return i=l("style"),i.type="text/css",i.id="s"+u,(d.fake?d:p).appendChild(i),d.appendChild(p),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(n.createTextNode(e)),p.id=u,d.fake&&(d.style.background="",d.style.overflow="hidden",a=S.style.overflow,S.style.overflow="hidden",S.appendChild(d)),s=t(p,e),d.fake?(d.parentNode.removeChild(d),S.style.overflow=a,S.offsetHeight):p.parentNode.removeChild(p),!!s}function v(n,r){var o=n.length;if("CSS"in e&&"supports"in e.CSS){for(;o--;)if(e.CSS.supports(a(n[o]),r))return!0;return!1}if("CSSSupportsRule"in e){for(var i=[];o--;)i.push("("+a(n[o])+":"+r+")");return i=i.join(" or "),h("@supports ("+i+") { #modernizr { position: absolute; } }",function(e){return"absolute"==getComputedStyle(e,null).position})}return t}function m(e,n,o,i){function s(){p&&(delete L.style,delete L.modElem)}if(i=r(i,"undefined")?!1:i,!r(o,"undefined")){var a=v(e,o);if(!r(a,"undefined"))return a}for(var p,d,c,h,m,g=["modernizr","tspan","samp"];!L.style&&g.length;)p=!0,L.modElem=l(g.shift()),L.style=L.modElem.style;for(c=e.length,d=0;c>d;d++)if(h=e[d],m=L.style[h],u(h,"-")&&(h=f(h)),L.style[h]!==t){if(i||r(o,"undefined"))return s(),"pfx"==n?h:!0;try{L.style[h]=o}catch(y){}if(L.style[h]!=m)return s(),"pfx"==n?h:!0}return s(),!1}function g(e,n,t,o,i){var s=e.charAt(0).toUpperCase()+e.slice(1),f=(e+" "+j.join(s+" ")+s).split(" ");return r(n,"string")||r(n,"undefined")?m(f,n,o,i):(f=(e+" "+T.join(s+" ")+s).split(" "),d(f,n,t))}function y(e,n,r){return g(e,t,t,n,r)}var _=[],C=[],x={_version:"3.3.1",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){C.push({name:e,fn:n,options:t})},addAsyncTest:function(e){C.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=x,Modernizr=new Modernizr;var w,S=n.documentElement,b="svg"===S.nodeName.toLowerCase();!function(){var e={}.hasOwnProperty;w=r(e,"undefined")||r(e.call,"undefined")?function(e,n){return n in e&&r(e.constructor.prototype[n],"undefined")}:function(n,t){return e.call(n,t)}}(),x._l={},x.on=function(e,n){this._l[e]||(this._l[e]=[]),this._l[e].push(n),Modernizr.hasOwnProperty(e)&&setTimeout(function(){Modernizr._trigger(e,Modernizr[e])},0)},x._trigger=function(e,n){if(this._l[e]){var t=this._l[e];setTimeout(function(){var e,r;for(e=0;e<t.length;e++)(r=t[e])(n)},0),delete this._l[e]}},Modernizr._q.push(function(){x.addTest=s});var P="Moz O ms Webkit",T=x._config.usePrefixes?P.toLowerCase().split(" "):[];x._domPrefixes=T;var E=function(e,n){var t=!1,r=l("div"),o=r.style;if(e in o){var i=T.length;for(o[e]=n,t=o[e];i--&&!t;)o[e]="-"+T[i]+"-"+n,t=o[e]}return""===t&&(t=!1),t};x.prefixedCSSValue=E;var j=x._config.usePrefixes?P.split(" "):[];x._cssomPrefixes=j;var z=function(n){var r,o=prefixes.length,i=e.CSSRule;if("undefined"==typeof i)return t;if(!n)return!1;if(n=n.replace(/^@/,""),r=n.replace(/-/g,"_").toUpperCase()+"_RULE",r in i)return"@"+n;for(var s=0;o>s;s++){var f=prefixes[s],a=f.toUpperCase()+"_"+r;if(a in i)return"@-"+f.toLowerCase()+"-"+n}return!1};x.atRule=z;var N={elem:l("modernizr")};Modernizr._q.push(function(){delete N.elem});var L={style:N.elem.style};Modernizr._q.unshift(function(){delete L.style});x.testProp=function(e,n,r){return m([e],t,n,r)};x.testAllProps=g;var O=x.prefixed=function(e,n,t){return 0===e.indexOf("@")?z(e):(-1!=e.indexOf("-")&&(e=f(e)),n?g(e,n,t):g(e,"pfx"))};x.prefixedCSS=function(e){var n=O(e);return n&&a(n)};x.testAllProps=y,Modernizr.addTest("flexbox",y("flexBasis","1px",!0)),Modernizr.addTest("flexwrap",y("flexWrap","wrap",!0)),o(),i(_),delete x.addTest,delete x.addAsyncTest;for(var k=0;k<Modernizr._q.length;k++)Modernizr._q[k]();e.Modernizr=Modernizr}(window,document);

＆＃13;

* {margin: 0; padding: 0; box-sizing: border-box;}

.item {
  height: 100px;
  background: green;
  box-shadow: 0 0 0 1px white;
  width: 50%;
}

.flexbox.flexwrap .container{
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.flexbox.flexwrap .item {
  float: none;
}

＆＃13;

<div class="container">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>

＆＃13;

并且jsfiddle：https://jsfiddle.net/vL2azcc2/3/

检测UC浏览器以及部分支持flexbox的浏览器

0 个答案: