Question

首先，我看到这个链接有一个类似的问题，但我确实在我的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; }

我在哪里错了？

Answer 1

除了我的评论之外，这里还有一段代码更新，展示了如何编写CSS以使其适用于浏览器版本，其中需要多次添加需要前缀以定位旧/不同浏览器的CSS属性对于每个版本。

#include <sys/types.h>
#include <stdio.h>
#include <unistd.h>
#include<sys/shm.h>
#include<sys/ipc.h>

int upper = 0;
int n = 0;

int main(int argc, char*argv[]){
    pid_t pid;
    if(argc != 2){
      printf("Input one argument");
      return -1;
    }
    upper =  atoi(argv[1]);


    int segment_id;
    int *s;
    pid_t *pids;
    pids = (pid_t *) malloc(sizeof(int) * upper);
    s = (int *) malloc(sizeof(int) * upper);


    key_t key = 4141;
    if((segment_id = shmget(key, upper * sizeof(int), IPC_CREAT | 0667))< 0) perror("shmget: failure");

    if((s = shmat(segment_id, NULL, 0)) == (char *) -1){
      perror("shmat : failure");
      exit(1);
    }
    for(int i = 1; i <= upper; i++){
      pid = fork();
      if(pid == 0) {
        n = i;
        break;
      }
      pids[i] = pid;
    }

    if(pid > 0){
      wait(1 * upper);
      int totalSum;
      for(int i = 0; i < upper; i++){
        totalSum += s[i];
      }
  printf("Total sum = %d", totalSum);


} else {
  sleep(2);
  int sum = 0;
  for(int i = 0; i <= n; i++){
    sum += i;
  }
  s[n - 1] = sum;
  printf("n => %d : sum %d\n", n, sum);

}
}

.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;
}

Marquee替换不适用于Safari 5.1.7（Windows 10）

1 个答案: