Question

我正在尝试创建一个简单的灯箱，它在Firefox和Chrome上运行得非常好，但在IE8上不起作用。（Windows 7）

这是我的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>lightbox</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="lightbox.js"></script>
    <style>
        #divlight {
            background: none repeat scroll 0 0 #CCCCCC;
            border: 2px solid #000000;
            height: 600px;
            left: 150px;
            top: 10p;
            padding: 15px;
            position: absolute;
            width: 800px;
        }

        #closebox {
            bottom: 10px;
            position: absolute;
            right: 10px;
        }
    </style>
</head>
<body>
     <div id="divlight">
         <table id="innerbox">
            <tbody id="tdbody">
                <tr id="tbtop">
                    <div align="center"><td style="text-align: center;" colspan="3"
             rowspan="1"><h2>Measurment Guide</h2></td></div>
                </tr>
                <tr id="tbmid">
                  <td id="tbmid1">
                    <div height="220" width="350">
                        Test
                    </div></td>
                  <td id="tbmid2">1</td>
                  <td id="tbmid3">2</td>
                </tr>
                <tr id="tbbuttom">
                  <td colspan="3" rowspan="1">345</td>
                </tr>
              </tbody>

        </table>
        <div id="closebox">
            <button id="hide">Close (x)</button>
        </div>
    </div>

<div>
    <table class="table1" width="90%" border="1px solid grey">
        <tr>
            <td width="50%">box 1</td>
            <td width="50%">box 2</td>

        </tr>
        <tr>
            <td width="50%">box 1</td>
            <td width="50%">box 2</td>

        </tr>           
        <tr>
            <td width="50%">box 1</td>
            <td width="50%">box 2</td>

        </tr>
        <tr>
            <td width="50%">box 1</td>
            <td width="50%">box 2</td>

        </tr>
        <tr>
            <td width="50%">box 1</td>
            <td width="50%">box 2</td>
        </tr>           
        <tr>
            <td width="50%">box 1</td>
            <td width="50%">box 2</td>
        </tr>                           
    </table>    
</div><p></p>
   <button id="show">Light Box</button>


</body>
    </html>

这是我的jQuery代码：我已将jquery-2.1.0.min.js重命名为jquery.js。此代码位于lightbox.js

中

$(function(){
    $('#divlight').hide();
    $('body').css('background', 'white');       
    $("#show").click(function(){
        $("#divlight").show();
        $("body").css("background", "grey");
    });
    $("#hide").click(function(){
        $("#divlight").hide();
        $("body").css("background", "white");
    });
    $("#toggle").click(function(){
        $("#divlight").toggle("normal");
    });
});

这是IE开发人员工具错误：

  Object doesn't support this property or method  jquery.js, line 2 character 29489

我几乎已经修好了......我不知道怎么样......现在它给我带来了比以前更多的痛苦......看看火狐或者铬的情况再看看IE ......

http://www.aquireservices.com/music/lightbox.html

Answer 1

听起来像是与jQuery的IE8兼容性错误 -

来自jQuery网站：

1.x分支，这次是1.11.0，增加了对旧版本的支持 Internet Explorer（IE6,7和8）。 2.x分支，今天由 2.1.0，增加了对非传统网络环境的支持，例如针对Chrome和Firefox的node.js和浏览器插件。

尝试使用1.11.0而不是2.1.0

jQuery hide（）/ show（）不起作用

1 个答案: