HTML CSS在Safari中不起作用 [英] HTML CSS doesn't work in Safari

问题描述

我有以下代码，在Chrome和FireFox中运行良好，但在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; 
背景：#ffffff; 
 border-radius：32px; 
 display：block; 
 border：2px纯蓝色; 
} 
 
 .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 {
最大宽度：90px; 
颜色：＃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; 
职位：亲属; 
 top：20px; 
} 
 
 .duration {
 margin-left：50px; 
最大宽度：90px; 
颜色：＃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> 8月28日星期五< / p> 
< p class =time> 10：00< / p> 
< / div> 
< div class =circle-wrap> 
< div class =circle>< / div> 
< / div> 
< div class =point-title> 
< span> 
< b>基辅鲍里斯波尔（KBP）< / b> 
< / span> 
< / div> 
< / div> 
 
< div class =time-slice row> 
< div class =date-time> 
< p class =持续时间> 1小时30分钟< / p> 
< / div> 
< div class =point-title> 
< / div> 
< / div> 
 
< div class =time-slice row> 
< div class =date-time> 
< p class =date> 8月28日星期五< / p> 
< p class =time> 10：00< / p> 
< / div> 
< div class =circle-wrap> 
< div class =circle>< / div> 
< / div> 
< div class =point-title> 
< span> 
< b>阿姆斯特丹（AMS）< / b> 
< / span> 
< / div> 
< / div> 
 
< / div> 
< / div> 
  

解决方案

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

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

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

body {margin-top：30px;}。显示：-webkit-box;显示：-webkit-flex;显示：-ms-flexbox;显示：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;方块大小：内容框;边框颜色：＃29a8bb;背景：#ffffff; border-radius：32px;显示：块; border：2px solid blue;}。circle-wrap {position：absolute; top：0px;左：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;颜色：＃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;位置：相对; top：20px;}。duration {margin-left：50px;最大宽度：90px;颜色：＃999999; font-size：13px; margin-top：-15px; margin-bottom：10px;}

< div class = 时间线 > < div class =time-slice row> < div class =date-time> < p class =date> 8月28日星期五< / p> < p class =time> 10：00< / p> < / DIV> < div class =circle-wrap> < div class =circle>< / div> < / DIV> < div class =point-title> <跨度> < b>基辅鲍里斯波尔（KBP）< / b> < /跨度> < / DIV> < / DIV> < div class =time-slice row> < div class =date-time> < p class =持续时间> 1小时30分钟< / p> < / DIV> < div class =point-title> < / DIV> < / DIV> < div class =time-slice row> < div class =date-time> < p class =date> 8月28日星期五< / p> < p class =time> 10：00< / p> < / DIV> < div class =circle-wrap> < div class =circle>< / div> < / DIV> < div class =point-title> <跨度> < b>阿姆斯特丹（AMS）< / b> < /跨度> < / DIV> < / div>< / div>< / div>

I have following code, that works well in Chrome and FireFox but doesn't work in Safari.

Could you please help me investigate what is going on and how do I make it compatible for Safari and other browsers?

CodePen

Chrome:

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>

解决方案

Are you using all the correct vendor prefixes?

Prefixed Codepen that works in Chrome, Edge & FF That's usually the problem with Safari.

If you click on the "View Compiled" button you will see the full CSS. Codepen uses a couple of optional tools (autoprefixer or prefixfree) to manage this. Click on the CSS Cog to see the options available

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中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！