0

基本上它是一个灯箱演示。代码来自这里。我想点击一个链接“显示面板”然后弹出一个表单。它在 Firefox 中运行良好，但在 IE9 中错误。

html代码很简单：

<body>
<a id="show-panel" href="#">Show Panel</a>

 <div id="lightbox-panel">
    <h2>Lightbox Panel</h2>
    <p>You can add any valid content here.</p>
    <p align="center">
    <a id="close-panel" href="#">Close this window</a>
    </p>
    </div><!-- /lightbox-panel -->

    <div id="lightbox"> </div><!-- /lightbox -->
    </body>

CSS：

<style type="text/css">

#lightbox {
display:none;
opacity:0.9;
filter:alpha(opacity=90);
position:fixed;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
background-color: #FFCC66;
    }

#lightbox-panel {
display:none;
position:fixed;
top:180px;
left:50%;
margin-left:-200px;
width:450px;
border:2px solid #CCCCCC;
z-index:1001;
background-color: #999900;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
    }

.show-panel {
font-family: Arial, Helvetica, sans-serif;
font-size: xx-large;
    }
    </style>

jQuery 代码：

$("a#show-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeIn(300);
})
 $("a#close-panel").click(function(){
 $("#lightbox, #lightbox-panel").fadeOut(300);
 })

Firefox中的效果： 火箱

IE9中的效果： IE9

您不仅看到透明背景，而且灯箱的位置也不对。

感谢帮助。

整个代码：

https://skydrive.live.com/?cid=03a8bb9eaeeff1db#cid=03A8BB9EAEEFF1DB&id=3A8BB9EAEEFF1DB!234

4

3 回答 3

1

问题

正如 Jashwant 所说，这可能是一个文档类型问题。这正是问题所在。一旦我在<html>标签前面添加了 HTML 5 文档类型，它就被修复了。

<!DOCTYPE html>

请记住，IE 不如其他浏览器聪明。因此，您应该为网页使用正确的设置：

<!DOCTYPE html>

<html>
  <head>
  </head>

  <body>
  </body>
</html>

它似乎正在处理这个JsFiddle。

我确实看到你说它在你身边的 JsFiddle 上也能正常工作。那么，你能把你的整个 HTML 发布在一个pasteTool类似的pastebin上吗？这将使解决这个问题更容易。

不过，我想指出的一件事是，您将灯箱垂直居中的方式并不均匀。

灯箱的宽度450px非常适合margin-left您将其减半。450 的一半是 225，所以你的新margin-left是 -225px。

这将使它完美地位于中心。我还喜欢使用 JavaScript 来获取对象的宽度并在其中进行数学运算。这将需要更长的时间来加载页面，因为它必须做更多的工作，但我认为它工作得很好。

考虑到对您而言，灯箱似乎无法在该 HTML 页面上运行，这有点离题，但我认为这也可能有用。确保再次检查您的 HTML。可能存在 IE 无法修复的问题，而其他浏览器（如 Google Chrome）可以。

哦，如果您想将灯箱水平居中，您可以使用相同的方法，只需将高度减半，然后在margin-top

于 2012-08-04T21:13:17.917 回答
1

这可能是doctype个问题。

把这个放在你的前面<html>

<!DOCTYPE html>

还，

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

在head部分。

于 2012-08-04T21:24:21.693 回答
0

它似乎对我有用。您确定没有其他原因导致此问题吗？

现场演示

我建议同时设置 html 和 body 标签的高度和宽度。我不确定这是否是原因，但我认为它会有所帮助。

html, body {
    height:100%;
    width:100%;
}

我已经创建了一个您在 html 文件中提供给我们的内容的示例，它似乎可以正常工作。我认为我们需要更多信息。这些是我放在 html 文件中的内容。

<!DOCTYPE html>

<html>
    <head>
        <style type="text/css">
            #lightbox {
                display:none;
                opacity:0.9;
                filter:alpha(opacity=90);
                position:fixed;
                top:0px;
                left:0px;
                min-width:100%;
                min-height:100%;
                z-index:1000;
                background-color: #FFCC66;
            }

            #lightbox-panel {
                display:none;
                position:fixed;
                top:180px;
                left:50%;
                margin-left:-200px;
                width:450px;
                border:2px solid #CCCCCC;
                z-index:1001;
                background-color: #999900;
                padding-top: 10px;
                padding-right: 15px;
                padding-bottom: 10px;
                padding-left: 15px;
            }

            .show-panel {
                font-family: Arial, Helvetica, sans-serif;
                font-size: xx-large;
            }
        </style>
    </head>
    <body>
        <a id="show-panel" href="#">Show Panel</a>

        <div id="lightbox-panel">
            <h2>Lightbox Panel</h2>

            <p>You can add any valid content here.</p>
            <p align="center">
                <a id="close-panel" href="#">Close this window</a>
            </p>
        </div><!-- /lightbox-panel -->

        <div id="lightbox"> </div><!-- /lightbox -->

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
            $("a#show-panel").click(function(){
                $("#lightbox, #lightbox-panel").fadeIn(300);
            });

            $("a#close-panel").click(function(){
                $("#lightbox, #lightbox-panel").fadeOut(300);
            })
        </script>
    </body>
</html>

当我将我的测试与您给我们的测试进行比较时，您缺少文档类型。一旦我添加了文档类型，一切正常。

于 2012-08-04T21:05:36.473 回答