首先，我看到这个链接有一个类似的问题，但我确实在我的 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 以使其跨浏览器版本工作，其中需要前缀以针对较旧/不同浏览器的 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>关于html - 选取框替换在 Safari 5.1.7 (Windows 10) 上不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39547542/