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); 将为 CSS 过渡启动 GPU，使它们更平滑（更高的 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 回答