jQuery淡出div在flash对象顶部时未正确显示边框
第一次发布。。。对我宽容点:-) 我有一个客户的二维码测试登录页: 我没有开发这个网站,但我现在负责更改 目前,客户只希望出现一个简单的感谢框,然后在访问二维码页面时淡出。我编写了一个简单的div、css,并使用jQuery实现淡出效果 该网站在屏幕顶部有一个.swf电影/旋转器 只要浏览器的尺寸足够大,可以在电影下方显示QR感谢信息,代码就可以正常工作 如果浏览器/屏幕尺寸小到足以将消息推入电影区域FF和Opera,则不能正确渲染圆角。当消息显示在电影下方时,它们将正确呈现 我肯定我错过了一些愚蠢而简单的事情,但是。。。有人知道是什么原因造成的吗?下面是相关的代码片段jQuery淡出div在flash对象顶部时未正确显示边框,jquery,firefox,flash,border,opera,Jquery,Firefox,Flash,Border,Opera,第一次发布。。。对我宽容点:-) 我有一个客户的二维码测试登录页: 我没有开发这个网站,但我现在负责更改 目前,客户只希望出现一个简单的感谢框,然后在访问二维码页面时淡出。我编写了一个简单的div、css,并使用jQuery实现淡出效果 该网站在屏幕顶部有一个.swf电影/旋转器 只要浏览器的尺寸足够大,可以在电影下方显示QR感谢信息,代码就可以正常工作 如果浏览器/屏幕尺寸小到足以将消息推入电影区域FF和Opera,则不能正确渲染圆角。当消息显示在电影下方时,它们将正确呈现 我肯定我错过了一
<div id="qrThanks">
<img src="../i/qrSmall.png" title="Woodfold QR Code" alt="Woodfold QR Code" />
<p class="qrContent">Thank you for using Woodfold's QR Code!</p>
</div>
<div id="contentContainer">
<div id="flashContainer">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="731" height="312">
<param name="movie" value="http://woodfold.com/flash/superhomeFlash.swf" />
<param name="wmode" value="transparent">
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://woodfold.com/flash/superhomeFlash.swf" width="731" height="312">
<!--<![endif]-->
<img src="slide.gif" alt="slide" width="731" height="312" />
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
有趣的问题,但这不是你的代码,这是正常的行为。我创建了一个小提琴并测试了各种css设置,但无法让它工作。在你的情况下,我会考虑Nate B.在这里提供的解决方案: 引述: 为了创建圆角的外观,您必须 四个看起来像圆角的重叠div,并将它们放置在 每个角落。这根本不是一个优雅的解决方案,但这是解决问题的唯一方法 创造那种效果 具有边框半径的容器不会始终裁剪内容 包含在其中,特别是Flash内容。如果你愿意 创建一个单独的div覆盖,我想这将使它变得不可能 点击视频中的任何控件,这就是为什么我认为 绝对定位角div是唯一的方法
<script type="text/javascript" src="../scriptz/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$('div#qrThanks').show();
window.setTimeout(function() {
$('div#qrThanks').fadeOut('slow');
}, 2000);
});
</script>
#qrThanks {
position: absolute;
left: 50%;
top: 50%;
display: block;
margin: -100px 0 0 -250px;
text-align: center;
z-index: 1000;
width: 500px;
height: 100px;
background-color: #FFF;
box-shadow: 5px 5px 3px #000;
border: 10px solid #ccc;
border-radius: 10px;
}
#qrThanks img {
margin: 20px 10px 20px 20px;
padding: 0px;
width: 60px;
float: left;
box-shadow: 5px 5px 3px #000;
}
.qrContent {
display: block;
margin: auto 0px;
font-size: 20px;
line-height: 100px;
}