为什么我的 swf 占用的空间比实际占用的空间多?
我创建了一个简单的 Flash 动画,就像我网站首页上的幻灯片一样。由于容器尺寸为 640 x 500,周围填充为 10 px,因此我将 swf 制作为 620 x 480 以完美贴合。由于某些奇怪的原因,每当我预览我的网站或将其上传到我的主机服务器时,都会出现滚动条,表明动画稍微太大。我不明白我做错了什么。这是与动画和容器相关的 HTML:
<div class="mainspace">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="620" height="480" id="windexslideshow">
<param name="movie" value="images/indexslideshow.swf"/>
<param name="wmode" value="transparent"/>
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="images/indexslideshow.swf" width="620" height="480">
<param name="movie" value="images/indexslideshow.swf"/>
<param name="wmode" value="transparent"/>
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/></a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
这是容器的 CSS:
.mainspace {
width:620px;
height:480px;
overflow:auto;
position:absolute;
text-align:left;
margin:0px 0px 0px 160px;
padding:10px; /*adds to the content area above (width and height), so it's actually 640 by 500*/
z-index:1;
}
.mainspace img {
border:none;
}
.mainspace .slide {
margin-left:auto;
margin-right:auto;
width:620px;
}
.imglinks1 {
margin-left:auto;
margin-right:auto;
width:50px;
border:none;
z-index:2;
}
.imglinks2 {
margin:0 0px 0 0px;
float:left;
border:none;
z-index:3;
}
body .mainspace {
}
.mainspace p {margin:0px 0 14px 0;}
.mainspace h1 {margin-left:10px; font-size:18px; color:#56AD3D; clear:both;}
.mainspace h2 {margin-left:10px; font-size:15px; color:#56AD3D; clear:both;}
.mainspace h3 {margin-left:30px; font-size:15px; color:#56AD3D;}
.mainspace h4 {margin-left:40px; font-size:15px; color:#56AD3D;}
.mainspace h5 {font-size:16px;}
.mainspace h6 {font-size:16px;}
.mainspace a:link {color:#E0D3C6; text-decoration:none;}
.mainspace a:visited {color:#56AD3D; text-decoration:none;}
.mainspace a:hover {color:#56AD3D; text-decoration:none;}*/
I created a simple flash animation to work like a slideshow on the front page of my website. Because the container was 640 by 500 with a padding of 10 px all around, I made the swf 620 by 480 to fit perfectly. For some strange reason, whenever I preview my site or upload it to my host server, scroll bars appear, indicating that the animation is slightly too big. I can't understand what I'm doing wrong. Here's the HTML pertaining to the animation and the container:
<div class="mainspace">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="620" height="480" id="windexslideshow">
<param name="movie" value="images/indexslideshow.swf"/>
<param name="wmode" value="transparent"/>
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="images/indexslideshow.swf" width="620" height="480">
<param name="movie" value="images/indexslideshow.swf"/>
<param name="wmode" value="transparent"/>
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"/></a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
And here's the CSS for the container:
.mainspace {
width:620px;
height:480px;
overflow:auto;
position:absolute;
text-align:left;
margin:0px 0px 0px 160px;
padding:10px; /*adds to the content area above (width and height), so it's actually 640 by 500*/
z-index:1;
}
.mainspace img {
border:none;
}
.mainspace .slide {
margin-left:auto;
margin-right:auto;
width:620px;
}
.imglinks1 {
margin-left:auto;
margin-right:auto;
width:50px;
border:none;
z-index:2;
}
.imglinks2 {
margin:0 0px 0 0px;
float:left;
border:none;
z-index:3;
}
body .mainspace {
}
.mainspace p {margin:0px 0 14px 0;}
.mainspace h1 {margin-left:10px; font-size:18px; color:#56AD3D; clear:both;}
.mainspace h2 {margin-left:10px; font-size:15px; color:#56AD3D; clear:both;}
.mainspace h3 {margin-left:30px; font-size:15px; color:#56AD3D;}
.mainspace h4 {margin-left:40px; font-size:15px; color:#56AD3D;}
.mainspace h5 {font-size:16px;}
.mainspace h6 {font-size:16px;}
.mainspace a:link {color:#E0D3C6; text-decoration:none;}
.mainspace a:visited {color:#56AD3D; text-decoration:none;}
.mainspace a:hover {color:#56AD3D; text-decoration:none;}*/
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
实际上是 620x480(不是如您所说的 640x500),填充为 10px。这使得
的实际区域为 600x460,因为填充位于内部,所以会溢出。
更改
为
The
<div class="mainspace">
Is actually 620x480 (not 640x500, as you said), with a padding of 10px. This makes the actual area of the<div>
600x460, since padding is on the inside, so you are overflowing.Change
to
类mainspace的DIV的左边距为160px;你是这个意思吗?
The DIV with the class mainspace has a left margin of 160px; is that what you mean?