Question

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

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

所以我的问题是：当我有不正确的HTML时，为什么我的javascript正常工作，或者至少我想要它，但是当我的标记得到纠正时它无法正常工作（{{1}之前没有文字标签）？

相关守则：

我正在应用mCustomScrollbar插件的html结构。 <!DOCTYPE html> div的父级是一个引导程序#flip-indes，它是页面主容器。我在我的视图中使用带有razor语法的C＃。如果需要，我可以发布生成的页面html。

.container-fluid

我的<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"> </div> </div> </div>

$(document).ready()

我在这个页面上有更多的js，但没有一个引用mCustomScrollbar插件，所以我认为它不相关，我不想让任何人有不必要的信息。如果有人想要发布更多代码，我很乐意这样做，只需要问。

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

Answer 1

欢迎来到： QUIRKS MODE

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

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

这两种模式之间存在 LOT 差异，但这可能会让您开始：

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

以及这张友好的图表：

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

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

为什么我的js用不正确的html执行不同的操作？

1 个答案: