Flexbox的内容正在Safari浏览器中转移

Question

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

这是我的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中打开它，则会发现Break“ +”符号在一行中向下颠簸，这导致以下各行也被向下推动。

Answer 1

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