IE9中HTML和CSS的处理顺序
Posted
技术标签:
【中文标题】IE9中HTML和CSS的处理顺序【英文标题】：Processing Order for HTML and CSS in IE9 【发布时间】：2015-02-10 21:27:14 【问题描述】：我有一个网页，在触发 onload javascript 事件之前，我隐藏了页面的内容，然后我取消隐藏内容。它在 Chrome、IE11 和 IE10 下运行良好。但是当我使用 IE9 时，内容的隐藏会被忽略直到页面已完全加载，此时隐藏开始生效。
由于这个问题，我将隐藏从 JavaScript 移到了 CSS，并且仍然具有相同的视觉效果。所以我的问题是：CSS 是仅在 html 完全加载后才应用，还是我在这里忽略了一些东西？这里有一点代码：
#deactivate
display: none;
<html>
<body>
<div id="deactivate">MycontentIsNotToBeShown</div>
<div>MyContentIsToBeShown</div>
</body>
</html>
$(document).ready(function()
//......DO things and then as the last step:
$("#deactivate").first().show();
);
就像我说的，“停用”div 的消失至少在 jQuery 代码开始工作之前不会发生（至少在光学上是这样）。
发生这种情况的整个页面是一个共享点页面（sharepoint 2013）......更准确地说，是查看模式下的 nintex 表单。我不确定它是否与此有关，或者是否与 IE9 中加载事物的顺序有关。因此，我的问题是，IE9 中加载/使用事物的顺序是否会导致这种影响？
作为附加说明：我已经检查了 .css 中是否有太多选择器，但似乎并非如此（我知道 IE 中它可以在单个 .css 中使用多少个选择器是有限制的。 css 文件）。
【问题讨论】：
在您的id 选择器上使用first() 是多余的，因为您应该只在一个页面中拥有唯一的id 属性。如果您有多个具有deactivate id 的元素，那么您应该将其更改为一个类。
只有一个。我不太习惯 jquery，所以我只是把 first() 放在保存端（在这种情况下，id 应该总是单数）因为我不确定如果没有 first( )。
据我所知，CSS 文件是“外部的”（nintex 表单隐藏了一些东西）。从我昨天听到的情况来看，我自己遇到的问题可能源于sharepoint 如何解析创建的表单，然后将它们发送到浏览器进行渲染：/
【参考方案1】：
使用 CSS 隐藏元素，然后使用 JavaScript 在页面加载时显示元素是正确的方式，它应该可以在 Internet Explorer 中按预期工作。该元素最初应该是隐藏的。
但是，如果包含#deactivate display: none; 规则的样式表存在于正文中，浏览器将开始呈现内容，直到遇到指示应隐藏停用块的样式表。
其次，您提到您希望在 load 上显示内容，但您的 jQuery 代码使用了 document.ready 事件，该事件与 window.onload 不同并且更早触发：
DOMContentLoaded 事件在文档被加载时触发 完全加载和解析，无需等待样式表、图像、 和子帧完成加载（加载事件可用于检测 一个完全加载的页面）。 (source)
我建议内联这个特定的 CSS 规则以获得最佳结果并使用 window.load 事件等待所有资源下载完成：
<html>
<head>
<style>
#deactivate display: none;
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="deactivate">
<h1>Hidden Content</h1>
</div>
<script src="jquery.js"></script>
<script>
$(window).on("load", function()
$("#deactivate").show();
);
</script>
</body>
</html>
【讨论】：
请注意，如果 CSS 默认隐藏该元素，而 JS 稍后显示它，如果用户禁用了 JavaScript，他们将根本看不到该元素。这可能对搜索引擎优化产生负面影响。有关解决此问题的方法，请参阅我的答案。 您可以使用 JavaScript 来“编写”隐藏元素的 CSS。这是直截了当的。 可以，但addClass/removeClass 更好。它将样式与内容/脚本分开。【参考方案2】：
一种干净且对 SEO 友好的方式来处理此问题。
在 CSS 中，添加这样的样式规则（您可以更具体地只隐藏您需要的元素，或者使用不同的属性来隐藏它们）。
html.loading
visibility: hidden;
然后，在 JavaScript 中，无需等待 document.ready 或 onload，将 loading 类添加到 HTML 元素。然后，在 window.load 上删除该类。
$('html').addClass('loading');
$(window).on('load', function()
$('html').removeClass('loading');
);
这将使网站内容在加载事件触发之前不可见。你甚至可以做一些聪明的事情，比如 CSS3 加载动画。
作为一个额外的好处，这样做意味着如果用户禁用了 JavaScript 并可能改善 SEO，该网站将正常工作。
页脚中的脚本？
如果你想在页脚加载jQuery/其他脚本，你可以简单地在你的页眉中插入以下脚本标签，添加不带jQuery的加载类。
<script>
document.documentElement.className += ' loading';
</script>
然后，您可以使用 jQuery 删除该类，并将您的脚本加载到页脚中。
$(window).on('load', function()
$('html').removeClass('loading');
);
【讨论】：
嗨“$('html').addClass('loading');”那不是还有出事的可能吗？ （至少对于 html 中的其他元素，我知道这可能会很麻烦，因为它们加载速度不够快。对于 html 标签本身，我不确定） @Thomashtml 标签将始终可用于 HTML 文档中的 JavaScript，即使您将脚本放在 head 中也是如此。问题是您只能操作在处理 script 标记之前已打开的 HTML 标记。由于html 必须在任何script 标记之前打开，因此该问题不会影响html 元素。
这有一个问题：必须加载 jQuery 才能使 .addClass 工作，这意味着您不能在底部使用 JavaScript/加载 JavaScript 异步模式。
@SalmanA 很公平，虽然对每个人来说都不是问题，但我在页脚替代方案中添加了一个脚本。【参考方案3】：
你必须把你的代码放在body标签之外，它会在dom和layout(CSS)之后应用：
</body>
<script>
$(document).ready(function ()
$("#deactivate").first().show();
);
</script>
</html>
【讨论】：
在<html> 中放置<script> 元素实际上违反了content model of the html element 本身。也许您的意思是建议将脚本放在 <body> 的底部？以上是关于IE9中HTML和CSS的处理顺序的主要内容，如果未能解决你的问题，请参考以下文章
html页面使用css3中的calc()有效，一样的写法，jsp中无效(用IE9浏览)