IE8 中的 Colorbox 出现摇晃答案

【问题标题】：Colorbox in IE8 throwing a wobblyIE8 中的 Colorbox 出现摇晃
【发布时间】：2010-05-10 11:36:57
【问题描述】：

这个问题出现在 Firefox 和 Chrome，但 Safari 没问题。然而，IE8，无论是否处于兼容模式，都不会在顶部加载叠加层（它只是位于顶部，向下滚动内容 - 尽管我猜这是因为叠加层位于标记的顶部）。

它也不会显示我试图显示的图像，而是将覆盖加载图像缩小到屏幕左上角的任何内容。我正在使用标准的 colorbox-min 和与之配套的 CSS。

在 IE8 开发工具中检查标记似乎暗示内容实际上并未加载到 cboxLoadedContent div 中。

$(document).ready(function() {
    $('a[rel="preview"]').colorbox(
        { 
            photo: true
            , maxWidth: '95%'
            , maxHeight: '95%'
            , photoScaling: true 
        }
    ); 
});

基本上，该页面是一个媒体图像列表，当您单击一个时，它会为您提供预览并允许您滚动页面上的图像好吧，至少它在 FF 中做了一个小截图，因为它正在缩小覆盖层 http://dumpt.com/img/viewer.php?file=7s2zwoxozzf7666h0fzc.png

有人有什么想法吗？

我希望我的解释不是很好，所以如果需要的话，也许我可以把它拍成电影或其他东西。

【问题讨论】：

+1 出于同样的原因。谢谢你
您的页面是否有任何验证错误？这可能会在某些浏览器中关闭颜色框。如果您通过validator.w3.org 丢弃 HTML，任何明显的东西都会被标记？
标题的另一个 +1，Hillarious！
您有我们可以查看的示例吗？我总是发现访问显示错误的页面对 JavaScript 错误很有帮助。

标签： javascript jquery internet-explorer-8 colorbox

【解决方案1】：

您的代码是否包含在就绪函数中？我已经看到在 IE 中运行在 FF/Safari 中的代码失败的实例，因为 IE 似乎加载 DOM 的速度更慢。在这些情况下，几乎总是证明我未能将代码包装在一个就绪函数中。

$(function() { // the important bit
    $('.colorbox').load('...').colorbox();
});

【讨论】：

嗨，感谢您的回复...不，遗憾的是它已经准备好了 $(document).ready(function() { $('a[rel="preview"]').colorbox( {照片：真实，最大宽度：'95％'，最大高度：'95％'，照片缩放：真实}）；}）；基本上该页面是媒体图像列表..当您单击一个时，它会为您提供预览并允许您滚动浏览页面上的图像..它在FF中确实做了一个小截图，因为它正在缩小覆盖层@ 987654321@ 所以它越来越小到没有，那就是它所做的一切
@nat - 也许它没有等待图像加载并在 IE 中错误地计算大小？尝试一些简单的事情，比如将设置延迟一分钟（让图像有机会加载）。 $('a...').delay(60000)... 或 setTimeout( function() { $('a...') }, 600000 );` 如果可行，那么您可能需要调整代码以检测图像何时加载或使用容器一些最小尺寸。
好的，我现在已经替换了颜色框 js 和 css，这实际上可能是一个 css 问题，虽然我不明白为什么使用完全标准位.. 使用新标准 css 图像确实加载，但是覆盖消失了，其他一些看起来不太正确，我讨厌 IE 是绝对垃圾，非常感谢您的帮助和建议

【解决方案2】：

试试 XHTML 严格的文档类型...？

【讨论】：

即使是过渡版也为我解决了一个非常相似的问题，谢谢。

【解决方案3】：

我遇到了完全相同的症状 - 但就我而言，它扩展到所有浏览器。

一个原因是我没有包含用于使用颜色框的页面的 CSS 文件。

另一个原因是我更新到最新版本的 jQuery，但没有升级颜色框。（另外，如果您更新您的 jquery 包含，请确保您也更新您的 jquery vs doc - 如果您正在使用它）。

希望对您有所帮助。

【讨论】：

【解决方案4】：

在您的颜色框文件中搜索：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader

会有几个它的实例，每个都指向一个 png。确保该 png 的路径正确，然后再次测试。

我很确定我曾经遇到过这个确切的问题，我需要做的就是修复路径。不过，时间久了，记忆有些模糊。

【讨论】：

【解决方案5】：

我遇到了同样的问题。由于 IE 不喜欢将 CSS 最大宽度设置为 100%，我也遇到了图像只有 10 像素宽的问题。为了缓解这个问题，我将以下内容添加到我的 CSS 中。

.cboxIE img
   {
        max-width:none;
         _max-width:none;
   }

【讨论】：