在 IE 和 Edge 中使用 display:flex 的情況下， background-clip ( -webkit- background-clip ):text 不會有作用。 拿掉 flexbox 就又能正常顯示… 如下面 codepen 中的範例：  See the Pen background-clip by cj ( @cjzopen ) on CodePen . html,body{ margin:0; padding:0; } div{ background-image:url(https://picsum.photos/1920/600/?random); background-size:cover; height:100vh; /*if display flex, background-clip will not working in ie and edge17 */ /*display:flex;*/ /*justify-content:center;*/ /*align-items:center;*/ /* fixed */ line-height:100vh; text-align: center; font-size:15vw; font-weight:700; background-clip: text; -webkit-background-clip: text; color: rgba(0,0,0,.2); position:relative; /* mix-blend-mode: difference; */ } div::after{ content:''; position:absolute; z-index:-1; left:0; top:0; width:100%; height:100%; background-size:cover; /*style1*/ /* Not all images are suitable for this gradient. You can change it. */ background-image:linea

在 iphone6 safari (版本更之前的iphone沒有實驗) 會出現以下情況才會出現，而 ipad 和其它瀏覽器順利地運作換行： flexbox 子層在 width:auto 的情況下，flex-wrap:wrap 會失效。 另外在子層 flex-grow:1 的情況下，在 IE 中，右邊的子層會直接蓋在左邊的子層上。 -- 解決： 子層 width:auto 拿掉，右邊改成 width:100%