Question

我尝试使用带有转换的文本转换来旋转文本。在firefox浏览器中发生了轻微的混蛋。检查下面的链接，通过鼠标覆盖文本，旋转结束你可以看到轻微的混蛋，如何避免这种情况？

.rot_pos{
    margin:100px auto;
    text-align:center;
    }
.rotate{
    font-size:30pt;
    font-weight:bold;
    display:inline-block;
    transform:rotate(0deg);
     -moz-transition:1s; 
    transition:1s;
}
.rotate:hover{
    transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);

}

<div class="rot_pos">
<div class="rotate">Sample Text</div>
</div>

http://jsfiddle.net/es86wh1p/

任何其他解决方案??

这只发生在firefox中。

Answer 1

我在js-fiddle中使用你的代码进行了一次小游戏，它几乎似乎是firefox中的一个bug。对于这样的事情，快速调试提示是启用边框并设置不同的颜色。

我能够找到一个解决方案，但它是如此令人难以置信的hackey，这让我想起了90年代以及mozilla firefox从netscape代码库的灰烬中崛起的事实。

首先，我设置了一个父/子标记，当鼠标进入rot_pos div时，“应该”导致文本旋转。当鼠标击中正在旋转的盒子时（当导致鼠标快速离开时，你可以通过从rot_pos中删除填充来测试这个），这仍然导致文本“陷阱”

将旋转的Z顺序设置为-2表示当旋转：悬停在另一个div后面时，不会触发旋转：悬停触发器。因此，快速懒惰的修复方法是扩展rot_pos的大小，使其完全覆盖旋转文本。

这导致我： http://jsfiddle.net/rwa1pq2v/

.rot_pos{
    margin:100px auto;
    text-align:center;
    border: 1px solid black;
    padding: 100px 20px 100px 20px;
    }
.rot_pos > .rotate {     
    font-size:31pt;
    font-weight:bold;
    display:inline-block;
    transform:rotate(0deg);        
    transition:1s;
    border: 1px solid black;    
    background: green;    
}
.rot_pos:hover > .rotate {        
    transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);           
}

.rotate {
    z-index: -2;
}
.rotate:hover {
    background: pink;    
}

这个问题是当鼠标进入外部区域时会触发旋转。所以知道根据z顺序“高于”的div将阻止div的触发，我在顶部再下降了2个div，可以看作红色和蓝色，不透明度为0.5以下示例：

http://jsfiddle.net/non45qy2/

随着一些懒惰的手摆弄尺寸以确保它们完全覆盖触发区域，我们有最终解决方案..

为了改善这一点，我们还可以再删除2个div以覆盖2个剩余的白色区域（并修复覆盖区域上的填充），这样你就不必偏移这么大的数量。 / p>

如果不是凌晨1:40，我会将此问题作为mozilla的错误提出，并希望在下一个版本中修复它。

如何通过使用css转换来避免文本混蛋

1 个答案: