Html flex基础不工作，图像在Safari中消失

我知道我的问题和其他人很相似，但情况不同

这就是它在Chrome中的显示方式

Safari

你可以看到地图在safari中消失了。我尝试过一些方法，包括以百分比表示的最小高度，但不起作用

注意：我想使图像和文本列具有相同的高度，大小将根据屏幕大小而改变，因此请不要为我建议固定宽度和高度

希望你们中的一些人能给我一些建议。谢谢

$（'#制表符'）。制表符({
激活：函数（事件，ui）{}
});
*{margin:0；padding:0；框大小：border-box}
html，正文{宽度：100%}
#触点，#触点面板{高度：92%；}
.全宽触点{
显示器：flex；
显示器：-moz盒；
显示：-webkit flexbox；
显示：-ms flexbox；
显示：-webkit flex；
显示：-moz flex；
弯曲方向：行；
-webkit柔性方向：行；
-moz弯曲方向：行；
-ms柔性方向：行；
身高：92%；
保证金：0；
填充：0；
}
.rowdisplay\u联系人{
显示器：flex；
显示器：-moz盒；
显示：-webkit flexbox；
显示：-ms flexbox；
显示：-webkit flex；
显示：-moz flex；
弯曲方向：立柱；
-webkit柔性方向：列；
-moz-flex方向：列；
-ms-flex方向：列；
身高：90%；
保证金：0；
填充：0；
}
.重复xcontact{
弹性：1；
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
}
.70{弹性基准：70%；}
.30{弹性基准：30%；}
.country_box{
字体大小：25px；
线高：1.2米；
填充：12%10%；
背景色：#5ba4ee；
}
.地址箱{
填充：12%10%；
背景色：#ccc；
}
.map{背景图像：url（“http://geology.com/world/world-map.gif");}
ul标签{
保证金：0；
填充：16%0；
列表样式类型：无；
}
李先生{
填充：5px0；
}
ul.lia{
颜色：#fff；
字体大小：粗体；
}
ul.a:悬停，.ui状态处于活动状态{
字体大小：粗体；
颜色：1d70c4；
大纲：无；
}
.ui状态激活a，
.ui状态激活：链接，
.ui状态活动a:已访问{
字体大小：粗体；
颜色：1d70c4；
文字装饰：无；
}
ul.a：聚焦{
大纲：无；
}

联系方式






内容1

我们的贵宾们都坐在车上

T 1234 5678

F 1234 5678

E
我刚刚在Safari（v11.0.2）、Chrome（v63.0.3239.132）和FireFox（v57.0.4）上测试了您的代码片段，似乎所有这些都可以使用


我还制作了一个代码笔来测试您的问题：

你能告诉我它是否有效吗？如果无效，你使用的是什么版本


$（'#制表符'）。制表符({
激活：函数（事件，ui）{}
});
*{margin:0；padding:0；框大小：border-box}
html，正文{宽度：100%}
#触点，#触点面板{高度：92%；}
.全宽触点{
显示器：flex；
显示器：-moz盒；
显示：-webkit flexbox；
显示：-ms flexbox；
显示：-webkit flex；
显示：-moz flex；
弯曲方向：行；
-webkit柔性方向：行；
-moz弯曲方向：行；
-ms柔性方向：行；
身高：92%；
保证金：0；
填充：0；
}
.rowdisplay\u联系人{
显示器：flex；
显示器：-moz盒；
显示：-webkit flexbox；
显示：-ms flexbox；
显示：-webkit flex；
显示：-moz flex；
弯曲方向：立柱；
-webkit柔性方向：列；
-moz-flex方向：列；
-ms-flex方向：列；
身高：90%；
保证金：0；
填充：0；
}
.重复xcontact{
弹性：1；
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
}
.70{弹性基准：70%；}
.30{弹性基准：30%；}
.country_box{
字体大小：25px；
线高：1.2米；
填充：12%10%；
背景色：#5ba4ee；
}
.地址箱{
填充：12%10%；
背景色：#ccc；
}
.map{背景图像：url（“http://geology.com/world/world-map.gif");}
ul标签{
保证金：0；
填充：16%0；
列表样式类型：无；
}
李先生{
填充：5px0；
}
ul.lia{
颜色：#fff；
字体大小：粗体；
}
ul.a:悬停，.ui状态处于活动状态{
字体大小：粗体；
颜色：1d70c4；
大纲：无；
}
.ui状态激活a，
.ui状态激活：链接，
.ui状态活动a:已访问{
字体大小：粗体；
颜色：1d70c4；
文字装饰：无；
}
ul.a：聚焦{
大纲：无；
}

联系方式






内容1

我们的贵宾们都坐在车上

T 1234 5678

F 1234 5678

E
我复制了您的代码段，因为在添加代码笔链接时需要添加代码。我使用的是Mac safari 5.1.10和windows safari 5.1.7。两人都有同样的问题。你有什么解决办法吗？这几天我一直在努力：（我使用与您相同的设置，但它在这里工作。如果您查看此网站（），您可以看到Safari 5.1不支持Display:flex；所以这就是问题：）如果Display:flex；不工作，可以使用
display:table在#选项卡和
显示：表格单元格；宽度：70%打开。重复xcontact。您可以随时检查备用方案。