爲什麼我的js以不正確的html執行不同的操作？

我有一個使用jQuery，引導程序和2個不同的jQuery插件的網頁。一個叫做Turn.js，另一個叫做mCustomScrollbar。在今天之前，我有服務器端代碼，它會在<!DOCTYPE html>標記之前爲每個請求添加一個腳本標記。我注意到在另一個頁面上，這是由於jQuery在使用$(window).height()時返回不正確的高度導致的問題，所以我修改了代碼並找出了一種方法將腳本標記放在關閉</body>標記之前。然而，這破壞了我正在使用的mCustomScrollBar庫的功能爲什麼我的js以不正確的html執行不同的操作？

由於某種原因，滾動條不顯示，鼠標滾輪功能被禁用，並且移動/觸摸設備上的滾動功能被禁用。插件肯定是射擊，因爲我可以看到插件修改了html。

所以我的問題是：爲什麼我的JavaScript工作正常，或者至少是我希望如何，當我有不正確的HTML，但它不能正常工作時，我的標記更正（<!DOCTYPE html>標籤前沒有文字）？

相關代碼：

HTML結構我申請的mCustomScrollbar插件。 #flip-indes的父級引導程序.container-fluid這是頁面的主要容器。我在我的視圖中使用帶有剃刀語法的C＃。如果需要，我可以發佈生成的頁面的html。

<div id="flip-index"> 
    <div class="customScrollbar"> 
     @for (var i = 0; i < Model.Pages.Count; ++i) 
     { 
      <div class="index-item" onclick="$('#flipbook').turn('page', @(i + 1));"> 
       <img src="@Config.Get("FlipbookImgURL")@Model.Pages[i].Replace('\\', '/')" alt="Flipbook index preview" onerror="replaceWithText(event);"/> 
       <a class="btn btn-primary full-size-img" href="/FlipBook/[email protected]("FlipbookImgURL")@Model.Pages[i].Replace('\\', '/')" target="_blank" title="View Image Full Size"> 
        <span class="glyphicon glyphicon-eye-open"></span> 
       </a> 
       <div class="index-number">@(i + 1)</div> 
      </div> 
     } 
     <div class="index-pad">&nbsp;</div> 
    </div> 
</div>

我$(document).ready()

try 
{ 
    $('.index-item:first-child').addClass('active'); 
    var turnOptions = {}; 
    var width = screenWidth(); 
    $('.main-content').css('padding-top', $('nav.navbar').outerHeight()) 
    $('#flipbook').turn(turnOptions); 
    var firstImage = $('#flipbook img')[0]; 
    if (firstImage.complete || firstImage.naturalHeight > 0) { 
     sizeElements(); 
    } else { 
     firstImage.onload = sizeElements; 
    } 
    $('.customScrollbar').mCustomScrollbar({ 
     theme: 'minimal-light', 
     axis: 'y', 
     mouseWheel: { 
      scrollAmount: ($('#flip-index').outerHeight() * (1/$('.index-item').length)) * 2 
     } 
    }); 

    $('#flip-index').css({ 
     left: parseInt($('.main-content').css('padding-left')) 
    }); 

    // Keep the sidebar and the flipper in sync. 
    $('#flipbook').on('turning', pageTurning); 
    window.addEventListener('resize', windowResize); 

    $('#otherInserts .active, #otherInserts .disabled').on('click', function (e) { 
     e.preventDefault(); 
     e.stopImmediatePropagation(); 
    }); 
} 
catch(ex) 
{ 
    alert('There was an error loading this page!'); 
    throw ex; 
} 
finally 
{ 
    // remove loading overlay 
    $('.loading-overlay').fadeOut(function() { 
     $('.loading-overlay').remove(); 
    }); 
}

有很多更多的js我有這個網頁上，但沒有它引用mCustomScrollbar插件，所以我不認爲這是相關的，我不不想讓任何人有不必要的信息。如果有人想要發佈更多的代碼，我會很樂意去做，只是問。

我真的覺得答案會在於瀏覽器如何解釋我的js或html標記，這取決於瀏覽器是否能夠驗證html。

來源

2016-06-17 Andrew Bonsall

歡迎：怪癖模式

根據doctype，或缺乏，瀏覽器可以使用標準模式或怪癖模式。怪癖模式複製了古代瀏覽器的功能，並且避免了它的最佳方式。

由於您在之前呈現內容doctype標記，因此瀏覽器會出現怪癖。

有兩種模式之間的差異LOT，但這可能讓你開始：

https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode

除了這個友好的圖表：

http://www.quirksmode.org/css/quirksmode.html

建議：不惜一切代價避免怪癖模式。修復任何破損的代碼給你不好的HTML。

來源

2016-06-17 19:11:54

我以爲怪癖模式只適用於IE瀏覽器。無論如何，我的問題是代碼工作在怪癖模式，但不是標準。我無法弄清楚爲什麼！我的HTML我是積極的，我的HTML是正確的，我已經通過許多不同的驗證器運行它。 –

按照我的問題的常見答案，我正在做一些愚蠢的事情。在這種情況下，我在錯誤的元素上調用了mCustomScrollBar函數。我猜在怪癖模式下，這很好，但不是標準模式。 –

爲什麼我的js以不正確的html執行不同的操作？

回答

相關問題