也许我的标题不是很清楚,但我只是将链接粘贴到我的网站上:
请查看菜单中的方形按钮。如果我使用firefox它按预期工作。如果你将鼠标悬停在它们上面,它们会翻转,你可以看到菜单文字。
但是如果我使用chrome,那么只有最后一个按钮会翻转。
奇怪的是,它一直有效,直到最近。但我无法弄清楚问题是什么。所以也许有人可以帮助我。我不会发布html和css代码,因为你可以使用chrome来检查它。编辑:
好的,我将css和html减少到最低限度,这里是链接:http://jsfiddle.net/KVBQU/17/
HTML:
<nav id="access" role="navigation">
<div class="menuentry">
<div class="menuentrycontainer">
<div class="menutext">
<p>Home</p>
</div>
<div class="menuimage">
test
</div>
</div>
</div>
<div class="menuentry">
<div class="menuentrycontainer">
<div class="menutext">
<p>Home</p>
</div>
<div class="menuimage">
test
</div>
</div>
</div>
<div class="menuentry">
<div class="menuentrycontainer">
<div class="menutext">
<p>Party</p>
</div>
<div class="menuimage">
test
</div>
</div>
</div>
<div class="menuentry">
<div class="menuentrycontainer">
<div class="menutext">
<p>Kunst</p>
</div>
<div class="menuimage">
test
</div>
</div>
</div>
<div id="clearfloatdiv"></div>
</nav><!-- #access -->
的CSS:
#access {
position: relative;
display: block;
height: auto;
max-width: 1024px;
width: 100%;
min-width: 320px;
z-index: 1000000
}
.menuentry {
display: inline-block;
float: left;
border: 0;
height: 0;
width: 8.33%;
padding-top: 8.33%;
position: relative;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.menuentrycontainer {
position: absolute;
left: 0;
height: 100%;
width: 100%;
top: 0
}
.menutext {
color: white;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
font-family: Helvetica, Arial, sans-serif;
font-weight: 100;
background-color: rgb(124, 172, 231);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
letter-spacing: -1px;
-moz-transform: rotatey(270deg);
-ms-transform: rotatey(270deg);
-o-transform: rotatey(270deg);
-webkit-transform: rotatey(270deg);
transform: rotatey(270deg);
border: solid white 2px;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.menutext p {
padding-top: 15px
}
.menuimage {
width: 100%;
height: 100%;
position: absolute;
top: 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: rgb(124, 172, 231);
-moz-transition: -moz-transform 200ms ease-out 200ms;
-o-transition: -o-transform 200ms ease-out 200ms;
-webkit-transition: -webkit-transform 200ms ease-out 200ms;
transition: transform 200ms ease-out 200ms;
-moz-transition: -moz-transform 200ms ease-out 200ms;
-o-transition: -o-transform 200ms ease-out 200ms;
-webkit-transition: -webkit-transform 200ms ease-out 200ms;
transition: transform 200ms ease-out 200ms;
-moz-transition: -moz-transform 200ms ease-out 200ms;
-o-transition: -o-transform 200ms ease-out 200ms;
-webkit-transition: -webkit-transform 200ms ease-out 200ms;
transition: transform 200ms ease-out 200ms;
border: solid green 2px
}
.menutext {
-moz-transition: -moz-transform 200ms ease-out;
-o-transition: -o-transform 200ms ease-out;
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
-moz-transition: -moz-transform 200ms ease-out;
-o-transition: -o-transform 200ms ease-out;
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;
-moz-transition: -moz-transform 200ms ease-out;
-o-transition: -o-transform 200ms ease-out;
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out
}
.menuentrycontainer:hover .menuimage {
-moz-transform: rotatey(90deg);
-ms-transform: rotatey(90deg);
-o-transform: rotatey(90deg);
-webkit-transform: rotatey(90deg);
transform: rotatey(90deg);
-moz-transition: -moz-transform 200ms ease-in;
-o-transition: -o-transform 200ms ease-in;
-webkit-transition: -webkit-transform 200ms ease-in;
transition: transform 200ms ease-in;
-moz-transition: -moz-transform 200ms ease-in;
-o-transition: -o-transform 200ms ease-in;
-webkit-transition: -webkit-transform 200ms ease-in;
transition: transform 200ms ease-in;
-moz-transition: -moz-transform 200ms ease-in;
-o-transition: -o-transform 200ms ease-in;
-webkit-transition: -webkit-transform 200ms ease-in;
transition: transform 200ms ease-in
}
.menuentrycontainer:hover .menutext {
-moz-transform: rotatey(360deg);
-ms-transform: rotatey(360deg);
-o-transform: rotatey(360deg);
-webkit-transform: rotatey(360deg);
transform: rotatey(360deg);
-moz-transition: -moz-transform 200ms ease-in 200ms;
-o-transition: -o-transform 200ms ease-in 200ms;
-webkit-transition: -webkit-transform 200ms ease-in 200ms;
transition: transform 200ms ease-in 200ms;
-moz-transition: -moz-transform 200ms ease-in 200ms;
-o-transition: -o-transform 200ms ease-in 200ms;
-webkit-transition: -webkit-transform 200ms ease-in 200ms;
transition: transform 200ms ease-in 200ms;
-moz-transition: -moz-transform 200ms ease-in 200ms;
-o-transition: -o-transform 200ms ease-in 200ms;
-webkit-transition: -webkit-transform 200ms ease-in 200ms;
transition: transform 200ms ease-in 200ms
}
#clearfloatdiv {
clear: both;
}