Question

我的页面中心有一个div（宽度和高度设置，边距：自动）。然后我将图像添加到其中，每个图像都会启动自己的Shadowbox。但是，有两个问题：

影子框 - 在占据整个屏幕时 - 偏移到页面的右侧。如何让它回到中心，好像没有div？
每次连续打开任何给定图像上的影子框（每个打开时都是相同的图像或不同的图像），影子框会变小。在将图像放入div之前，我没有遇到这个问题。

您可以在行动here中看到它。

当我使用可用的Firefox控制台运行它时，我看到很多关于获取高度和宽度的警告（可能是图像）。这部分解释了问题，但我不确定解决方案。

来源：

<html>
<head>
    <link href="style.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="../shadowbox-3.0.3/shadowbox.css">
    <script type="text/javascript" src="../shadowbox-3.0.3/shadowbox.js"></script>
    <script type="text/javascript">
        Shadowbox.init();
    </script>
</head>

<body>
    <div id="pageDiv" style="background-color:#FFFFFF">

        <a href="http://www.sport2play.com/baseball/pics/1.jpg" alt="none" rel="shadowbox"><img src="http://www.sport2play.com/baseball/pics/1.jpg" width="100px"/></a>
    </div>

</body>
</html>

对于它的价值，CSS：

@font-face{
 font-family:"Officina";
 src:url(OfficinaSansStd-Book.otf);
}
body{
 font-family:"Officina";
 background-color:#AAAAAA;
}
img{
 box-shadow: 3px 3px 7px #777;
 background-color:#FFFFFF;
}
canvas{
 background-color:#FFFFFF;
}
div{
 width:500;
 height:647;
 margin:auto;
}

关于如何解决这两个问题的想法？

Answer 1

您需要使用doctype：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

它解决了你的第一个问题。

<div>和Shadowbox </div>

1 个答案: