时间戳

首页 > 解决方案 > 为什么我的 flexbox 在 safari 中不显示？

css - 为什么我的 flexbox 在 safari 中不显示？

问题描述

我有一些文本在一个稍微不寻常的 flexbox/span 排列中（原因在这里解释）并且它没有在 Safari 中显示。在我尝试过的所有其他浏览器中它看起来都很好。

这似乎是一个常见问题，但大多数建议都是包含不同的 display:flex options，我已经应用了它，但它仍然不起作用。

有人有什么想法吗？

HTML

<h1>
   <span id="firstspan">this</span>
   <span id="secondspan">phrase</span>
</h1>

CSS

h1 {
   font-family: 'Fugaz One', serif;
   font-weight:300;
   position: absolute;
   transform: rotate(-7.7deg);
   color: transparent;
   -webkit-background-clip: text;
   background-clip: text;
   background-image: -webkit-linear-gradient(8deg, #d58da3, #fa8567, #fa9551); 
   background-image:    -moz-linear-gradient(8deg, #d58da3, #fa8567, #fa9551); 
   background-image:     -ms-linear-gradient(8deg, #d58da3, #fa8567, #fa9551); 
   background-image:      -o-linear-gradient(8deg, #d58da3, #fa8567, #fa9551);  
   background-image:         linear-gradient(8deg, #d58da3, #fa8567, #fa9551); 
   background-position-y: 1vw;
   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
   display: -ms-flexbox;      /* TWEENER - IE 10 */
   display: -webkit-flex;     /* NEW - Chrome */
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   font-size: 17.3vw;
   left: -2vw;
   top: calc(270px - 20vw); /*a smaller vw and it will move up as you shrink, a smaller px and it will shift up*/
}

#secondspan {
   font-size: 13.7vw;
   margin-left: -1vw;
   margin-top: -10.5vw;
}

标签： csssafari

解决方案

这是解决方案：

h1 {
   font-family: 'Fugaz One', serif;
   font-weight:300;
   position: absolute;
   transform: rotate(-7.7deg);
   color: transparent;
   -webkit-background-clip: text;
   background-clip: text;
   background-image: -webkit-linear-gradient(8deg, #d58da3, #fa8567, #fa9551); 
   background-image:    -moz-linear-gradient(8deg, #d58da3, #fa8567, #fa9551); 
   background-image:     -ms-linear-gradient(8deg, #d58da3, #fa8567, #fa9551); 
   background-image:      -o-linear-gradient(8deg, #d58da3, #fa8567, #fa9551);  
   background-image:         linear-gradient(8deg, #d58da3, #fa8567, #fa9551); 
   background-position-y: 1vw;
   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
   display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
   display: -ms-flexbox;      /* TWEENER - IE 10 */
   display: -webkit-flex;     /* NEW - Chrome */
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   justify-content: flex-start;
   align-items: flex-start;
   
   font-size: 17.3vw;
   left: -2vw;
   top: calc(270px - 20vw); /*a smaller vw and it will move up as you shrink, a smaller px and it will shift up*/
}

#secondspan {
   font-size: 13.7vw;
   margin-left: -1vw;
   margin-top: -10.5vw;
}
<h1>
   <span id="firstspan">this</span>
   <span id="secondspan">phrase</span>
</h1>

推荐阅读