html - 缩放时 Div 框移动

Question

我有这张 Div 幻灯片，可以让您的 div 框变为另一个 div 框。

问题是当我放大或缩小时，或者当 Chrome 消息弹出时，询问您是否要翻译网页的框。我已经尝试了很多东西，但它仍然在移动:/我认为问题出在 CSS 上，但正如我所说，我不知道问题出在哪里 :(

问题图片:

CSS:

#wrapper {
    width:960px;
    height: 750px;
    margin-top: 30px;
    overflow:hidden;
    position:absolute;
}

    #mask {
        width: 500%;
    }

    .item {
        width:20%;
        height:100%;
        float:left;
    }


    .content {
        width:100%;
        height:750px;
        margin:0 auto;
        margin-top: 20px;
    }
    .content a{
        color:#F00;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        text-decoration:none;   }

    .selected {
        font-weight:700;
    }

    .clear {
        clear:both;
    }

HTML:

<div id="wrapper">
<div id="mask">

    <div id="item1" class="item">

        <a name="item1"></a>
        <div class="content"> 
            <a href="#item1" class="panel"> <img src="Images/testknapp.png" /> </a>  
            <a href="#item2" class="panel"> <img src="Images/testknapp1.png" /> </a> 
            <table class="album">
    <tr>
    <td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/voltex.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">toltex - beliel</h2><p class="available">available now on itunes & beatport!</p><table class="toltexitunes"><tr><td class="toltexbuy" width="200"> <a href="#"> <img src="Images/knapp.png" class="toltexitunesbutton" /></a> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/beliel/1094237"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>

    <td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/noize.jpg" class="noizepic" /></span> <div class="toltex"><h2 class="noizeh2">noize - nothing special</h2><p class="available">available now on itunes & beatport!</p><table class="noizeitunes"  height="30"><tr><td class="noizebuy"> <a href="#"> <img src="Images/knapp.png" class="noizeitunesbutton" /></a> </td><td class="noizebuy"><a href="#"> <img src="Images/knapp_beatport.png" class="noizebeatportbutton" /> </td></tr></table></div></span> </td>

    </tr>
    <tr>
    <td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/dubwood.jpg" class="dubwood" /></span> <div class="toltex"><h2 class="dubwoodh2">Dubwood - Beatz for streetz</h2><p class="available">available now on itunes & beatport!</p><table class="dubwooditunes"><tr><td class="dubwoodbuy"> <a href="https://itunes.apple.com/us/album/epic-whatever/id653499598?i=653499730&ign-mpt=uo%3D4"> <img src="Images/knapp.png" class="dubwooditunes" /></a> </td><td class="dubwoodbuy"><a href="http://www.beatport.com/release/beatz-for-streetz-ep/1098201"> <img src="Images/knapp_beatport.png" class="dubwoodbeatport" /></a> </td></tr></table>

    <td height="130" width="420" class="tdcontent"> <span class="volt"> <img src="Images/buy/metaphix.jpg" class="metaphixpic" /></span> <div class="toltex"><h2 class="metaphixh2">metaphix - facets</h2><p class="available">available now on itunes & beatport!</p><table class="metaphix"><tr><td class="metaphixbuy"> <a href="https://itunes.apple.com/us/album/facets/id649920953?i=649921004&ign-mpt=uo%3D4"> <img src="Images/knapp.png" class="metaphixitunes" /></a> </td><td class="metaphixbuy"><a href="http://www.beatport.com/release/facets/1094445"> <img src="Images/knapp_beatport.png" class="metaphixbeatport" /></a> </td></tr></table></td>
    </tr>
    <tr>
    <td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/dtsk.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">lök - i'm a dtsk lover</h2><p class="available">available now on itunes & beatport!</p><table class="toltexitunes"><tr><td class="toltexbuy" width="200"> <a href="#"> <img src="Images/knapp.png" class="toltexitunesbutton" /></a> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/beliel/1094237"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>

    <td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/strobe.jpg" class="noizepic" /></span> <div class="toltex"><h2 class="noizeh2">toltex - strobe</h2><p class="available">available now on itunes & beatport!</p><table class="noizeitunes"  height="30"><tr><td class="noizebuy"> <a href="#"> <img src="Images/knapp.png" class="noizeitunesbutton" /></a> </td><td class="noizebuy"><a href="#"> <img src="Images/knapp_beatport.png" class="noizebeatportbutton" /> </td></tr></table></div></span> </td>

    </tr>
    <tr>
    <td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/gohard.jpg" class="dubwood" /></span> <div class="toltex"><h2 class="dubwoodh2">Toltex - go hard</h2><p class="available">available now on itunes & beatport!</p></br><table class="dubwooditunes"><tr><td class="dubwoodbuy"> <a href="https://itunes.apple.com/us/album/epic-whatever/id653499598?i=653499730&ign-mpt=uo%3D4"> <img src="Images/knapp.png" class="dubwooditunes" /></a> </td><td class="dubwoodbuy"><a href="http://www.beatport.com/release/beatz-for-streetz-ep/1098201"> <img src="Images/knapp_beatport.png" class="dubwoodbeatport" /></a> </td></tr></table>

    <td height="130" width="420" class="tdcontent"> <span class="volt"> <img src="Images/buy/ineedu.jpg" class="metaphixpic" /></span> <div class="toltex"><h2 class="metaphixh2">crypehead - i need u</h2><p class="available">available now on itunes & beatport!</p><table class="metaphix"><tr><td class="metaphixbuy"> <a href="https://itunes.apple.com/us/album/facets/id649920953?i=649921004&ign-mpt=uo%3D4"> <img src="Images/knapp.png" class="metaphixitunes" /></a> </td><td class="metaphixbuy"><a href="http://www.beatport.com/release/facets/1094445"> <img src="Images/knapp_beatport.png" class="metaphixbeatport" /></a> </td></tr></table></td>
    </tr>
</table>
        </div>
    </div>

    <div id="item2" class="item">
        <a name="item2"></a>
        <div class="content"> 
        <a href="#item1" class="panel"> <img src="Images/testknapp1.png" /></a>
        <a href="#item2" class="panel"> <img src="Images/testknapp.png" /> </a> 
                     <table class="album">
    <tr>
    <td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/rewind.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">toltex - rewind</h2><p class="available">available now on itunes & beatport!</p><table class="toltexitunes"><tr><td class="toltexbuy" width="200"> <a href="#"> <img src="Images/knapp.png" class="toltexitunesbutton" /></a> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/beliel/1094237"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
    <td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/killerkraut.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">killerkraut - time to get rollin'</h2><p class="available">available now on itunes & beatport!</p><table class="killerkrauttable"><tr><td class="toltexbuy" width="200"> <a href="#"> <img src="Images/knapp.png" class="toltexitunesbutton" /></a> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/beliel/1094237"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>

    </tr>
    <tr>

    <td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/harbinger.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">oskri - harbinger</h2><p class="available">available now on itunes & beatport!</p><table class="toltexitunes"><tr><td class="toltexbuy" width="200"> <a href="#"> <img src="Images/knapp.png" class="toltexitunesbutton" /></a> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/beliel/1094237"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
    <td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/philosophy.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">dubtheraphy - philosophy</h2><p class="available">available now on itunes & beatport!</p><table class="philosophy"><tr><td class="toltexbuy" width="200"> <a href="#"> <img src="Images/knapp.png" class="toltexitunesbutton" /></a> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/philosophy/1118970"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
    </tr>
    <tr>
    <td height="130" width="420" class="tdcontent"><span class="volt"> <img src="Images/buy/anditgoes.jpg" class="voltexpic" /></span> <div class="toltex"><h2 class="toltexh2">crypehead - and it goes (like this)</h2><p class="available">available now on itunes & beatport!</p><table class="philosophy"><tr><td class="toltexbuy" width="200"> <a href="#"> <img src="Images/knapp.png" class="toltexitunesbutton" /></a> </span></td><td class="toltexbuy"><a href="http://www.beatport.com/release/and-it-goes-like-this/1114352"> <img src="Images/knapp_beatport.png" class="toltexbutton" /> </td></tr></table></div></td>
    </tr>
</table>
        </div>
    </div>

</div>

你们中有人知道问题出在哪里吗？ :)

Answer 1

将#wrapper 的位置更改为 relative 并检查..

如果您需要进一步的帮助，请考虑在 JSFiddle.net 中添加您的整个样式和 html .我会更容易找到实际错误。