Flexbox 内容在 Safari 浏览器上发生变化

Question

我尝试过使用 AutoPrefixer，以防它与带有 Flexbox 的 webkits 相关，但没有任何区别。

这是我的 CSS：

#title {
  text-align: center;
  font: 50px/1.3 "Oleo Script", Helvetica, sans-serif;
  color: #2b2b2b;
  text-shadow: 2.3px 2px 0px rgb(255, 255, 255, 0.8);
  color: rgba(250, 57, 57, 0.932);
}

.container-1 {
  margin: auto;
  display: flex;
  border-style: solid;
  border-radius: 8%;
  background-color: rgba(250, 57, 57, 0.932);
  width: 475px;
  height: 500px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.container-1 div {

  padding: 11px; 
}

.session {
  flex: 2;
  order: 2; /*Remember when using order, all elements START at order: 0; */
  font: 1rem "Oleo Script", Helvetica, sans-serif;
}

#sessionTimer {
  font-size: 1.10em;
  font-weight: bolder;
}

.minusSession {
  flex: 1;
  order: 1;
}

#minusSessionButton {
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
  outline: none;
  color: white;
  background-color: rgb(216, 211, 211);
  margin-left: 1rem;
}

.plusSession {
  flex: 1;
  order: 3;
  margin-left: -1rem;
}

#plusSessionButton {
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
  outline: none;
  color: white;
  background-color: rgb(216, 211, 211);
  margin-left: 1rem;
}

.break {
  flex: 2;
  order: 5;
  font: 1rem "Oleo Script", Helvetica, sans-serif;
}

#breakTimer {
  font-size: 1.10em;
  font-weight: bolder;
}

.minusBreak {
  flex: 1;
  order: 4;
  margin-left: 3rem;
}

#minusBreakButton {
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
  outline: none;
  color: white;
  background-color: rgb(216, 211, 211);
}

.plusBreak {
  flex: 1;
  order: 6;
}

#plusBreakButton {
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
  outline: none;
  color: white;
  background-color: rgb(216, 211, 211);
  margin-left: 0.1rem;
  margin-right: 1rem;
}

.pause {
  flex: 1;
  order: 8;
}

#pauseButton {
  width: 80px;
  height: 60px;
  background-color: rgb(134, 231, 89);
  color: white;
  outline: none;
  font: 400 20px "Oleo Script", Helvetica, sans-serif;
  margin-left: 22px;
}

.timer {
  flex: 2;
  order: 9; /* 8 */
  text-align: center;
  font: 400 30px "Oleo Script", Helvetica, sans-serif;
}

h1 {
  margin-top: 5px;
  margin-bottom: 5px;
}

.stop {
  flex: 1;
  order: 10; /* 9 */
}

#stopButton {
  width: 80px;
  height: 60px;
  font: 400 18px "Oleo Script", Helvetica, sans-serif;
  background-color: rgb(134, 231, 89);
  color: white;
  outline: none;
}

.start {
  flex: 4;
  order: 11; /*10 */
  text-align: center;
}

#startButton {
  text-align: center;
  background-color: rgb(134, 231, 89);
  color: white;
  width: 250px;
  height: 55px;
  font: 32px "Oleo Script", Helvetica, sans-serif;
  font-style: italic;
  outline: none;
}

.sessionTitle {
  flex: 1;
  order: 7;
  flex-basis: 100%;
  text-align: center;
  font: 400 30px "Oleo Script", Helvetica, sans-serif;
}

.breakTitle {
  flex: 1;
  order: 7;
  flex-basis: 100%;
  text-align: center;
  font: 400 30px "Oleo Script", Helvetica, sans-serif;
}

button {
  transition: filter 100ms ease-in-out;
}

button:hover {
  cursor: pointer;
  filter: brightness(0.9);
}

body {
  background: rgb(180, 227, 145); /* Old browsers */
  background: -moz-linear-gradient(
    top,
    rgba(180, 227, 145, 1) 0%,
    rgba(97, 196, 25, 1) 50%,
    rgba(180, 227, 145, 1) 100%
  ); /* FF3.6-15 */
  background: -webkit-linear-gradient(
    top,
    rgba(180, 227, 145, 1) 0%,
    rgba(97, 196, 25, 1) 50%,
    rgba(180, 227, 145, 1) 100%
  ); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to bottom,
    rgba(180, 227, 145, 1) 0%,
    rgba(97, 196, 25, 1) 50%,
    rgba(180, 227, 145, 1) 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391',GradientType=0 ); /* IE6-9 */
  color: white;
}

这是它在 Chrome/Firefox 上的样子： https://kfollen93.github.io/Pomodoro-Timer/

但是，如果您在 Safari 中打开它，您会注意到中断“+”符号已向下移动了一行，这导致后面的行也被向下推了一个。

Answer 1

我将宽度和高度增加了 20 像素，现在可以使用了。