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 に答える