Css媒体查询 - 当条件失败时，默认样式不适用

Question

我有最大宽度的媒体查询，因此当用户调整浏览器大小时，设计将是响应式的。问题是，当用户返回到原始浏览器大小时，设计将留下一点混乱，它不会返回到初始位置。当我重新加载页面时，一切都很好。我认为当条件不满足时应该应用媒体查询规则并且只应用默认的css？

调整大小之前：

调整大小时：

重新调整大小后：

.nav-main-link {
    display: inline-block;
    border-right: 1px solid black;
    min-height: 50px;
}

#nav-main-search {
    float: right;
    margin-top: 10px;
    margin-right: 10px;
}

#nav-main-search .search-input {
    border-radius: 5px 0px 0px 5px;
    width: 225px;
    font-size: 1.0em;
    box-sizing: border-box;
    padding: 2px 0px 0px 10px;
    height: 2em;
}

@media (max-width: 600px) {

    .nav-main-link {
        display: block;
        border-bottom: 1px solid white;
        border-right: 0;
    }

    #nav-main-search {
        float: none;
        position: relative;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 50px; 
    }

    #nav-main-search .search-input {
        display: block;
        width: 100%;
    }   

        #nav-main-search button[type="submit"]{
        position: absolute;
        top: 0px;
        right: 0px;
    }

}

编辑：添加了jsfiddle演示 演示：https://jsfiddle.net/qtenuuhv/

Answer 1

在几个浏览器中对此进行了测试，但它似乎只会影响Chrome。它似乎不喜欢display: inline-block;上的.nav-main-link和float: right;上#nav-main-search的混合。

要解决此问题，您只需将.nav-main-link向左浮动，而不是使用inline-block：

• 将float: left;添加到.nav-main-link
• 从display: inline-block;
移除.nav-main-link

* {
  border: 0;
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}
ul {
  list-style-type: none;
}
body {
  font-family: Arial, Sans-Serif;
  font-size: 0.9em;
}
#main {
  min-width: 300px;
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 20px 0 20px;
}
#nav-main {
  background: #936ac9;
  background: -moz-linear-gradient(top, #936ac9 0%, #8745bc 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #936ac9), color-stop(100%, #8745bc));
  background: -webkit-linear-gradient(top, #936ac9 0%, #8745bc 100%);
  background: -o-linear-gradient(top, #936ac9 0%, #8745bc 100%);
  background: -ms-linear-gradient(top, #936ac9 0%, #8745bc 100%);
  background: linear-gradient(to bottom, #936ac9 0%, #8745bc 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#936ac9', endColorstr='#8745bc', GradientType=0);
  min-height: 50px;
  overflow: hidden;
  border-radius: 10px;
}
#nav-main a {
  color: white;
}
#nav-main-search {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}
#nav-main-search .search-input {
  border-radius: 5px 0px 0px 5px;
  width: 225px;
  font-size: 1.0em;
  box-sizing: border-box;
  padding: 2px 0px 0px 10px;
  height: 2em;
}
.nav-main-link {
  float: left; /*Add this*/
  /*display: inline-block; Remove this*/
  border-right: 1px solid black;
  min-height: 50px;
}
.nav-main-link a {
  display: block;
  font-size: 1.3em;
  padding: 12px 10px;
  border-right: 1px solid white;
  min-height: 50px;
  box-sizing: border-box;
}
#nav-main-search button[type="submit"] {
  width: 50px;
  background-color: gray;
  font-size: 1.0em;
  display: block;
  color: black;
  float: right;
  border-radius: 0px 5px 5px 0px;
  overflow: hidden;
  cursor: pointer;
  height: 2.0em;
}
@media (max-width: 600px) {
  .nav-main-link {
    float: none; /*Add this*/
    display: block;
    border-bottom: 1px solid white;
    border-right: 0;
  }
  #nav-main-search {
    float: none;
    position: relative;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 50px;
  }
  #nav-main-search .search-input {
    display: block;
    width: 100%;
  }
  #nav-main-search button[type="submit"] {
    position: absolute;
    top: 0px;
    right: 0px;
  }
}

<div id="main">
  <nav>
    <ul id="nav-main">
      <li class="nav-main-link"><a href="#">Novinky</a>
      </li>
      <li class="nav-main-link"><a href="#">Kontakt</a>
      </li>
      <li class="nav-main-link"><a href="#">Kariéra</a>
      </li>
      <li id="nav-main-search">
        <form method="post" enctype="application/x-www-form-urlencoded" action="#">
          <input placeholder="hledat..." class="search-input" type="text" />
          <button type="submit" value="vyhledat"><i class="fa fa-search"></i>
          </button>
        </form>
      </li>
    </ul>
  </nav>
</div>

JS小提琴： https://jsfiddle.net/q9r6xgyL/