Javascript Flex即使在添加-webkit-前缀后也无法工作

我试图在所有浏览器中显示相同的静态网页，但Safari无法像Chrome那样显示网页

我使用autoprefixer并更改了代码，例如：

display:-webkit-box，但仍然存在堆积东西的问题

Styles.css：

body {
  font-family: Arial, Helvetica, sans-serif;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.left {
  -webkit-flex: 25%;
  padding: 15px 0;
  height: 700px;
}

.left h1 {
  padding-left: 15px;
}

.right {
  -webkit-flex: 75%;
  padding: 15px;
}

#Search {
  width: 100%;
  font-size: 13px;
  padding: 20px;
  border: 1px solid #ddd;
}

#Menu li p {
  background-color: default;
  padding: 12px;
  text-decoration: none;
  font-size: 20px;
  color: black;
  display: block;
  font-family: comic sans-serif;
}

#Menu li p:hover {
  background-color: #eee;
}

Index.html：

<div class="row">
  <div class="left" style="background-color:steelblue;">
    <h1>Locations</h1>
    <input type="text" id="Search" placeholder="Search.." title="Type in a 
    category" data-bind="textInput:userInput">
    <ul id="Menu" data-bind="foreach: filteredLocation">
      <li>
        <p><span data-bind="text: title, click: popup"></span></p>
      </li>
    </ul>
  </div>
  <div class="right" id="map" style="background-color:#ddd;">
  </div>
</div>


位置





@Michael\u B我确实看到了那篇帖子。但是，这附近还有其他的吗？因为我认为自动刷新器在我的情况下不起作用。你使用什么版本的Safari？你不需要前缀。您可能需要调整flex代码。这就是我提供链接的原因。@KoshVery its 11.1.1