IE7 CSS问题(工作正常是IE8)

时间:2011-07-25 15:17:44

标签: jquery css internet-explorer-7

我正在尝试创建一个学生列表,这些学生在点击学生姓名时可以展开。我在我的家用电脑上创建了这个项目,它有IE8,当我今天早上带它去测试它失败了。我的工作计算机使用的是IE7,而我猜测的是我的JQuery中使用的CSS是什么。

问题是我希望所有div都隐藏()开始时以及当用户点击div时它会扩展以显示学生的测试分数。那么正在发生的事情只是第一个div hides(),而第一个div是唯一一个在点击时会展开和折叠的div。其余的根本没有运作,它们显示出扩展。希望我已经足够好地解释了我的问题:)

注意:就像大多数人一样,我正在努力学习编码的最佳实践,请告诉我什么是不对的,或者我如何改进我编码的内容。

的style.css

#wrapper
{
    width:100%;
}
#main-container
{
    width: 800px;
    margin-left:auto;
    margin-right:auto;
    font-family: Verdana;
    font-size: 12px;
}
#header
{
    border: 1px solid #999;
    border-bottom: none;
    background-color: #ccc;
    font-weight: bold;
}
#header ul
{
    display: inline;
}
#header ul li
{
    float: left;
    padding-left: 10px;
    list-style: none;
    display: inline;
    width: 200px;
}
#footer
{
    margin-left: auto;
    margin-right: auto;
    width: 800px;
    font-size: 9px;
}
#footer a
{
    float: right;
    text-decoration: none;
    color: #666;
    font-size: 9px;
}
#footer a:hover
{
    text-decoration: underline;
    color: blue;
}
.student
{
    border: 1px solid #999;
    border-bottom: none;
    cursor: default;
}
.student:hover
{
    background-color: #f6f6f6;
}
.student ul
{
    display: inline;
}
.student ul li
{
    float: left;
    padding-left: 10px;
    list-style: none;
    display: inline;
    width: 200px;
}
.student-scores
{
    height: 206px;

}
.student-scores ul
{
    display: inline;
}
.student-scores ul li
{
    padding-left: 100px;
    width: 699px;
    list-style: none;
    display: inline;
    border-top: 1px dotted #999;
}
.student-scores ul li:hover
{
    background-color: #FFCC66;
}
.lesson
{
     font-size: 12px;
}
.date
{

    font-size: 10px;
    margin-left: 50px;
}
.score
{

    font-size: 10px;
    margin-left: 50px;
}

的jquery.js

$(document).ready(function()
{
    $('.students div:last-child').css("border-bottom","1px solid #999");

    $('div.student-scores').css("border-bottom","none");

    $('div.student-scores').hide();

    $('div.student').click(function()
    {
            $(this).find('.student-scores').slideToggle();
    });
});

的index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>JSON Testing</title>
<script type="text/javascript" src="library/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="library/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="library/style.css" />
</head>

<body>
<div id="wrapper">
    <div id="main-container">
        <div id="header">
            <ul>
                <li>Employee ID</li>
                <li>Last Name</li>
                <li>First Name</li>
            </ul>
         </div>
         <div id="students">
             <div class="student">
                 <ul>
                     <li class="id">0425655</li>
                     <li class="lname">Doe</li>
                     <li class="fname">John</li>
                 </ul>
                 <div class="student-scores">
                     <ul>
                         <li><span class="lesson">Lesson <strong>01</strong></span><span class="date">Submission Date: <strong>Not completed</strong></span></li>
                         <li><span class="lesson">Lesson <strong>02</strong></span><span class="date">Submission Date: <strong>04/26/2011</strong></span><span class="score">Score: <strong>98</strong></span></li>
                         <li><span class="lesson">Lesson <strong>03</strong></span><span class="date">Submission Date: <strong>04/27/2011</strong></span><span class="score">Score: <strong>78</strong></span></li>
                         <li><span class="lesson">Lesson <strong>04</strong></span><span class="date">Submission Date: <strong>04/28/2011</strong></span><span class="score">Score: <strong>62</strong></span></li>
                         <li><span class="lesson">Lesson <strong>05</strong></span><span class="date">Submission Date: <strong>04/29/2011</strong></span><span class="score">Score: <strong>100</strong></span></li>
                         <li><span class="lesson">Lesson <strong>06</strong></span><span class="date">Submission Date: <strong>Not completed</strong></span></li>
                         <li><span class="lesson">Lesson <strong>07</strong></span><span class="date">Submission Date: <strong>04/31/2011</strong></span><span class="score">Score: <strong>73</strong></span></li>
                         <li><span class="lesson">Lesson <strong>08</strong></span><span class="date">Submission Date: <strong>04/32/2011</strong></span><span class="score">Score: <strong>88</strong></span></li>
                         <li><span class="lesson">Lesson <strong>09</strong></span><span class="date">Submission Date: <strong>04/33/2011</strong></span><span class="score">Score: <strong>81</strong></span></li>
                         <li><span class="lesson">Lesson <strong>10</strong></span><span class="date">Submission Date: <strong>04/34/2011</strong></span><span class="score">Score: <strong>60</strong></span></li>
                         <li><span class="lesson">Lesson <strong>11</strong></span><span class="date">Submission Date: <strong>04/35/2011</strong></span><span class="score">Score: <strong>76</strong></span></li>
                         <li>need to add <strong>[average][not completed counter][percentage complete counter]</strong></li>
                     </ul>
                 </div>
             </div>
             <div class="student">
                 <ul>
                     <li class="id">442326</li>
                     <li class="lname">Smith</li>
                     <li class="fname">Jane</li>
                 </ul>
                 <div class="student-scores">
                     <ul>
                         <li><span class="lesson">Lesson <strong>01</strong></span><span class="date">Submission Date: <strong>02/25/2011</strong></span><span class="score">Score: <strong>1</strong></span></li>
                         <li><span class="lesson">Lesson <strong>02</strong></span><span class="date">Submission Date: <strong>04/26/2011</strong></span><span class="score">Score: <strong>2</strong></span></li>
                         <li><span class="lesson">Lesson <strong>03</strong></span><span class="date">Submission Date: <strong>04/27/2011</strong></span><span class="score">Score: <strong>3</strong></span></li>
                         <li><span class="lesson">Lesson <strong>04</strong></span><span class="date">Submission Date: <strong>04/28/2011</strong></span><span class="score">Score: <strong>4</strong></span></li>
                         <li><span class="lesson">Lesson <strong>05</strong></span><span class="date">Submission Date: <strong>04/29/2011</strong></span><span class="score">Score: <strong>5</strong></span></li>
                         <li><span class="lesson">Lesson <strong>06</strong></span><span class="date">Submission Date: <strong>04/30/2011</strong></span><span class="score">Score: <strong>6</strong></span></li>
                         <li><span class="lesson">Lesson <strong>07</strong></span><span class="date">Submission Date: <strong>04/31/2011</strong></span><span class="score">Score: <strong>7</strong></span></li>
                         <li><span class="lesson">Lesson <strong>08</strong></span><span class="date">Submission Date: <strong>04/32/2011</strong></span><span class="score">Score: <strong>8</strong></span></li>
                         <li><span class="lesson">Lesson <strong>09</strong></span><span class="date">Submission Date: <strong>04/33/2011</strong></span><span class="score">Score: <strong>9</strong></span></li>
                         <li><span class="lesson">Lesson <strong>10</strong></span><span class="date">Submission Date: <strong>04/34/2011</strong></span><span class="score">Score: <strong>10</strong></span></li>
                         <li><span class="lesson">Lesson <strong>11</strong></span><span class="date">Submission Date: <strong>04/35/2011</strong></span><span class="score">Score: <strong>11</strong></span></li>
                         <li>need to add <strong>[average][not completed counter][percentage complete counter]</strong></li>
                     </ul>
                 </div>
             </div>
             <div class="student">
                 <ul>
                     <li class="id">456356</li>
                     <li class="lname">Jones</li>
                     <li class="fname">Mike</li>
                 </ul>
                 <div class="student-scores">
                     <ul>
                         <li><span class="lesson">Lesson <strong>01</strong></span><span class="date">Submission Date: <strong>03/25/2011</strong></span><span class="score">Score: <strong>1</strong></span></li>
                         <li><span class="lesson">Lesson <strong>02</strong></span><span class="date">Submission Date: <strong>04/26/2011</strong></span><span class="score">Score: <strong>2</strong></span></li>
                         <li><span class="lesson">Lesson <strong>03</strong></span><span class="date">Submission Date: <strong>04/27/2011</strong></span><span class="score">Score: <strong>3</strong></span></li>
                         <li><span class="lesson">Lesson <strong>04</strong></span><span class="date">Submission Date: <strong>04/28/2011</strong></span><span class="score">Score: <strong>4</strong></span></li>
                         <li><span class="lesson">Lesson <strong>05</strong></span><span class="date">Submission Date: <strong>04/29/2011</strong></span><span class="score">Score: <strong>5</strong></span></li>
                         <li><span class="lesson">Lesson <strong>06</strong></span><span class="date">Submission Date: <strong>04/30/2011</strong></span><span class="score">Score: <strong>6</strong></span></li>
                         <li><span class="lesson">Lesson <strong>07</strong></span><span class="date">Submission Date: <strong>04/31/2011</strong></span><span class="score">Score: <strong>7</strong></span></li>
                         <li><span class="lesson">Lesson <strong>08</strong></span><span class="date">Submission Date: <strong>04/32/2011</strong></span><span class="score">Score: <strong>8</strong></span></li>
                         <li><span class="lesson">Lesson <strong>09</strong></span><span class="date">Submission Date: <strong>04/33/2011</strong></span><span class="score">Score: <strong>9</strong></span></li>
                         <li><span class="lesson">Lesson <strong>10</strong></span><span class="date">Submission Date: <strong>04/34/2011</strong></span><span class="score">Score: <strong>10</strong></span></li>
                         <li><span class="lesson">Lesson <strong>11</strong></span><span class="date">Submission Date: <strong>04/35/2011</strong></span><span class="score">Score: <strong>11</strong></span></li>
                         <li>need to add <strong>[average][not completed counter][percentage complete counter]</strong></li>
                     </ul>
                 </div>
             </div>
         </div>
     </div>
<div id="footer">Signal Electrical Fundamentals Tracker System<a href="upload.php" title="Login required">UPLOADER</a></div>
</div>
</body>
</html>

0 个答案:

没有答案