Question

这是我网站的结构：

<html>
   <body>
      <embed flash>
      <div id='dialog'>
          <div width="500px" height="300px"><iframe/></div>
      </div>
   </body>
</html>



 <style type="text/css">
        .hide { display: none; }
        .show { display: block; }
        iframe { border: 0; }
        #dialog { background-color: rgba(0,0,0,0.5); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; }
            #dialog .dialog-inside { width: 650px; -webkit-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.54); -moz-box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.54); box-shadow: 0px 0px 30px 0px rgba(50, 50, 50, 0.54); margin: auto; overflow: hidden; border-radius: 5px; }
                #dialog .dialog-inside .dialog-header { position: absolute; right: 0; right: 1px; top: 3px; }
                #dialog .dialog-inside .dialog-header .close { width: 23px; height: 23px; background: url("Images/close.png"); background-position: 2px 2px; background-repeat: no-repeat; border: 1px solid transparent; cursor: pointer; }
                #dialog .dialog-inside .dialog-header .close:hover { background-color: #fdc985; border-color: #4040B1; }
                #dialog .dialog-inside .dialog-bottom-wrapper { position: absolute; bottom: 0px; right: 0; left: 0; height: 42px; background-color: #f8f8f8; }
                    #dialog .dialog-inside .dialog-bottom-wrapper .dialog-bottom { float: right; margin: 8px 5px; }
                    #dialog .dialog-inside .dialog-bottom-wrapper .dialog-bottom .btn { background: rgb(251,251,249); /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZiZmJmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmM2YzZWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top,  rgba(251,251,249,1) 0%, rgba(243,243,239,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251,251,249,1)), color-stop(100%,rgba(243,243,239,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top,  rgba(251,251,249,1) 0%,rgba(243,243,239,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top,  rgba(251,251,249,1) 0%,rgba(243,243,239,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top,  rgba(251,251,249,1) 0%,rgba(243,243,239,1) 100%); /* IE10+ */ background: linear-gradient(to bottom,  rgba(251,251,249,1) 0%,rgba(243,243,239,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbf9', endColorstr='#f3f3ef',GradientType=0 ); /* IE6-8 */ border: 1px solid #7f9db9; color: #333333; cursor: pointer; display: inline-block; margin-left: .5em; padding: 0px 12px; text-align: center; line-height: 20px; outline: none; border-radius: 3px; }
                        #dialog .dialog-inside .dialog-bottom-wrapper .dialog-bottom .btn:hover { background-color: #d1d1d1; border-color: #d1d1d1; color: #111; moz-transition: background-position 0.1s linear; ms-transition: background-position 0.1s linear; o-transition: background-position 0.1s linear; text-decoration: none; transition: background-position 0.1s linear; webkit-transition: background-position 0.1s linear; outline: none; }
            #dialog iframe { display: block; height: 114px; }

    </style>

问题是对话框我设置它的位置：绝对，左，上，下，右：0，在Chrome中，IE工作正常，它以黑色背景呈现全屏。 Opera，对话框的宽度和高度用div child =＆gt;修复它没有全屏。在Firefox中，它就像是一样，但我在检查模式下盘旋对话框，它显示黑色背景。

任何人都有这样的问题吗？

Answer 1

尝试添加

height: 100%;
width: 100%;

在#dialog

上

Firefox，Opera的位置：绝对

1 个答案: