CSS字幕在Safari上不起作用 [英] CSS marquee doesn't work on Safari

问题描述

我对我的网站上的字幕工作方式非常满意，它可以在除Safari之外的所有浏览器中使用。我究竟做错了什么？有什么我可以做，以便在Safari中也一样吗？

  .marquee {width：260px; margin：0 auto; overflow：hidden; whitespace：nowrap; fontsize：20px; position：absolute; color：#fff; text-shadow：＃000 1px 1px 0; font-family：Tahoma，Arial，sans-serif} @  -  webkit-keyframes marquee {0％{-webkit-transform：translate（0，0）; } 100％{-webkit-transform：translate（-100％，0）; }}  

 < p class =marquee bla bla bla 
 $ 
 

解决方案>

您缺少代码的动画部分。此外，我不知道转换是否会工作，没有首先创建一个包装器来隐藏溢出。这是尝试使用 text-indent 。

  .marquee {width：260px ; margin：0 auto; overflow：hidden; white-space：nowrap; font-size：20px; position：absolute; color：#fff; text-shadow：＃000 1px 1px 0; font-family：Tahoma，Arial，sans-serif; -webkit-animation：marquee 5s linear infinite;} @  -  webkit-keyframes marquee {0％{text-indent：260px; } 100％{text-indent：-260px; }}  

 < p class =marquee bla bla< / p> 
 
 

包装器。

  .marquee {overflow：hidden; white-space：nowrap; font-size：20px; color：#fff; text-shadow：＃000 1px 1px 0; font-family：Tahoma，Arial，sans-serif; display：inline-block; width：260px;}。marquee span {display：inline-block;最小宽度：100％; -webkit-animation：marquee 3s linear infinite;} @  -  webkit-keyframes marquee {0％{-webkit-transform：translateX（100％）; } 100％{-webkit-transform：translateX（-100％）; }}  

 < p class =marquee < span> bla bla bla< / span>< / p>  

I'm very happy with the way the marquee works on my website, it works in all browsers except of Safari. What am I doing wrong? Is there anything I can do in order to play the same in Safari as well?

.marquee {
  width: 260px;
  margin: 0 auto;
  overflow: hidden;
  whitespace: nowrap;
  fontsize: 20px;
  position: absolute;
  color: #fff;
  text-shadow: #000 1px 1px 0;
  font-family: Tahoma, Arial, sans-serif
}

@-webkit-keyframes marquee {
  0% {
    -webkit-transform: translate(0, 0);
  }
  100% {
    -webkit-transform: translate(-100%, 0);
  }
}

<p class="marquee">bla bla bla</p>

解决方案

You're missing the animation part of your code. Plus, I'm not sure transform is going to work without first creating a wrapper to hide the overflow. Here's an attempt that uses text-indent instead.

.marquee {
  width: 260px;
  margin: 0 auto;
  overflow: hidden;
  white-space: nowrap;
  font-size: 20px;
  position: absolute;
  color: #fff;
  text-shadow: #000 1px 1px 0;
  font-family: Tahoma, Arial, sans-serif;
  -webkit-animation: marquee 5s linear infinite;
}

@-webkit-keyframes marquee {
  0% {
    text-indent: 260px;
  }
  100% {
    text-indent: -260px;
  }
}

<p class="marquee">bla bla bla</p>

EDIT: Here's another approach using a wrapper.

.marquee {
  overflow: hidden;
  white-space: nowrap;
  font-size: 20px;
  color: #fff;
  text-shadow: #000 1px 1px 0;
  font-family: Tahoma, Arial, sans-serif;
  display:inline-block;
  
  width: 260px;
}

.marquee span {
  display:inline-block;
  min-width: 100%;
  -webkit-animation: marquee 3s linear infinite;
}

@-webkit-keyframes marquee {
  0% {
    -webkit-transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
  }
}

<p class="marquee"><span>bla bla bla</span></p>

这篇关于CSS字幕在Safari上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！