和影子盒
我的页面中心有一个 div（宽度和高度设置，边距：自动）。然后我将图像添加到其中，每个图像都会启动自己的 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;
}
如何解决这两个问题的想法？
I have a div centered on my page (width and height set, margin:auto). I am then adding images into it, and each image launches its own Shadowbox. However, there are two problems:
- The shadowbox - while taking up the entire screen - is offset to the right side of the page. How do I get it back to center as if there was no div?
- Each successive time I open a shadowbox on any given image (either all the same image or different image on each open), the shadowbox gets smaller. I didn't have this problem until I put the images inside the div.
You can see it in action here.
When I run it using the available Firefox consoles, I see a lot of warnings about fetching the height and width (presumably of the image). That partially explains the problems, but I'm not sure of the solution.
Source:
<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>
For what it's worth, the 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;
}
Thoughts on how to fix these two problems?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您需要使用 doctype：
它解决了您的第一个问题。
You need to use doctype:
It solves your 1st problem.