在safari中(我在IOS 9上测试)宽度不是100%。
我们会说4列中的1列,最后2列是假的,50乘50像素。第二个是徽标(例如,选择任何一个),他必须击败100%的宽度。在其他浏览器中,一切正常,除了safari之外,2列的左边缘在1上爬行。我画了正方形以便它可见并且徽标的高度小于特殊值。所以它是可见的。
.custom {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.mobicon {
height: 50px;
width: 50px;
text-align: center;
padding: 0;
background: #65b7ff;
}
.custom div:nth-child(2) {
width: 100%;
}
img {
padding: 0 20px;
width: auto;
height: 50px;
margin-top: 0;
}
.search-toggle {
height: 50px;
width: 50px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-right: 1px solid #1b1b01;
background: antiquewhite;
}
.header_logo {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-justify-content: center;
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
/* height: 100%; */
height: 45px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: aqua;
}
#jshop_module_cart div {
height: 50px;
width: 50px;
background: aqua;
}
<div class="custom">
<div class="uk-visible-small">
<div class="mobicon uk-navbar-toggle"></div>
</div>
<div class="uk-visible-small">
<div class="header_logo">
<a href="/"><img src="https://staticaltmetric.s3.amazonaws.com/uploads/2015/10/dark-logo-for-site.png"></a>
</div>
</div>
<div class="uk-visible-small">
<div class="search-toggle"><i class="fa fa-search"></i></div>
</div>
<div id="jshop_module_cart">
<div class="mobcart">
</div>
</div>
</div>
或