css 文本与绝对位置重叠,Safari浏览器和Chrome浏览器

zaq34kh6 于 2023-02-06 发布在其他

关注(0)|答案(2)|浏览(222)

我遇到了这个Safari的问题，在Safari中无法识别绝对位置的空间。它在Opera和Chrome中都能很好地工作。 isn't recognized in Safari. It works perfect in both Opera and Chrome.
我不知道如何解决这个问题。我尝试了各种身高计算组合。下面是代码：

<h1>
                
     <span>
            <span class="rw-words rw-words-1>Sentence with three long words
            </br>    
            <span class="">Rotating word 1</span>
            <span class="">Rotating word 2</span>
     </span>  
                    
</h1>

<div>A lot of additional text</div>

下面是CSS：

.rw-words-1 span{
animation: rotateWordsFirst 8s linear infinite 0s;
}

@keyframes rotateWordsFirst {
0% { opacity: 0; animation-timing-function: ease-in; }
2% { opacity: 1;   }
40% { opacity: 1;   }
53% { opacity: 0;  }
100% { opacity: 0; }
}

.rw-words{ } 

.rw-words span{
position: absolute;
opacity: 0;
color: #6b969d;
}

.rw-words span:nth-child(2) { 
animation-delay: 4s; 
color: #6b889d;
}

所以有一个三个单词的句子，下面有两个绝对位置的单词，它们从一个变成另一个（旋转单词动画）。
问题是下面的"更多文本"在句子1之后开始，因此在Safari中与"旋转单词"重叠，而chrome和firefox将其正确地放在旋转单词下面。
h1容器的固定高度不起作用，因为"sentence 1" Package 太多。
所以基本上我需要正确设置h1的高度或跨度。
高度必须是

width: fit-content;

加上一个行高来计算绝对跨度。但是我找不到一种方法在css中实现。
我不是很有经验，解决办法可能很简单。
致上最诚挚的问候
马丁

css

来源：https://stackoverflow.com/questions/75346786/text-overlapping-with-absolute-position-safari-chrome

2条答案

按热度按时间

vbopmzt11#

您的HTML中有错误。
1.您忘记使用类rw-words rw-words-1关闭<span>中的属性值。

<br>没有结束标记。您可以将它写为开始标记，也可以在打开它的地方将其关闭<br />，但不能像这样将其关闭</br>尝试像这样：

<h1>
                
     <span>
            <span class="rw-words rw-words-1">Sentence with three long words
            <br>    
            <span class="">Rotating word 1</span>
            <span class="">Rotating word 2</span>
     </span>  
                    
</h1>

<div>A lot of additional text</div>

赞(0）回复(0）举报 2023-02-06

elcex8rz2#

你们两个都是对的。我在这里简化了一点代码，所以关闭跨度的操作没有通过。但是这些东西并没有解决这个问题。

<h1 class=" h0 justify-start text-tpri">
                    
        <div>
              <span class="rw-words rw-words-1">
              Essential Cooking Pans
                        <br />    
                        <span class="font-bold h-32">made green.</span>
                        <span class="font-bold h-32">made simple.</span>
              </span>  
                            
        </div>  
                        
                    
</h1>

知道如何设置一个固定的高度，即使第一句话被 Package 也能正常工作吗？

赞(0）回复(0）举报 2023-02-06

我来回答

css 文本与绝对位置重叠,Safari浏览器和Chrome浏览器

2条答案

相关问题

热门标签

最新问答