高幻灯片图像展开正文边距设置为 0px 的问题

>有人知道为什么当正文边距设置为 0px 时，第一个图像链接想要从页面中心而不是从图像中心展开？无论是否设置为 0px，第二个图像始终从图像中心正确展开。将边距设置为仅 1px 将强制第一个图像正确扩展。

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
    <script type="text/javascript" src="/highslide/highslide-with-html.js"></script>
    </head>
    <body style="margin:0px;">
     <a class="highslide" href="/full.png" onclick="return hs.expand(this)"><img src="/thumb.png"></a>
     <a class="highslide" href="/full.png" onclick="return hs.expand(this)"><img src="/thumb.png"></a>
    </body>
    </html>

这很相似，但我仍然无法弄清楚。高幻灯片：重新缩小图像的问题

事实证明，当直接靠近正文边距 0px 时，任何图像都会失败。解决方法是将图像或容器放置在 1px 或更远的地方。

无法告诉您为什么会发生这种情况，但如果它没有掩盖您正在尝试执行的其他操作，一种解决方法是将缩略图包装在div 中，并在该div 上至少放置一个像素边距：

<body style="margin:0px;">
     <div style="margin:1px;">
          <a class="highslide" href="/full.png" onclick="return hs.expand(this)"><img src="/thumb.png"></a>
          <a class="highslide" href="/full.png" onclick="return hs.expand(this)"><img src="/thumb.png"></a>
     </div>
</body>

相关内容

最新更新

热门标签：