Safari,css宽度:100%不起作用

时间:2017-09-02 11:41:42

标签: javascript jquery html css safari

在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>

jsfiddle

0 个答案:

没有答案