0

私はjqueryプラグインを持っているので、何が問題なのかわかりません。すべてをもう一度作成しようとしましたが、修正部分に到達すると再び発生します。どうすればよいか本当にわかりません。この作業を提供する必要があります。明日までに

//これは私のCSSです

@media only screen and (max-width:360px) {
#menu a:link {
color : #FFF;
}
#menu a:visited {
color : #FFF;
}
#menu a:hover {
color : red;
}
#menu {
position : relative;
left : 0;
padding : 0;
margin : 0;
}
#logo {
width : 100%;
}
#menu ul {
position : relative;
left : 0;
height : auto;
top : 0;
margin : 0;
padding : 0;
width : 100%;
margin : 0;
}
}

#menu{
font-family : 'Roboto Condensed', sans-serif;
font-size : 15px;
position : relative;
left: 0;
top: 0;
border: rgba(73, 73, 73, 0.3) solid 1px;
width: 100%;
background-image: url(grain.png);
background-color: rgba(0, 0, 0, 0.53);
padding: 0;
margin: 0;
text-align: center;
display: inline-block;

}
#menu ul {
list-style : none;
}
#menu li {
position : relative;
top : 69px;
line-height : 18px;
float : left;
}




@media only screen and (min-width:641px) {
#menu ul {
display : inline-block;
text-align : center;
height : 104px;
width: 980px;
margin : 0;
padding : 0;
}
#menu ul li a {
padding : 2px 0;
margin : 8px;
}
#menu ul li a:link {
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
transition-duration: 0.2s;
background : transparent;
width : 100%;
color : rgb(255, 255, 255);
text-decoration : none;
transition-duration : 0.2s;
}
#menu ul li a:visited {
width : 100%;
height : 104px;
color : rgb(255, 255, 255);
text-decoration : none;
background : transparent;
}
#menu ul li a:active {
width : 100%;
color : rgb(255, 255, 255);
text-decoration : none;
}
#menu ul li a:hover {
background : transparent;
border-bottom : 3px solid #fff;
color : #f4f4f4;
text-decoration : none;
}
}



@media only screen and (max-width:641px) {
#menu ul {
height : auto;
width : 100%;
}
#registro {
display : none;
}
}


#barra_arriba {
z-index : 30;
position : fixed;
left : 0;
top:0;
border : rgba(73, 73, 73, 0.3) solid 1px;
width : 100%;
background-image : url(grain.png);
background-color : rgba(0, 0, 0, 0.53);
padding : 0;
margin : 0;
text-align : center;
display : inline-block;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
transition-duration: 0.4s;
}

#barra_arriba img {
width: 238px;
float: left;
}

//AND THIS IS MY HTML

<div id="barra_arriba">
<div id="logo"></div>
<div id="menu">
<ul>
<li style="position:relative;top:0px;" ><img     src="http://www.imichproducciones.com/imagen/imich_producciones.png" alt="IMICH" class="logotipo"/>    </li>
<li id="tit"><a href="/" style="color:rgb(245, 0, 51);">IMICH</a></li>
<li><a href="/inscripciones/">INSCRIPCIONES</a></li>
<li><a href="/licenciatura/">LICENCIATURA</a></li>
<li><a href="/maestrias/">MAESTR&Iacute;AS</a></li>
<li><a href="/doctorado/">DOCTORADO</a></li>
<li><a href="/diplomados/">DIPLOMADOS</a></li>
<li><a href="/contacto/">CONTACTO</a></li>
</ul>
</div>
</div>
4

1 に答える 1

0

Chrome で同じ問題が発生していました。ページ内で多くのことが行われている場合に発生するバグのようです。次の変換コードを固定位置要素 ( transform: translateZ(0);-webkit-transform: translateZ(0);) に追加することで修正できました。ブラウザがハードウェア アクセラレーションを使用してデバイスのグラフィック プロセッシング ユニット (GPU) にアクセスし、ピクセルを飛ばします。一方、Web アプリケーションはブラウザーのコンテキストで実行されるため、レンダリングの大部分 (すべてではないにしても) をソフトウェアが実行できるため、遷移の処理能力が低下します。しかし、Web も追いついてきており、現在ではほとんどのブラウザー ベンダーが、特定の CSS ルールによってグラフィカル ハードウェア アクセラレーションを提供しています。

-webkit-transform の使用: translate3d(0,0,0); GPU を起動して CSS トランジションを実行し、よりスムーズに (より高い FPS) にします。

注: translate3d(0,0,0) は、表示内容に関しては何もしません。オブジェクトを x、y、z 軸で 0px 移動します。ハードウェアアクセラレーションを強制するのは単なるテクニックです。

#barra_arriba {
    position: fixed;
    z-index...
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
于 2014-09-18T20:51:17.813 に答える