字幕替换在 Safari 5.1.7 (Windows 10) 上不起作用答案

【问题标题】：Marquee replacement doesn't work on Safari 5.1.7 (Windows 10)字幕替换在 Safari 5.1.7 (Windows 10) 上不起作用
【发布时间】：2016-09-17 22:34:47
【问题描述】：

首先，我看到这个链接有一个类似的问题，但我确实在我的 CSS 中使用了动画，所以没有相关的解决方案：
CSS marquee doesn't work on Safari

现在，我的代码在 Chrome、FireFox、Opera、IE 和 edge 中运行良好。但在 Safari 上它不会（文本不会移动）。

这是我的html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="format.css">
</head>
<body>

<h1>updates</h1>
<div class="microsoft container">
    <p class="marquee">
            update 1
            <br><br>        
            update 2
            <br><br>
            update 3
    </p>
</div>    

</body>
</html>

这是我的 CSS 文件：

.container {
    width: 93.5%;
    height: 8em;
    margin: 1em auto;
    overflow: hidden;
    background: white;
    position: relative;
    box-sizing: border-box;
}

.marquee {
    top: 6em;
    position: relative;
    box-sizing: border-box;
    animation: marquee 15s linear infinite;
}

.marquee:hover { animation-play-state: paused; }

/* Make it move! */
@keyframes marquee {
    0%   { top:   8em }
    100% { top: -11em }
}

/* Make it look pretty */
.microsoft .marquee {
  margin: 0;
    padding: 0 1em;
    line-height: 1.5em;
    font: 1em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

.microsoft:before, .microsoft::before,
.microsoft:after,  .microsoft::after {
    left: 0;
    z-index: 1;
    content: '';
    position: absolute;
    pointer-events: none;
    width: 100%; height: 2em;
    background-image: linear-gradient(180deg, #FFF, rgba(255,255,255,0));
}

.microsoft:after, .microsoft::after {
    bottom: 0;
    transform: rotate(180deg);
}

.microsoft:before, .microsoft::before { top: 0; }

/* Style the links */
.vanity {
    color: #333;
    text-align: center;
    font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}

.vanity a, .microsoft a {
    color: #1570A6;
    transition: color .5s;
    text-decoration: none;
}

.vanity a:hover, .microsoft a:hover { color: #F65314; }

我哪里错了？

【问题讨论】：

你需要使用前缀css，比如-webkit-animation: ....
Safari 5.1.7 或多或少已经死了，那么为什么要针对那个呢？ .. 苹果几年前就停止了支持（Windows 版本）
你的意思是，用“-webkit-animation:”切换“动画”？因为我试过了，它不起作用。对于您的第二个回复，我使用 Safari 5.1.7 只是为了检查我的网络对不同浏览器的兼容性。
由于transform 和@keyframes 也需要前缀，您需要根据您的目标浏览器版本检查所有CSS 属性。另外，不要使用 Safari 5.1.7 来检查兼容性，它是一个过时的版本，无助于让它在 iOS 版 Safari 上运行，恰恰相反

标签： html css safari

【解决方案1】：

除了我的 cmets，这里是您的代码更新，显示您需要如何编写 CSS 以使其跨浏览器版本工作，其中需要添加前缀以针对较旧/不同浏览器的 CSS 属性必须多次添加每个版本。

.container {
  width: 93.5%;
  height: 8em;
  margin: 1em auto;
  overflow: hidden;
  background: white;
  position: relative;
  box-sizing: border-box;
}
.marquee {
  top: 6em;
  position: relative;
  box-sizing: border-box;
  -webkit-animation: marquee 15s linear infinite;
  animation: marquee 15s linear infinite;
}
.marquee:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
/* Make it move! */

@-webkit-keyframes marquee {
  0% {
    top: 8em
  }
  100% {
    top: -11em
  }
}
@keyframes marquee {
  0% {
    top: 8em
  }
  100% {
    top: -11em
  }
}
/* Make it look pretty */

.microsoft .marquee {
  margin: 0;
  padding: 0 1em;
  line-height: 1.5em;
  font: 1em'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.microsoft:before,
.microsoft::before,
.microsoft:after,
.microsoft::after {
  left: 0;
  z-index: 1;
  content: '';
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 2em;
  background-image: linear-gradient(180deg, #FFF, rgba(255, 255, 255, 0));
}
.microsoft:after,
.microsoft::after {
  bottom: 0;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.microsoft:before,
.microsoft::before {
  top: 0;
}
/* Style the links */

.vanity {
  color: #333;
  text-align: center;
  font: .75em'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.vanity a,
.microsoft a {
  color: #1570A6;
  transition: color .5s;
  text-decoration: none;
}
.vanity a:hover,
.microsoft a:hover {
  color: #F65314;
}

<h1>updates</h1>
<div class="microsoft container">
  <p class="marquee">
    update 1
    <br>
    <br>update 2
    <br>
    <br>update 3
  </p>
</div>

【讨论】：