物化CSS Navbar搜索已损坏

时间:2016-04-24 16:07:11

标签: css html5 material-design frontend materialize

使用以下任一版本在chrome 50+上破坏导航栏搜索:

实现0.97.6 具体化为0.97.5

使用的代码如文档中所述:

  <nav>
    <div class="nav-wrapper">
      <form>
        <div class="input-field">
          <input id="search" type="search" required>
          <label for="search"><i class="material-icons">search</i></label>
          <i class="material-icons">close</i>
        </div>
      </form>
    </div>
  </nav>

此代码会导致视觉问题,如文档页面和我的网站所示:

http://materializecss.com/navbar.html

broken search

broken search on my site

如何解决此问题以使其看起来一致?

2 个答案:

答案 0 :(得分:10)

好吧我遇到了同样的问题。但是,我添加了这个CSS,它对我有用。

nav .nav-wrapper form, nav .nav-wrapper form .input-field{
height: 100%;
}

答案 1 :(得分:10)

我今天刚刚注意到这一点,我刚刚这样做了:

input[type="search"] {
  height: 64px !important; /* or height of nav */
}