透明背景在IE9中无法正常工作

Question

Basically it is a lightbox demo. 基本上它是一个灯箱演示。 The code is from here. 代码来自这里。 I want to click a link "Show Panel" then pop out a form. 我想点击“显示面板”链接，然后弹出一个表格。 It works well in Firefox but wrong in IE9. 它在Firefox中运行良好，但在IE9中却出错。

The html code is quite simple: 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>

The CSS: 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>

The JQuery code: JQuery代码：

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

The effect in firefox: 在firefox中的效果： 燃烧室

The effect in IE9: IE9中的效果： IE9

You see not only the Transparent background but also the position of the lightbox are not right. 您不仅可以看到透明背景，还可以看到灯箱的位置不正确。

Thanks for help. 感谢帮助。

The entire code: 整个代码：

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

Answer 1

The Issue 问题

As Jashwant said it might be a doctype issue. 正如Jashwant所说，这可能是一个doctype问题。 And thats exactly the issue. 这就是问题所在。 It was fixed once I put added the HTML 5 doctype in front of the <html> tag. 一旦我在<html>标签前面添加了HTML 5 doctype，它就被修复了。

<!DOCTYPE html>

Remember that IE isn't as smart as some other browsers. 请记住，IE并不像其他浏览器那样聪明。 So you should use the correct setup for a webpage: 所以你应该使用正确的网页设置：

<!DOCTYPE html>

<html>
  <head>
  </head>

  <body>
  </body>
</html>

It does seem to be working on this JsFiddle . 它似乎确实在这个JsFiddle上工作。

I do see you said it works fine on the JsFiddle on your side too. 我确实看到你说它也适合你身边的JsFiddle。 So, could you post your whole HTML on a pasteTool like pastebin ? 那么，你可以将你的整个HTML发布在像pastebin这样的pasteTool吗？ That would make fixing this easier. 这将使修复这个更容易。

One thing, I want to point out though is that the way your centering the lightbox vertically is not even. 有一点，我想指出的是，你的灯箱垂直居中的方式并不均匀。

The width of the lightbox is 450px so for the margin-left you are going to want to half that. 灯箱的宽度为450px因此对于margin-left你想要的一半。 Half of 450 is 225, so your new margin-left is -225px. 450的一半是225，所以你的新margin-left是-225px。

This would make it perfectly in the center. 这将使它完美地位于中心。 I also like using JavaScript to get the width of the object and do the math in there. 我也喜欢使用JavaScript来获取对象的宽度并在那里进行数学运算。 Which will take the page a little longer to load since it has to do a little more work but I think it works pretty well. 这将使页面加载更长一点，因为它必须做更多的工作，但我认为它工作得很好。

This is a little off topic considering that to you the lightbox doesn't seem to be working on that HTML page but I thought this might also be useful. 这是一个有点偏离主题，考虑到你，灯箱似乎没有在那个HTML页面上工作，但我认为这也可能有用。 Make sure you check your HTML again. 确保再次检查HTML。 There might be an issue that IE can't fix while other browsers like Google Chrome can. 可能存在IE无法修复的问题，而谷歌浏览器等其他浏览器可以解决这个问题。

Oh and if you want to center the lightbox horizontally you can use the same method, you just half the height and use the negative form of that in the margin-top 哦，如果你想水平居中灯箱你可以使用相同的方法，你只有一半的高度，并使用在margin-top的负面形式

Answer 2

It may be doctype problem. 它可能是doctype问题。

Put this before your <html> 把它放在你的<html>之前

<!DOCTYPE html>

Also, 也，

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

in head section. 在head 。

Answer 3

It seems to be working for me. 它似乎对我有用。 Are you positive there isnt something else causing the issue? 你是积极的还有其他原因导致这个问题吗？

Live DEMO 现场演示

I would recommend setting the height and width of the html and body tags as well. 我建议也设置html和body标签的高度和宽度。 I am not sure if this is the cause, but I think it will help. 我不确定这是不是原因，但我认为这会有所帮助。

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

I have create an example of just the content you have given us in a html file and it seems to work correctly. 我已经创建了一个示例，其中包含您在html文件中提供的内容，它似乎正常工作。 I think we need more information. 我想我们需要更多信息。 These are the contents that I put in the html file. 这些是我放在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>

When I compare my test to the one you have given us you are missing the doctype. 当我将我的测试与你给我们的测试进行比较时，你就错过了doctype。 As soon as I added the doctype everything worked properly. 一旦我添加了doctype，一切正常。

透明背景在IE9中无法正常工作

问题描述

3 个解决方案

解决方案1
1 已采纳 2012-08-04 21:13:17

The Issue 问题

解决方案2
1 2012-08-04 21:24:21

解决方案3
0 2012-08-04 21:05:36

透明背景在IE9中无法正常工作

问题描述

3 个解决方案

解决方案1 1 已采纳 2012-08-04 21:13:17

The Issue 问题

解决方案2 1 2012-08-04 21:24:21

解决方案3 0 2012-08-04 21:05:36

解决方案1
1 已采纳 2012-08-04 21:13:17

解决方案2
1 2012-08-04 21:24:21

解决方案3
0 2012-08-04 21:05:36