1

div 自己移动，这是我什至不想要也没有编码的移动。

这是我的问题：

我正在使用这样的 CSS 过渡（想要移动背景图像）：

.mobile{
background: url(../img/galaxy.png) no-repeat 70px 32px;
height: 480px;
margin-top: -90px;
margin-bottom: -70px;
position: relative;
}

.mobile.animate {
-webkit-transition: background-position 1s linear;
-moz-transition: background-position 1s linear;
-o-transition: background-position 1s linear;
-ms-transition: background-position 1s linear;
}
.mobile:hover {
background-position: 70px 20px;
}

它可以工作，当我悬停时，背景会随心所欲地移动，但是，在悬停之前，在页面加载时，div 会自行向右和底部移动，例如 20 像素（为什么？）

有一个有效的解决方案，没有任何意义，但我不希望那样。

如果我将以下代码放在 html 中并标记它可以工作，而不会自行移动： .mobile{ background: url(../img/galaxy.png) no-repeat 70px 32px; 高度：480px；边距顶部：-90px；边距底部：-70px；位置：相对；}

此外，如果我将所有代码放在 html 文件中的标签内，它就可以工作（没有自我移动）。

有谁知道发生了什么？我将不胜感激，谢谢。

4

1 回答 1

1

我记得我有同样的问题。问题是，首先浏览器将 .mobile 设置为他自己的值，然后他正在阅读 css。所以他有两个值，他自己的和你的 css 值，这是过渡。删除css试试看

margin-top: -90px;
margin-bottom: -70px;

然后看看浏览器在做什么。

于 2013-07-21T17:37:18.647 回答