Css Highslide图像展开问题,正文边距设置为0px

Css Highslide图像展开问题,正文边距设置为0px,css,highslide,Css,Highslide,有人知道当正文边距设置为0px时,为什么第一个图像链接要从页面中心展开,而不是从图像中心展开吗?无论是否设置为0px,第二个图像始终从图像中心正确展开。将边距设置为1px将强制第一幅图像正确展开 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="/highslide/highslide.css" /> <

有人知道当正文边距设置为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>


您能提供一个JSFIDLE或CodePen让我们看看您的CSS和HTML代码吗?我们不能做太多的事情,只能在没有先看到一些东西的情况下进行推测。在这两个地点中有没有可能对highslide项目进行沙箱测试?我会看一看。你可以使用jsfiddle.net中的External Sources选项卡来添加你的站点使用的任何外部源,这意味着它可以添加highslide-with-html.js和highslide.css。你所要做的就是获得这些文件的链接。我在我的原始问题中添加了一个链接。顺便说一句,如果你想看到更奇怪的东西,只需将正文页边距顶部或左侧设置为零。哎呀!