Question

我为某些元素编写了一些css，它会导致一些意想不到的行为。我正在使用：

transition: 0.2s;

刷新页面时，具有此css属性的元素意外地从页面的另一个区域开始，并移动到其设置位置（在我的CSS的其他部分中设置）。，

position: absolute

属性用于定位元素，可能导致这种意外行为的原因是什么？

以下是链接的CSS：

.subLinks_links {
    position: relative;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: left;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    font-size: 13px;
    color: #999;
    margin-bottom: -1px;
    cursor: pointer;
    text-transform: uppercase;
}

.subLinks_links > span {
    margin-left: 30px;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;

}

.subLinks_links:hover > span {
    margin-left: 40px;
}

css的相关HTML：

<div id="subLinks">

    <div class="subLinks_links_selected"><span>Link Text</span></div>

    <div class="subLinks_links"><span>Link Text</span></div>

</div>

Answer 1

我发现这是一个定位问题。我使用text-align和margin-left来定位元素。没有死定位，这导致了不必要的行为。

Answer 2

我想我遇到了类似的问题。您正在使用实际转换为transition的速记transition: all 0.2s ease 0.2s;属性。 all在这里非常重要。这意味着您出于任何原因使用的转换（例如悬停效果等）也适用于其他css属性。在这种情况下，元素专门用于更改布局，并且由于这些属性覆盖了默认值，因此每个要更改的属性都会从默认值转换为css。

我知道你已经为你的案子找到了解决办法，但对于其他可能在以后偶然发现的人来说，这是一个可能的解决办法。

在css中具有转换的元素上出现意外行为

2 个答案: