問題描述

在使用autoprefixer時(shí),我嘗試了last 2 versions和 > 1%,生成的css中對(duì)box-sizing等樣式均沒有添加wbe-kit前綴.請(qǐng)問這個(gè)結(jié)果可用嗎?P.S.:項(xiàng)目只在移動(dòng)端使用.(移動(dòng)端瀏覽器/微信/app內(nèi)嵌H5使用)

問題解答

可用。所有市佔(zhàn)>1%的browsers的最新兩個(gè)版本都不用prefix。

https://github.com/postcss/autoprefixer

Autoprefixer utilizes the most recent data from Can I Use to add only necessary vendor prefixes.

http://shouldiprefix.com/#box-sizing

.example { box-sizing: border-box; /* Ch, Saf 5.1+, IE 8+, Op 9+ */}

http://caniuse.com/#feat=css3-boxsizing

Global 97.61%unprefixed: 96.6%

Chrome has problems selecting options from the select element when using box-sizing: border-box and browser zoom level is less than 100%.

IE 8 ignores box-sizing: border-box if min/max-width/height is used.

IE9 will subtract the width of the scrollbar to the width of the element when set to position: absolute / fixed , overflow: auto / overflow-y: scroll

Safari 6.0.x does not use box-sizing on elements with display: table;

Android browsers do not calculate correctly the dimensions (width and height) of the HTML select element.

In IE8, the min-width property applies to content-box even if box-sizing is set to border-box.

Edit:

那些內(nèi)嵌webview的app都是在用android的原生browser，但是我找不到官方的版本列表可用，不過android上了5以后，原生的webview變成可獨(dú)立於android的可升級(jí)版本system apk叫'Android System WebView'所以比較不用擔(dān)心版本落后，建議你去下載genymotion直接跑原生的Browser app去測(cè)試一下。

我只找到坊間android/webkit的列表，也可以參考google chrome的。

http://caniuse.com/ 瀏覽器大致版本，以及哪些瀏覽器應(yīng)該增加前綴，都有標(biāo)示

last 2 versions 這句話大致就是所有瀏覽器的最后兩個(gè)版本，所有你可以按照你的需求進(jìn)行相應(yīng)修改，我按照你的需求，給你個(gè)案例：

last 10 versions