flex-basis不工作，图像在Safari中消失
我知道我的问题与其他人很相似，但案例不同。
这是 Chrome 中显示的内容
Safari浏览器
你可以看到地图在野生动物园中消失了。我尝试了一些方法，包括最小高度百分比但不起作用。
请注意：我想让图片和文字栏的高度相同，大小会根据屏幕尺寸而改变，所以请不要为我建议修正宽度和高度
希望你们中的一些人可以给我一些建议。谢谢！
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$('#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;
}
.width70{flex-basis: 70%;}
.width30{flex-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 个答案:
答案 0 :(得分：1)
我刚刚在Safari（v11.0.2），Chrome（v63.0.3239.132）和FireFox（v57.0.4）上测试了您的代码段，它似乎适用于所有这些代码。
我还做了一个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;
}
.width70{flex-basis: 70%;}
.width30{flex-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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？