3

第一次发帖...对我放轻松:-)

我有一个客户的二维码测试​​登陆页面：

http://www.woodfold.com/qr

我没有开发网站，但我现在负责更改。

目前，客户只希望出现一个简单的感谢框，然后在访问 QR 码页面时淡出。我写了一个简单的 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>

js/jQuery

<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>

CSS

#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;
}
4

1 回答 1

1

有趣的问题，但这不是您的代码，而是正常行为。我创建了一个小提琴并测试了各种 css 设置，但无法让它工作。在您的情况下，我会考虑 Nate B 提供的解决方法。这里：https ://stackoverflow.com/a/7838520/1807551

引用：

为了创建圆角的外观，您必须制作四个看起来像圆角的叠加 div，并将它们放置在每个角上。根本不是一个优雅的解决方案，但它是创造这种效果的唯一方法。

具有边框半径的容器不会一致地裁剪其中包含的内容，尤其是 Flash 内容。如果您要创建一个单独的 div 叠加层，我想它会导致无法单击视频中的任何控件，这就是为什么我认为四个绝对定位的角 div 是唯一的方法。

于 2013-05-12T14:43:39.467 回答