链接移动点击，我看到的最奇怪的事情（在CSS中）

Question

查看我的标题导航，看起来不错，但是当你点击它时，它会移动吗？ http://www.indachi.co.id/ 有什么线索的原因？ 所有代码都有效并在下面提供 HTML

以下是一些截图：

点击之前

点击后

HTML

<div id="wrapper-header">
        <div id="logo" style="cursor:pointer" onclick="window.location='../'"></div>
  <div id="wrapper-menu">
            <ul class="menu">
                <li><a href="../" class="current"><span class="cufon cufon-canvas" style="width: 54px; height: 22px;"><canvas width="66" height="22" style="top: 0px; left: -1px;"></canvas><span class="cufon-alt">home</span></span></a></li>
                <li><a href="chair/"><span class="cufon cufon-canvas" style="width: 45px; height: 22px;"><canvas width="61" height="22" style="top: 0px; left: -1px;"></canvas><span class="cufon-alt">chair</span></span></a></li>
                <li><a href="desk/"><span class="cufon cufon-canvas" style="width: 43px; height: 22px;"><canvas width="56" height="22" style="top: 0px; left: -1px;"></canvas><span class="cufon-alt">desk</span></span></a></li>
                <li><a href="partition/"><span class="cufon cufon-canvas" style="width: 80px; height: 22px;"><canvas width="91" height="22" style="top: 0px; left: -1px;"></canvas><span class="cufon-alt">partition</span></span></a></li>
                <li><a href="classic/"><span class="cufon cufon-canvas" style="width: 58px; height: 22px;"><canvas width="72" height="22" style="top: 0px; left: -1px;"></canvas><span class="cufon-alt">classic</span></span></a></li>
                <li><a href="executive_series/"><span class="cufon cufon-canvas" style="width: 93px; height: 22px;"><canvas width="112" height="22" style="top: 0px; left: -1px;"></canvas><span class="cufon-alt">executive </span></span><span class="cufon cufon-canvas" style="width: 52px; height: 22px;"><canvas width="67" height="22" style="top: 0px; left: -1px;"></canvas><span class="cufon-alt">series</span></span></a></li>
                <li><a href="safe/"><span class="cufon cufon-canvas" style="width: 37px; height: 22px;"><canvas width="49" height="22" style="top: 0px; left: -1px;"></canvas><span class="cufon-alt">safe</span></span></a></li>
                <li class="last"><a href="lounge/"><span class="cufon cufon-canvas" style="width: 65px; height: 22px;"><canvas width="77" height="22" style="top: 0px; left: -1px;"></canvas><span class="cufon-alt">lounge</span></span></a>  </li>
            </ul>
        </div>
      <div id="wrapper-search">
        <form action="search.php" method="get" name="search" id="search">
          <input id="search" type="text" name="search" value="search here" onfocus="clearText(this)" onblur="clearText(this)">
          <input id="btn-search-submit" type="button">
        </form>
  </div>
      <div class="shadow-down"></div> 
</div>

CSS

.wrapper-header{
width: 960px;
margin: auto;
position: relative;
height: 150px;}

.logo{
background: url("../img/logo.png") no-repeat;
width: 460px;
height: 100px;
position: absolute;
top: 0px;
left: -2px;}

.wrapper-menu{
position: absolute;
top: 90px;
left: 8px;
width: 780px;}

,ul.menu{
margin: 11px 0px 0px;}
ul.menu li{
float:left;
height: 26px;
background: url("../img/menu-sep.png") right center no-repeat;
padding: 8px 0 4px 0;}

.ul.menu li.last{
background: none;}

.ul.menu li a{
height: 18px;
padding: 4px 10px 6px;
font-size: 22px;}

.ul.menu li.last a{
color: #466180;}

.ul.menu li.last a:hover, ul.menu li.last a.current{
color: #000033;}

.ul.menu li a:hover, ul.menu li a.current{
color: #000033;}

.#wrapper-search{
background: transparent url("../img/search.png") no-repeat;
position: absolute;
top: 40px;
width: 212px;
right: -2px;}

.#search{
background: transparent;
width: 192px;
height: 25px;
border: 0px;
font-size: 11px;
padding: 0 5px 0 5px;}

.#btn-search-submit{
background: transparent url("../img/btn-search.png");
background-position: -30px 0;
position: absolute;
right: 5px;
top: 5px;
border: 0px;
width: 16px;
height: 16px;
cursor: pointer;}

.#btn-search-submit:hover{
background-position: 0 0;}

Answer 1

这部分CSS导致了这个问题：

*:focus {
    outline: none;
    position: absolute;
    text-transform: capitalize;
    left: 15px;
}

由于您在链接中有canvas。一旦聚焦，就应用上述css。因此它改变了完整的布局。我认为你不需要任何上述CSS。但是你可以删除＆＃34; position：absolute＆＃34;并仍使用上述css。

Answer 2

ul.menu li{}和ul.menu li a{}应为position: relative;