css - 在safari浏览器下显示异常

问题描述

问 题

我的项目在PC端正常工作，然而在safari浏览器下显示错位。请问是啥缘故？（在项目的最后设置了相应的媒体查询）
项目地址：纪念碑谷

解决方案

造成问题的原因(两步)：

1. .waveinner的display属性为flex，且设置了flex-direction属性为column。

2. .waveinner有两个子DIV(position为absolute的那个不考虑),且两个子DIV的高度和(450px+500px)大于.waveinner的高度(500px)。

在这种情况下：

在chrome中，两个子DIV的高度会根据其原始高度按百分比解析成和为.waveinner高度的两个DIV，不会溢出；

而在Safari中，两个子DIV则会被解析原始高度，然后溢出。

一个小例子

题主的情况与这个又有些许不同：

题主的第一个子DIV，也有一个子DIV，并且设置了高度250px,边框50px，也就是350px。

所以根据以上原因：

在chrome中，第一个子DIV将不会根据百分比解析高度，而是直接解析成350px的高度，加上50px的边框，又由于不会溢出的缘故，所以第二个子DIV的高度也就只剩下500-350-100=50px了。

而在Safari中，由于溢出的缘故，并没有影响，两个子DIV被解析成css中设置的高度：450px和500px。

解决办法：.wave .parallelogram的样式中的height设置为50px。

这篇关于css - 在safari浏览器下显示异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！