Question

我有一个HTML / CSS菜单，可以在CSS上左右打开：悬停效果。它似乎在大多数现代浏览器上运行良好，但在Chrome上，当效果向左移动时，文本会出现一些问题。

HTML：

<ul class="tabs">
<li class="rotateL work_link"><a href="#">WORK</a>
<ul class="submenu">
<li><a href="#house" class="work">housing</a></li>
<li><a href="#interior" class="work">interior</a></li>
<li><a href="#public-space" class="work">public space</a></li>
<li><a href="#public-buildings" class="work">public buildings</a></li>
<li><a href="#planing" class="work">planing</a></li>
<li><a href="#design" class="work">design</a></li>
<li><a href="#search" class="work" id="searchlink">search</a></li>
</ul>
</li>
<li class="rotateR practise_link"><a href="#">PRACTICE</a>
<ul class="submenu">
<li><a href="#mission" class="practise">mission</a></li>
<li><a href="#history" class="practise">history</a></li>
<li><a href="#services" class="practise">services</a></li>
<li><a href="#awards" class="practise">awards</a></li>
</ul>
</li>
</ul>

CSS：

ul.tabs, ul.tabs ul {
margin:0 auto;
padding:0;
list-style:none;
font-size: 7pt;
}
ul.tabs > li {
border: 1px solid #fff;
position:relative;
}
ul.tabs > li > a {
float:left;
width:18px;
}
ul.tabs li:hover > a {font-weight: bold; }
ul.tabs li ul {
position:absolute;
left:0;
opacity:0;
height:0;
width:0;
overflow:hidden;
background: #fff;
vertical-align: bottom;
/*display: table;*/
}
ul.tabs li li { line-height: 12pt; white-space: nowrap;}
ul.tabs ul a {
line-height: 12pt;
background:#fff;
margin-bottom:-1px;
text-decoration:none;
color:#000;
text-transform: uppercase;
display: block;
padding: 0px 2px;
}
ul.tabs:hover li ul {
    display: block;
    opacity: 1;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}

ul.tabs li.rotateL, ul.tabs li.rotateR { background: #fff; width: 18px;}
ul.tabs li.rotateL > a,ul.tabs li.rotateR > a { 
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    display: block;
    bottom: 10px;
    position: absolute;
    color: #000;
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
}
ul.tabs li.rotateL > a:hover, ul.tabs li.rotateR > a:hover { font-weight: normal; }
ul.tabs li.rotateR ul {
left: -127px;
top: -1px;
text-align: right;
border-right: 1px solid #111;
}
ul.tabs li.rotateL ul {
left:19px;
top: -1px;
white-space:normal;
border-left: 1px solid #111;
}

li.work_link {
    left: 40px;
    height: 151px;
    display: block;
    color: #000;
    cursor: pointer;
}
ul.tabs li.work_link ul {
    height: 108px;
    width: 110px;
    vertical-align: bottom;
    padding-top: 45px;
}
ul.tabs:hover li.work_link ul:not(.active) {
    animation:workLink 2s 1;
    -webkit-animation:workLink 2s 1; /*Safari and Chrome*/
}
@keyframes workLink
{
from {width: 0px; }
to {width: 110px; }
}

@-webkit-keyframes workLink /*Safari and Chrome*/
{
from {width: 0px;  }
to {width: 110px; }
}

li.practise_link {
    left: 165px;
    height: 98px;
    display: block;
    cursor: pointer;
}
ul.tabs li.practise_link ul {
    height: 64px;
    padding-top: 36px;
    width: 58px;
    left: -58px

}
ul.tabs:hover li.practise_link ul:not(.active) {
    animation:practiseLink 2s 1;
    -webkit-animation:practiseLink 2s 1; /*Safari and Chrome*/
}
@keyframes practiseLink
{
from {width: 0px; left: -2px}
to {width: 58px; left: -58px}
}

@-webkit-keyframes practiseLink /*Safari and Chrome*/
{
from {width: 0px; left: -2px; }
to {width: 58px; left: -58px; }
}

如果代码太乱了，请告诉我，我想我应该再做一个更简单的解决方案：/

提前致谢。

Answer 1

这是一个真实的答案，因此您可以将其标记为正确答案。对不起，重复。

我现在没有开箱即用的解决方案，但我可以告诉你它是由右对齐文本引起的。它在浏览器时“震动” 动画时重新计算文本位置。你应该尝试设置元素宽度（与overflow：hidden混合）以避免这种情况重新计算。

Chrome上的webkit动画出现故障

1 个答案: