在Internet Explorer 8兼容性视图和怪癖模式下调试CSS

我构建了一个非常简单的jQuery覆盖，它在非Microsoft浏览器中运行良好。现在我想调试覆盖的CSS，使其在IE8 Comptability View和Quirks模式下工作

---

覆盖图可以在页面右下角的“关于”链接中看到-单击以显示覆盖图。有谁能建议一个好的开始调试的地方吗？

您到底遇到了什么问题？我看到覆盖显示在IE8（和兼容模式等）中，但它似乎被底部切断，并且无法单击

这可能是一个关于覆盖的z-索引的问题，或者可能是如何定位（相对或绝对）的问题，因为我知道IE家族不喜欢覆盖。我将进一步深入研究，看看是否能找到任何东西。

如果您正在寻找代码调试帮助 您可以通过强制IE8标准视图来消除怪癖/兼容性视图问题。将

放入标题中

如果您正在寻找调试工具

---

效果很好。IE还制作了一个不那么容易使用的（imho）。

其中一个问题似乎是样式中覆盖的大小。css“关于包装”和“关于灯箱包装”的高度分别设置为200px。我发现将其更改为400px将允许在IE和其他浏览器中看到它们

剩下的唯一问题是无法访问覆盖区域（“关于”区域）。您可能想考虑使用一些jQuery来改变显示/隐藏的Z索引，以便可以访问。 在script.js中：

考虑改变：

function about_click() {
   $('#about').click( function() {
      $('#about-overlay').show();
      $('#transparent-overlay').show().fadeTo(200, 0.5);
      $('#about-wrapper').delay(200).show().fadeTo(170, 1.0);

   }); 
}

function about_close() {
   $('#about-overlay').hide();
   $('#about-wrapper').hide().fadeTo(0, 0);
   $('#transparent-overlay').fadeTo(200, 0, function() {
      $(this).hide();
   });

例如：

function about_click() {
   $('#about').click( function() {
      $('#about-overlay').show();
      $('#about-overlay').css('z-index',250); //Line Changed
      $('#transparent-overlay').show().fadeTo(200, 0.5);
      $('#about-wrapper').delay(200).show().fadeTo(170, 1.0);

   }); 
}

function about_close() {
   $('#about-overlay').hide();
   $('#about-overlay').css('z-index',0); // Line Changed
   $('#about-wrapper').hide().fadeTo(0, 0);
   $('#transparent-overlay').fadeTo(200, 0, function() {
      $(this).hide();
   });

---

我的语法可能不正确-但我希望这至少可以为您指明正确的方向。

谢谢大家的提示-最后我外包了这项工作，但所有这些都是为了将来的参考。

您是否在寻找代码更改的指针，或者是帮助你调试代码的工具？META标签会强制文档进入目标模式；这会产生副作用并影响重用。FWIW，IE从版本8开始就包含调试工具（hit F12）；v7工具栏不再加载。这意味着什么“妨碍重用”？也许这超出了评论的范围。。。你能给我指一下你提到的副作用吗？我非常想知道，因为我已经使用meta标签一段时间了。谢谢。他正在构建一个JQuery模块，将在许多不同类型的站点中使用。如果他的模块强制文档模式为他选择的模式，那么他只能在以他选择的模式工作的页面上使用他的模块。