为什么我的 js 在 html 不正确时执行不同？

Question

我有一个网页使用 jQuery、bootstrap 和 2 个不同的 jQuery 插件。一个叫做 Turn.js and the other is called mCustomScrollbar。在今天之前，我的服务器端代码会在 <!DOCTYPE html> 标记之前为每个请求添加一个脚本标记。我在另一个页面上注意到，这会导致 jQuery 在使用 $(window).height() 时返回不正确的高度，因此我修改了代码并想出了一种方法，将脚本标记放在结束 </body>标签。然而，这破坏了我正在使用的 mCustomScrollBar 库的功能

由于某种原因，滚动条不显示，鼠标滚轮功能被禁用，并且在 mobile/touch 设备上滚动被禁用。该插件肯定会触发，因为我可以看到 html 被插件修改了。

所以我的问题是：为什么当我的 html 不正确时，我的 javascript 可以正常工作，或者至少我希望它如何工作，但是当我的标记是已更正（<!DOCTYPE html> 标签前无文字）?

相关代码：

我正在应用 mCustomScrollbar 插件的 html 结构。 #flip-indes div 的父级 bootstrap .container-fluid 是页面的主容器。我在我的视图中使用带有剃刀语法的 C#。如果需要，我可以 post 生成页面 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/FullSizeImage?img=@Config.Get("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，但是 none 其中引用了 mCustomScrollbar 插件，所以我认为它不相关，我不想让任何人过载不必要的信息。如果有人想要更多代码 posted，我很乐意这样做，尽管问。

我真的认为答案在于浏览器如何根据浏览器是否能够验证 html.[= 来解释我的 js 或 html 标记。 21=]

Answer 1

欢迎使用：怪癖模式

根据 doctype 或缺少 标准模式 或 quirks 模式 。 Quirks 模式复制了古代浏览器的功能，最好避免。

由于您在 doctype 标记之前呈现内容，因此浏览器假设有一些怪癖。

这两种模式之间存在很多的差异，但这可能会让您入门：

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

还有这张友好的图表：

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

建议：不惜一切代价避免怪癖模式。修复任何损坏的代码给你带来的麻烦 HTML.

为什么我的 js 在 html 不正确时执行不同？

Why does my js execute differently with improper html?

javascript

html

browser

mcustomscrollbar