Question

这是我的问题：我在使用BrowserStack的旧版浏览器中测试应用，我遇到了Chrome 30和flex-item按钮的问题，但这并没有问题。想要垂直伸展。 Haven没有听到或读到任何特定的Flexbox问题。

不是什么大不了的事，但在视觉上非常令人不安。这是代码：

＆＃13;

nav {
  display: flex;
  margin: 1rem 0;
}

nav>img {
  align-self: flex-end;
  width: 15rem;
  min-width: 20%;
  height: auto;
  margin: 0 2rem .5rem .5rem;
}

nav>div {
  display: flex;
  flex: 1;
  margin-left: 2rem;
}

nav>div>* {
  font-family: 'Lato', Arial, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
}

nav button {
  flex: 1;
  background: linear-gradient(to top, #ddd, #fff);
  box-shadow: 0 1px 2px #666;
  color: black;
  cursor: pointer;
  padding: 0;
  border: 1px solid black;
  border-radius: 2px;
  margin-right: 1rem;
}

nav button:hover {
  box-shadow: 0 0 3px 1px #bbb inset;
}

nav form {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex: 2;
  padding: .5rem 0;
  border: 1px solid black;
  border-radius: 2px;
  margin-left: 1rem;
  margin-right: 0;
}

nav form>* {
  margin: 0 .5rem;
}

nav form input {
  align-self: stretch;

  font-family: 'Lato', Arial, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  padding: .5rem;
  border: 1px solid black;
  border-radius: 2px;
}

＆＃13;

<nav>
  <img />
  <div>
    <button>XXX</button>
    <form>
      <label>XXX</label>
      <input XXX>
      <div>XXX</div>
    </form>
  </div>
</nav>

＆＃13;

如果有人有想法，解决方案......感谢您的帮助！

Silvere M。

灵活项目按钮在旧Chrome版本中不能垂直拉伸

0 个答案: