Question

我有以下代码，适用于Chrome和FireFox，但在Safari中无效。

您能帮我调查一下发生了什么，以及如何让它与Safari和其他浏览器兼容？

铬：

Safari浏览器：

LESS：

body {
  margin-top: 30px;
}

.time-slice {
  position: relative;
  display: flex;
  align-items: stretch;
  margin-left: 20px;
  > * {
    padding: 20px;
  }
}

.circle {
  width: 16px;
  height: 16px;
  box-sizing: content-box;
  border-color: #29a8bb;
  background: #ffffff;
  border-radius: 32px;
  display: block;
  border: 2px solid blue;
}

.circle-wrap {
  position: absolute;
  top: 0px;
  left: 91px;
  z-index:2;
  > .circle {
    position: relative;
    left: 20px;
  }
}

.date-time {
  flex-shrink: 0;
  flex-basis: 100px;
  text-align: center;
  margin-top: -5px;
}

.date,
.time {
  max-width: 90px;
  color: #999999;
  font-size: 13px;
  margin-top: 0px;
  margin-bottom: 10px;
  margin-left: 20px;
}

.time-slice.row:not(:last-child)  .point-title {
  border-left: 2px solid blue;
  padding-left: 15px;
  padding-top:0;
  position:relative;
  top:20px;
}

.duration {
  margin-left: 50px;
  max-width: 90px;
  color: #999999;
  font-size: 13px;
  margin-top: -15px;
  margin-bottom: 10px;
}

HTML：

<div class="timeline">
  <div class="time-slice row">
    <div class="date-time">
      <p class="date">Fri 28 Aug</p>
      <p class="time">10:00</p>
    </div>
    <div class="circle-wrap">
      <div class="circle"></div>
    </div>
    <div class="point-title">
      <span>
      <b>Kiev Borispol (KBP)</b>
    </span>
    </div>
  </div>

  <div class="time-slice row">
        <div class="date-time">
          <p class="time duration">1h 30min</p>
        </div>
        <div class="point-title">
      </div>
  </div>

  <div class="time-slice row">
    <div class="date-time">
      <p class="date">Fri 28 Aug</p>
      <p class="time">10:00</p>
    </div>
    <div class="circle-wrap">
      <div class="circle"></div>
    </div>
    <div class="point-title">
      <span>
      <b>Amsterdam (AMS)</b>
    </span>
    </div>
  </div>

  </div>
</div>

Answer 1

Safari需要所有flex属性的lazy var persistentStoreCoordinator: NSPersistentStoreCoordinator? = { // The persistent store coordinator for the application. This implementation creates and return a coordinator, having added the store for the application to it. This property is optional since there are legitimate error conditions that could cause the creation of the store to fail. // Create the coordinator and store var coordinator: NSPersistentStoreCoordinator? = NSPersistentStoreCoordinator(managedObjectModel: self.managedObjectModel) let url = self.applicationDocumentsDirectory.URLByAppendingPathComponent("APPNAME.sqlite") var error: NSError? = nil var failureReason = "There was an error creating or loading the application's saved data." // iCloud store var storeOptions = [NSPersistentStoreUbiquitousContentNameKey : "APPNAMEStore",NSMigratePersistentStoresAutomaticallyOption: true, NSInferMappingModelAutomaticallyOption: true] // iCloud storeOptions need to be added to the if statement do { try coordinator!.addPersistentStoreWithType(NSSQLiteStoreType, configuration: nil, URL: NSURL.fileURLWithPath(url.path!), options: storeOptions) } catch var error1 as NSError { error = error1 coordinator = nil // Report any error we got. var dict = [String: AnyObject]() dict[NSLocalizedDescriptionKey] = "Failed to initialize the application's saved data" dict[NSLocalizedFailureReasonErrorKey] = failureReason dict[NSUnderlyingErrorKey] = error error = NSError(domain: "YOUR_ERROR_DOMAIN", code: 9999, userInfo: dict) // Replace this with code to handle the error appropriately. // abort() causes the application to generate a crash log and terminate. You should not use this function in a shipping application, although it may be useful during development. NSLog("Unresolved error \(error), \(error!.userInfo)") abort() } catch { fatalError() } return coordinator }() // MARK: - iCloud // This handles the updates to the data via iCLoud updates func registerCoordinatorForStoreNotifications (coordinator : NSPersistentStoreCoordinator) { let nc : NSNotificationCenter = NSNotificationCenter.defaultCenter(); nc.addObserver(self, selector: "handleStoresWillChange:", name: NSPersistentStoreCoordinatorStoresWillChangeNotification, object: coordinator) nc.addObserver(self, selector: "handleStoresDidChange:", name: NSPersistentStoreCoordinatorStoresDidChangeNotification, object: coordinator) nc.addObserver(self, selector: "handleStoresWillRemove:", name: NSPersistentStoreCoordinatorWillRemoveStoreNotification, object: coordinator) nc.addObserver(self, selector: "handleStoreChangedUbiquitousContent:", name: NSPersistentStoreDidImportUbiquitousContentChangesNotification, object: coordinator) }前缀。尝试将其添加到css：

-webkit

Answer 2

您使用的是所有正确的供应商前缀吗？

适用于Chrome，Edge＆amp; amp;的前缀Codepen FF这通常是Safari的问题。

如果单击“查看已编译”按钮，您将看到完整的CSS。 Codepen使用一些可选工具（autoprefixer或prefixfree）来管理它。单击CSS Cog以查看可用选项

body {
  margin-top: 30px;
}
.time-slice {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  margin-left: 20px;
}
.time-slice > * {
  padding: 20px;
}
.circle {
  width: 16px;
  height: 16px;
  box-sizing: content-box;
  border-color: #29a8bb;
  background: #ffffff;
  border-radius: 32px;
  display: block;
  border: 2px solid blue;
}
.circle-wrap {
  position: absolute;
  top: 0px;
  left: 91px;
  z-index: 2;
}
.circle-wrap > .circle {
  position: relative;
  left: 20px;
}
.date-time {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-flex-basis: 100px;
  -ms-flex-preferred-size: 100px;
  flex-basis: 100px;
  text-align: center;
  margin-top: -5px;
}
.date,
.time {
  max-width: 90px;
  color: #999999;
  font-size: 13px;
  margin-top: 0px;
  margin-bottom: 10px;
  margin-left: 20px;
}
.time-slice.row:not(:last-child) .point-title {
  border-left: 2px solid blue;
  padding-left: 15px;
  padding-top: 0;
  position: relative;
  top: 20px;
}
.duration {
  margin-left: 50px;
  max-width: 90px;
  color: #999999;
  font-size: 13px;
  margin-top: -15px;
  margin-bottom: 10px;
}

<div class="timeline">
  <div class="time-slice row">
    <div class="date-time">
      <p class="date">Fri 28 Aug</p>
      <p class="time">10:00</p>
    </div>
    <div class="circle-wrap">
      <div class="circle"></div>
    </div>
    <div class="point-title">
      <span>
      <b>Kiev Borispol (KBP)</b>
    </span>
    </div>
  </div>

  <div class="time-slice row">
    <div class="date-time">
      <p class="time duration">1h 30min</p>
    </div>
    <div class="point-title">
    </div>
  </div>

  <div class="time-slice row">
    <div class="date-time">
      <p class="date">Fri 28 Aug</p>
      <p class="time">10:00</p>
    </div>
    <div class="circle-wrap">
      <div class="circle"></div>
    </div>
    <div class="point-title">
      <span>
      <b>Amsterdam (AMS)</b>
    </span>
    </div>
  </div>

</div>
</div>

HTML CSS在Safari中不起作用

2 个答案: