Question

我遇到一个问题，我的顶级标题图片在调整浏览器大小时来回移动（左右）。它几乎不引人注意，但它确实让我感到困惑。不幸的是，我还没有任何东西供公众查看，但下面是相关的CSS和HTML代码。

img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#menu{
position: static;
width:979px;  /*---Give UL a width ---*/
list-style:none;  /*--- Makes the bullets go away ---*/
margin:0;  /*--- Take out any default margin on the UL tag ---*/
padding:0;  /*--- Take out any default padding on the UL tag ---*/
margin:0 auto;  /*--- Center the menu ---*/
}

#menu li{
float:left;  /*--- Make the list go horizontal ---*/
margin:0;
}

#menu li a{
display:block;  /*--- Make the entire button area clickable rather than the text alone ---*/
text-indent: -9999px; /*--- Push the text off screen to hide text---*/
overflow: hidden; /*--- Makes text outside of bounding box hidden ---*/
height:48px;    
}

<!DOCTYPE html>
<html class="no-js">
<head>
  <meta charset="utf-8">
 </head>
<body>
  <img class="displayed" src="./images/header.jpg" width="979" height="260" alt="" title="" />

<!-- Header Menu -->
    <ul id="menu">
        <li id="left">
            <a class="current" href="#">Left</a>
        </li>
        <li id="home">
            <a class="current" href="#">Home</a>
        </li>
        <li id="scents">
            <a href="#">Scents</a>
        </li>
        <li id="about">
            <a href="#">About</a>
        </li>
        <li id="shows">
            <a href="#">Shows</a>
        </li>
        <li id="stores">
            <a href="#">Stores</a>
        </li>
        <li id="contact">
            <a href="#">Contact</a>
        </li>
        <br class="clear">
    </ul>

    <!--main page content removed-->
</body>
</html>

这是捕捉图像移动时的样子： http://i.imgur.com/ve4WngB.png

这是捕获正确时的样子： http://i.imgur.com/mDv2WLm.png

非常感谢任何帮助！

图像在浏览器调整大小时左右移动

0 个答案: