0

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

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

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

相关代码：

我将 mCustomScrollbar 插件应用到的 html 结构。div的父级是#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/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，但没有一个引用 mCustomScrollbar 插件，所以我认为它不相关，我不想让任何人使用不必要的信息。如果有人想发布更多代码，我很乐意这样做，请问。

我真的认为答案将取决于浏览器如何根据浏览器是否能够验证 html 来解释我的 js 或 html 标记。

4

1 回答 1

1

欢迎来到：怪癖模式

根据doctype或缺乏，浏览器可以使用标准模式或怪癖模式。怪癖模式复制了古代浏览器的功能，最好避免。

由于您在 doctype 标记之前呈现内容，因此浏览器假定存在怪癖。

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

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

以及这个友好的图表：

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

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

于 2016-06-17T19:11:54.953 回答