flex-basis 不起作用，图像在 Safari 中消失 [重复]
Posted
技术标签:
【中文标题】flex-basis 不起作用，图像在 Safari 中消失 [重复]【英文标题】：flex-basis not working, image disappears in Safari [duplicate] 【发布时间】：2018-06-19 04:58:15 【问题描述】：我知道我的问题与其他人非常相似，但情况不同。
这就是它在 Chrome 中的显示方式
Safari
您可以看到地图在 safari 中消失了。我尝试了一些方法，包括 min-height in percent 但不起作用。
注意：我想让图片和文字栏的高度相同，尺寸会根据屏幕大小而改变，所以请不要为我建议固定的宽度和高度。
希望你们中的一些人能给我一些建议。谢谢！
$('#tabs').tabs(
activate: function (event, ui)
);* margin:0;padding:0;box-sizing:border-box
html, body width:100%
#Contact, #contact-panel height: 92%;
.fullwidth_contact
display: flex;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
flex-direction: row;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
height: 92%;
margin: 0;
padding:0;
.rowdisplay_contact
display: flex;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
flex-direction: column;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
height: 90%;
margin: 0;
padding:0;
.repeat-xcontact
flex: 1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
.width70flex-basis: 70%;
.width30flex-basis: 30%;
.country_box
font-size: 25px;
line-height: 1.2em;
padding: 12% 10%;
background-color: #5ba4ee;
.address_box
padding: 12% 10%;
background-color: #ccc;
.map background-image: url("http://geology.com/world/world-map.gif");
ul.tabs
margin:0;
padding: 16% 0 0 0;
list-style-type: none;
ul.tabs li
padding: 5px 0;
ul.tabs li a
color: #fff;
font-weight: bold;
ul.tabs li a:hover, .ui-state-active
font-weight: bold;
color: #1d70c4;
outline:none;
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited
font-weight: bold;
color: #1d70c4;
text-decoration: none;
ul.tabs li a:focus
outline:none;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="tabs" class="fullwidth_contact">
<div class="repeat-xcontact map width70"></div>
<div class="repeat-xcontact width30">
<!-- <div class="rowdisplay_contact width100"> -->
<div class="repeat-xcontact country_box">
<div class="txt8">CONTACT</div><br/>
<ul class="tabs" data-persist="true">
<li><a href="#view1">Content 1</a></li>
<li><a href="#view2">Content 2</a></li>
<li><a href="#view3">Content 3</a></li>
</ul>
</div>
<div class="repeat-xcontact address_box">
<div id="view1">
<p class="country_title">Content 1</p>
<p>Cras dignissim lectus sed dui ullamcorper, et suscipit justo vehicula.</p>
<p>T 1234 5678</p>
<p>F 1234 5678</p>
<p>E <script language="javascript"><!--
var name = "info";
var domain = "test.com";
document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
document.write(name + '@' + domain + '</a>');
// --><!--</script></p>
</div>
<div id="view2">
<p class="country_title">Content 2</p>
<p>Cras dignissim lectus sed dui ullamcorper, et suscipit justo vehicula.</p>
<p>T 1234 5678</p>
<p>F 1234 5678</p>
<p>E <script language="JavaScript"><!--
var name = "info";
var domain = "test.com";
document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
document.write(name + '@' + domain + '</a>');
// --><!--</script></p>
</div>
<div id="view3">
<p class="country_title">Content 3</p>
<p>Cras dignissim lectus sed dui ullamcorper, et suscipit justo vehicula.</p>
<p>T 1234 5678</p>
<p>F 1234 5678</p>
<p>E <script language="JavaScript"><!--
var name = "info";
var domain = "test.com";
document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
document.write(name + '@' + domain + '</a>');
// --><!--</script></p>
</div>
</div>
<!-- </div> -->
</div>
</div>【问题讨论】：
【参考方案1】：我刚刚在 Safari (v11.0.2)、Chrome (v63.0.3239.132) 和 FireFox (v57.0.4) 上测试了您的 sn-p，它似乎对所有这些都有效。
我还制作了一个 codepen 来测试您的问题： https://codepen.io/mike-scheurwater/pen/zpWxOO
您能告诉我它是否有效，如果无效，您使用的是什么版本？
$('#tabs').tabs(
activate: function (event, ui)
);* margin:0;padding:0;box-sizing:border-box
html, body width:100%
#Contact, #contact-panel height: 92%;
.fullwidth_contact
display: flex;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
flex-direction: row;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
height: 92%;
margin: 0;
padding:0;
.rowdisplay_contact
display: flex;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
flex-direction: column;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
height: 90%;
margin: 0;
padding:0;
.repeat-xcontact
flex: 1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
.width70flex-basis: 70%;
.width30flex-basis: 30%;
.country_box
font-size: 25px;
line-height: 1.2em;
padding: 12% 10%;
background-color: #5ba4ee;
.address_box
padding: 12% 10%;
background-color: #ccc;
.map background-image: url("http://geology.com/world/world-map.gif");
ul.tabs
margin:0;
padding: 16% 0 0 0;
list-style-type: none;
ul.tabs li
padding: 5px 0;
ul.tabs li a
color: #fff;
font-weight: bold;
ul.tabs li a:hover, .ui-state-active
font-weight: bold;
color: #1d70c4;
outline:none;
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited
font-weight: bold;
color: #1d70c4;
text-decoration: none;
ul.tabs li a:focus
outline:none;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="tabs" class="fullwidth_contact">
<div class="repeat-xcontact map width70"></div>
<div class="repeat-xcontact width30">
<!-- <div class="rowdisplay_contact width100"> -->
<div class="repeat-xcontact country_box">
<div class="txt8">CONTACT</div><br/>
<ul class="tabs" data-persist="true">
<li><a href="#view1">Content 1</a></li>
<li><a href="#view2">Content 2</a></li>
<li><a href="#view3">Content 3</a></li>
</ul>
</div>
<div class="repeat-xcontact address_box">
<div id="view1">
<p class="country_title">Content 1</p>
<p>Cras dignissim lectus sed dui ullamcorper, et suscipit justo vehicula.</p>
<p>T 1234 5678</p>
<p>F 1234 5678</p>
<p>E <script language="JavaScript"><!--
var name = "info";
var domain = "test.com";
document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
document.write(name + '@' + domain + '</a>');
// --><!--</script></p>
</div>
<div id="view2">
<p class="country_title">Content 2</p>
<p>Cras dignissim lectus sed dui ullamcorper, et suscipit justo vehicula.</p>
<p>T 1234 5678</p>
<p>F 1234 5678</p>
<p>E <script language="JavaScript"><!--
var name = "info";
var domain = "test.com";
document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
document.write(name + '@' + domain + '</a>');
// --><!--</script></p>
</div>
<div id="view3">
<p class="country_title">Content 3</p>
<p>Cras dignissim lectus sed dui ullamcorper, et suscipit justo vehicula.</p>
<p>T 1234 5678</p>
<p>F 1234 5678</p>
<p>E <script language="JavaScript"><!--
var name = "info";
var domain = "test.com";
document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
document.write(name + '@' + domain + '</a>');
// --><!--</script></p>
</div>
</div>
<!-- </div> -->
</div>
</div>【讨论】：
我复制了你的 sn-p 因为我需要在添加 codepen-link 时添加代码。 我使用的是 Mac safari 5.1.10 和 windows safari 5.1.7。两者都遇到了同样的问题。你有什么解决办法吗？我已经为此苦苦挣扎了几天:( 我使用的设置和你一样，但是在这里可以使用。 如果您查看此站点 (caniuse.com/#search=flex)，您会发现 Safari 5.1 不支持 Display:flex；这就是问题所在:) 如果显示：flex；不起作用，您可以在#tabs 上使用display: table;，在.repeat-xcontact 上使用display:table-cell; width: 70%;。您可以随时查看modernizer 以获取后备选项。以上是关于flex-basis 不起作用，图像在 Safari 中消失 [重复]的主要内容，如果未能解决你的问题，请参考以下文章