資訊專欄INFORMATION COLUMN
摘要：但是我突然就發(fā)現(xiàn)一個(gè)問(wèn)題呀，這個(gè)顯示的不對(duì)呀，而且在和都顯示不對(duì)，倒是在里顯示正常。同時(shí)放在了在上的，這里會(huì)長(zhǎng)期寫(xiě)一些關(guān)于的文章
哇哇哇，開(kāi)年頭一篇文章呀，為了鎮(zhèn)得住場(chǎng)面，特意起了這么個(gè)標(biāo)題。沒(méi)錯(cuò)，就是標(biāo)題黨。
事情還得從上周五開(kāi)始說(shuō)起，那天下午，我正在公司改產(chǎn)品妹子提的需求，改了一會(huì)后，就切換到Chrome看看效果，走走單元測(cè)試，呵呵呵。但是我突然就發(fā)現(xiàn)一個(gè)問(wèn)題呀，這個(gè)flex item顯示的不對(duì)呀，而且在FF和Chrome都顯示“不對(duì)”，倒是在IE11里顯示“正?！薄?/p>
正常的話就是上面這個(gè)圖所顯示的，html和css代碼如下圖：
但是現(xiàn)在卻顯示成這個(gè)鬼樣子了，↓↓↓
看到這個(gè)，我腦子里第一蹦出來(lái)的是第二個(gè)select框option里內(nèi)容太多了。可是我的三個(gè)filter-item的flex值都是1呀，對(duì)應(yīng)起來(lái)可是flex: 1 1 0，標(biāo)準(zhǔn)的三等分呀。當(dāng)時(shí)時(shí)間比較趕，我就給select寫(xiě)了個(gè)max-width屬性，臨時(shí)算看著沒(méi)毛病。
可是周末在家，想想，這也不是個(gè)事呀，我可是通讀過(guò)flex規(guī)范的呀，怎么能容忍這種不受我控制的樣式出現(xiàn)呢。于是，我又通讀了一遍規(guī)范，呵呵呵，臉好疼。
突然，腦子里蹦出來(lái)，之前在Firefox里出現(xiàn)過(guò)這種情況，當(dāng)時(shí)在stackoverflow搜到的解決方法時(shí)加個(gè)min-width: 1px; 還說(shuō)這個(gè)是Firefox的bug，可是這個(gè)情況現(xiàn)現(xiàn)在在Chrome和FF里都出現(xiàn)了，那它現(xiàn)在是不是bug就存疑了，隨后拿關(guān)鍵字搜了一下，呵呵呵。
鏈接在這：
然后又順著找到了這里：
鏈接在這：
呵呵呵，F(xiàn)F和Chrome的flex item的min-width的initial value現(xiàn)在是auto了，貼一段官方的描述：
To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1.On a flex item whose overflow is visible in the main axis, when specified on the flex item’s main-axis min-size property, the following table gives the minimum size...
上面一段blabla，意思就是說(shuō)，flex item如果它的overflow屬性值是visible的話，那么現(xiàn)在min-width和min-height的initial value是auto啦，至于這個(gè)auto最后是怎么計(jì)算的，它是根據(jù)specified size、transferred size、content size三者由一些規(guī)則算出來(lái)的，有興趣可以找找官方文檔自己看看，在我寫(xiě)的頁(yè)面里呢，最后計(jì)算勝出的是content size，再貼一段官方描述：
The content size is the min-content size in the main axis, clamped, if it has an aspect ratio, by any definite min and max cross size properties converted through the aspect ratio, and then further clamped by the max main size property if that is definite
所以在我這里確實(shí)是第二個(gè)select的某個(gè)option的text太長(zhǎng)了，所以并不是什么bug，呵呵呵。
解決辦法，就是把flex-item的visible屬性設(shè)為非visible的合法值，或者手動(dòng)設(shè)置一下min-width或者min-height的值為非auto的其他合法值。
同時(shí)放在了在github上的something of css，這里會(huì)長(zhǎng)期寫(xiě)一些關(guān)于css的文章
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115220.html
摘要：隨著微信等社交的興起，語(yǔ)音聊天成為很多必備功能，大到將語(yǔ)音聊天作為主要功能的社交，小到電商的語(yǔ)音客服店小二功能，語(yǔ)音聊天成為了必不可少的方式。 隨著微信等社交App的興起，語(yǔ)音聊天成為很多App必備功能，大到將語(yǔ)音聊天作為主要功能的社交App，小到電商App的語(yǔ)音客服、店小二功能，語(yǔ)音聊天成為了必不可少的方式。 但是很多人感覺(jué)網(wǎng)頁(yè)端語(yǔ)音離我們很遙遠(yuǎn)，這些更多是本地應(yīng)用的工作，其實(shí)不然，...
摘要：隨著微信等社交的興起，語(yǔ)音聊天成為很多必備功能，大到將語(yǔ)音聊天作為主要功能的社交，小到電商的語(yǔ)音客服店小二功能，語(yǔ)音聊天成為了必不可少的方式。 隨著微信等社交App的興起，語(yǔ)音聊天成為很多App必備功能，大到將語(yǔ)音聊天作為主要功能的社交App，小到電商App的語(yǔ)音客服、店小二功能，語(yǔ)音聊天成為了必不可少的方式。 但是很多人感覺(jué)網(wǎng)頁(yè)端語(yǔ)音離我們很遙遠(yuǎn)，這些更多是本地應(yīng)用的工作，其實(shí)不然，...
摘要：第部分第部分第部分第部分源代碼下載每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從下載代碼解讀解數(shù)獨(dú)的一項(xiàng)基本功是能迅速判斷一行一列或一個(gè)九宮格中缺少哪幾個(gè)數(shù)字，本項(xiàng)目就是一個(gè)訓(xùn)練判斷九宮格中缺少哪個(gè)數(shù)字的小游戲。 showImg(https://segmentfault.com/img/bVbkNGa?w=400&h=300); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)...
摘要：第部分第部分第部分第部分源代碼下載每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從下載代碼解讀解數(shù)獨(dú)的一項(xiàng)基本功是能迅速判斷一行一列或一個(gè)九宮格中缺少哪幾個(gè)數(shù)字，本項(xiàng)目就是一個(gè)訓(xùn)練判斷九宮格中缺少哪個(gè)數(shù)字的小游戲。 showImg(https://segmentfault.com/img/bVbkNGa?w=400&h=300); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)...
閱讀 2305·2021-09-27 13:35
閱讀 586·2019-08-30 15:55
閱讀 838·2019-08-30 15:53
閱讀 581·2019-08-30 15:52
閱讀 2177·2019-08-30 12:59
閱讀 2300·2019-08-29 16:42
閱讀 1485·2019-08-26 18:26
閱讀 2498·2019-08-26 13:48
