2

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

  1. 阴影框 - 虽然占据了整个屏幕 - 偏移到页面的右侧。我如何让它回到中心，就好像没有 div 一样？
  2. 每次我在任何给定图像上打开一个阴影框（每次打开时都是相同的图像或不同的图像），阴影框会变小。直到我将图像放入 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;
}

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

4

1 回答 1

0

您需要使用文档类型：

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

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

于 2011-05-23T23:08:29.230 回答