<DIV>和Shadowbox - 编程之家

如何解决<DIV>和Shadowbox

| 我的页面中心有一个div（设置了宽度和高度，margin：auto）。然后，我将图像添加到其中，每个图像都会启动其自己的ShadowBox。但是，存在两个问题：影盒-占据整个屏幕时-偏移到页面的右侧。我如何才能像没有div一样使它回到中心？每当我连续在任何给定图像上打开一个阴影框（每次打开时都是相同的图像或不同的图像）时，该阴影框会变小。在将图像放入div之前，我没有这个问题。您可以在这里看到它的实际效果。当我使用可用的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;
}

关于如何解决这两个问题的思考？

解决方法

您需要使用doctype：

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

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