html - 调整浏览器大小时，如何摆脱 chrome 中奇怪的过渡移动？

Question

我们正在开发一个具有大量转换功能的网站。在 Firefox 中，当您放大和缩小时，所有元素都在静态调整大小并且没有移动元素，但是当您在 Chrome 中调整大小时，总是会移动到不合适的位置并变得更大。

>>Website<<

如何解决 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; 但这并不能解决问题。

Answer 1

一个 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;
}

通过这种方式，您可以防止 future 在过渡时间发生变化。