Question

我正在使用以下代码制作div叠加层。如果按下“登录”或“注册”链接，则div id="overlay"覆盖页面。该代码使用jQuery。

它在Firefox和Chrome中运行良好，但在IE6中不起作用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
    <script type="text/javascript" src="jquery-ui-1.8.16.custom/development-bundle/jquery-1.6.2.js"></script>
    <title> </title>
</head>
<style>
    #overlay
    {
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
        bottom:0;
        right:0;
        background: #CCCCCC;
        z-index:100;
    }

    #log_in
    {
        height:25px;
        width:130px;
        float:right;
        color:#00000;
        line-height:1.7em;
        margin-top:0px;
    }

    .login,.register
    {
        color: #000000;
        font-size:14px;
        font-weight:bold;
    }
</style>
<body>
    <script type="text/javascript">
        $(function() {
            $('.login,.register').click (function() {
                $('#overlay').fadeIn('fast');
            });
            $('#overlay').click(function() {
                $(this).fadeOut('fast');
            });
        });
    </script>
    <div id="overlay" style="display:none; position:absolute"></div>
    <div id="log_in"><a href="#" class="login">Login</a> &brvbar; <a href="#" class="register" >Register </a></div>
    </div>
</body>
</html>

Answer 1

不确定你的问题是什么;叠加未显示或显示在错误的位置

但试试这个：删除此

bottom:0;
right:0;

并添加：

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

Answer 2

第28行周围也有格式错误的颜色代码。＃00000需要另外一个零。我没有IE6来测试。

在IE6 </div>中进行<div>覆盖

2 个答案: