2010-01-19 19 views
0

我有一個無序的列表,這是一種嵌套的javascript幫助。您單擊幫助主題,並出現一個可滾動的div和幫助項目。這些幫助項目是無序列表。什麼?!?在div中的文本正確包裝,但IE7。 IE7每行有一個單詞?

在FF,Safari,IE6中一切正常(好吧,我在IE6中出現了一個水平滾動條,出於某種原因)和IE8。但是在IE7中,它每行給我一個字,並使滾動條變得冗長以彌補。我搜查了,但還沒有看到我在找什麼。 IE中的開發人員工具對我來說看起來並不明顯,但是當我切換到IE7模式時,問題在那裏被複制。

感謝您的幫助! 喬爾

編輯: 一些代碼...

的helpbox:

<div class="helpbox"> 
    <h2 class="title2a adjust"><a class="nodecoration" href="javascript:animatedcollapse.toggle('collapse1')">Quick Start</a></h2> 
    <div id="collapse1" class="helpbox2"> 

       <ul id="helpbo"> 
        <li class="helpchange"><a href="#">Add Items</a></li> 
        <li class="helpchange"><a href="#">Create Timeline</a></li> 
        <li class="helpchange"><a href="#">Set Reminder</a></li> 
        <li class="helpchange"><a href="#">Detailed Help Topics</a></li> 
       </ul> 
       <hr class="ninetypercent"></hr> 

       <div class="instructions helpitems" id="animators"> 
       <div class="container"><ul> 
       <li>Make sure the <b>Monthly</b> tab is highlighted on the top right of the screen.</li> 
       <li>Click on the day that you want to add an event.</li> 
       <li>You can create a main event-which you can apply a timeline to, or you can create a simple to-do item.</li> 
       <li>Fill in the details. If you are creating a main event, you can add a timeline. If you don't know how to do that, read the <b>Create Timeline</b> help link above.</li> 
       <li>Click <b>Save</b> when you're done.</li> 
       <li>Your event or to-do will now show up in your calendar.</li> 

        </ul></div> 

        <div class="container"><ul> 
        <li>Click on the <b>Admin</b> tab on the top right of the screen.</li> 
        <li>In the main display, next to <b>Manage</b> click <b>Add Timeline</b></li> 
        <li>A new blank timeline template will appear.</li> 
        <li>Give a descriptive title of your timeline. You can always go back and edit things later if you need to.</li> 
        <li>The first column, <b>Days From Event</b>, is the number of days before or after the main event that you want the to-do item to happen. It must be a number-negative numbers for the days before the event and positive number for days after the event.</li> 
        <li>Fill in the <b>Days From Event</b>, the <b>Title</b> and <b>Description</b> of each to-do item you want to create.</li> 
        <li>Click <b>Add More To-Do Items</b> to add another item. Add as many items as you need.</li> 
        <li>If you have added <b>Team Members</b>, you can assign tasks to members in the <b>assigned to</b> column.</li> 
        <li>When you have finished your new timeline, click <b>Save Timeline</b>.</li> 
        <li>Your new timeline is now ready to be applied to your main events</li> 
        </ul></div> 

        <div class="container"><ul> 
        <li>You can set a reminder for a main event or a to-do item.</li> 
        <li>Make sure the <b>Monthly</b> tab is selected on the top right of the screen.</li> 
        <li>First, <b>Create or Select</b> the event that you want to set a reminder for.</li> 
        <li>If you have selected an existing event, click <b>Edit Event</b>.</li> 
        <li><b>Click</b> the <b>Checkbox</b> next to the word <b>Reminder</b>. </li> 
        <li>Set the date and time you'd like your reminder, and you'll get an email reminder then.</li> 

        </ul></div> 

        <div class="container"><ul> 
            <li>For more detailed help on specific features, please click on the <b>Help</b> tab at the top right of the screen.</li> 
            <li>There, you will find several <b>Tutorial Videos</b> That can walk you through more of the complex features.</li> 

        </ul></div> 


       </div> 
      <div class="closebutton"> 
       <a href="javascript:animatedcollapse.toggle('collapse1')">close</a> 
      </div> 


     </div> 
</div> 

我使用jQuery和animated.collapse庫。

js代碼是:

<script type="text/javascript"> 
//<![CDATA[ 
    document.documentElement.className += " js"; // Add js class to the HTML element 
    $(function(){ 
    var $containers = $("#animators > div").hide(); 

    $('ul#helpbo li a').each(function(i,el){ 
     var idx = i; 
     $(this).click(function(e){ 
     var $target = $containers.filter(':eq(' + idx + ')'); 
     // Fade out visible div 
     if($containers.filter(':visible').not($target).length){ 
      $containers.filter(':visible').fadeOut(500, function(){ 
      $target.not(':visible').fadeIn(500); 
      }); 
     } else { 
      $target.not(':visible').fadeIn(500); 
     } 

     e.preventDefault(); 
     }) 
    }) 
    }); 


$(".helpchange").click(function() { 
    $(".changinghelp").removeClass("changinghelp"); 
    $(this).addClass("changinghelp"); 
}); 

//]]> 
+0

請提供代碼或在線測試頁。您可以在http://jsbin.com – Sampson 2010-01-19 03:38:45

+0

在線創建測試頁面。我將包含代碼,但它很大 - 附帶了幾個js庫位。 – Joel 2010-01-19 03:48:11

+0

這是在線的一些地方? – Sampson 2010-01-19 03:55:11

回答

0

另一個笨小白問題。我沒有爲這些內部lis聲明寬度。它在其他瀏覽器上運行良好,因爲它只是繼承,但不在IE7中