0

我们正在开发一个有很多过渡的网站。在 Firefox 中，当您放大和缩小时，所有内容都是静态调整大小且不移动元素，但是当您在 Chrome 中调整大小时，总是会移出位置并变大。

>>网站<<

如何在 Chrome 中解决这个过渡问题？我想知道是否有解决办法。

我的 CSS 代码的一部分带有转换：

#login{
float:right;
width:130px;
height:30px;
background:#7eb055;
-webkit-backface-visibility: hidden;
backface-visibility:hidden;
-webkit-transition: width 0.5s, height 1s;
-o-transition: width 0.5s, height 1s;
-moz-transition: width 0.5s, height 1s;
-ms-transition: width 0.5s, height 1s;
transition: width 0.7s, height 1s;
}

请注意，我尝试过-webkit-backface-visibility: hidden;，但这并不能解决问题。

4

1 回答 1

0

一个 ul 中有几个 li。

缩放时，ul 会调整大小，li 也会调整大小。但是 li 在调整大小上有一个过渡，然后有一段时间它们不再匹配。

你现在有

#main_nav_home li {
    /*   ....   */
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

ul#main_nav_home{ 
    width:800px;
    margin:0px auto;
}

我会将后者更改为

#main_nav_home{ 
    width:800px;
    margin:0px auto;
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

除了设置过渡，我还删除了元素类型，因为你不会重复 id。

或者，甚至更好：

#main_nav_home, #main_nav_home li { 
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

这样，您就可以在过渡时间的未来变化中做到万无一失。

于 2013-08-19T16:50:20.950 回答