Javascript 在IE8中，在页面上的任何翻滚动作…在任何元素上，图像都会跳到正确的位置_Javascript_Css_Html Table_Internet Explorer 8

Javascript 在IE8中，在页面上的任何翻滚动作…在任何元素上，图像都会跳到正确的位置

javascript css internet-explorer-8

Javascript 在IE8中，在页面上的任何翻滚动作…在任何元素上，图像都会跳到正确的位置,javascript,css,html-table,internet-explorer-8,Javascript,Css,Html Table,Internet Explorer 8,我不得不快速地拼凑出一个页面，然后用Photoshop将图像切分。 Photoshop然后将其导出为HTML，使用复杂的表结构和间隔gif创建页面我需要在一些表格单元格中填写一些自定义内容。在表格的一部分，我使用的是FlickrEdge(http://www.flickrbadge.com/)使用一些flickr缩略图填充单元格。我无法控制何时加载在另一个单元格中，我有一个大标题图形（），在它下面的一个单元格中，我有HTML文本该页面在PC上的IE8中不起作用（未使用IE7进行测试）所

我不得不快速地拼凑出一个页面，然后用Photoshop将图像切分。 Photoshop然后将其导出为HTML，使用复杂的表结构和间隔gif创建页面

我需要在一些表格单元格中填写一些自定义内容。在表格的一部分，我使用的是FlickrEdge(http://www.flickrbadge.com/)使用一些flickr缩略图填充单元格。我无法控制何时加载

在另一个单元格中，我有一个大标题图形（

），在它下面的一个单元格中，我有HTML文本

该页面在PC上的IE8中不起作用（未使用IE7进行测试）所发生的情况是，当页面加载时，标题图形和下面的HTML文本显示在彼此的顶部。但是，在我滚动其中一个图像滚动后，标题图形将捕捉到正确的位置

我怀疑加载flickr缩略图是罪魁祸首，所以我对脚本进行了注释，标题图形显示在应该显示的位置

在CSS中我可以做些什么来帮助实现这一点，比如向上推标题图形，或者用占位符图像填充flickr单元格

更新

我可以延迟flickr脚本的执行吗？这是表格单元格中的内容

<script type="text/javascript" src="http://www.flickr.com/badge_code.gne?count=16&display=latest&size=square&nsid=12345678@N02&raw=1"></script>

您可以尝试通过以下方式延迟：

function initFlickr() {

  setTimeout(function() {

    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://www.flickr.com/badge_code.gne?count=16&display=latest&size=square&nsid=12345678@N02&raw=1';

    // set an id on the table cell so you can get hold of it here.
    var el = document.getElementById('id-of-that-table-cell');
    el.appendChild(script);

  }, 100); // 100 milliseconds.

}

然后可能想从onload触发它

<body onload="initFlickr()">

不确定这是否可行，但它应该在第一次成功抽签后插入脚本。

是的，这就是IE的时髦。您可以连接到映像的onload事件，并从中更改容器的大小。

是的，看起来flickr读取元素的当前位置您可以通过以下方式延迟加载此脚本：

   <script>
     function loadFlickr(){
       var headelement = document.getElementsByTagName('head')[0];
       var scriptvar = document.createElement('script');
       scriptvar.type = 'text/javascript';
       scriptvar.src= 'http://www.flickr.com/badge_code.gne?count=16&display=latest&size=square&nsid=12345678@N02&raw=1';
       headelement.appendChild(scriptvar);
    }
    window.onload = loadFlickr;
  </script>


函数loadFlickr（）{
var headelement=document.getElementsByTagName（'head'）[0]；
var scriptvar=document.createElement（'script'）；
scriptvar.type='text/javascript'；
scriptvar.src=http://www.flickr.com/badge_code.gne?count=16&display=latest&size=square&nsid=12345678@N02&raw=1'；
headelement.appendChild（scriptvar）；
}
window.onload=loadFlickr；

然而，正如另一张海报所提到的，您可能希望将其填充到特定的单元格中。因为flickr正在使用document.write，所以这实际上不可能延迟—document.write只在加载之前、构建填充HTML之前工作。（更新：您可以在flickr加载之前重写document.write方法本身，并更改document.write仅用于flickr的工作方式-我认为这是一个丑陋的黑客行为，因为它依赖于知道flickr将输出什么样的内容，请参阅本文底部）

对于您来说，最简单的解决方案是为flickr badge创建一个全新的页面，并使用iframe将其嵌入到您的表格单元格中。我实际上使用了以下技巧：

就在结束正文标记之前

<script type="text/javascript">
/* 
* A hack to reload the title graphic so that it will position itself correctly...
*/
document.images["title_graphic"].src = "images/content_title.jpg";
</script>


/* 
*重新加载标题图形以使其正确定位的黑客。。。
*/
document.images[“title\u graphic”].src=“images/content\u title.jpg”；

这似乎起到了作用

我想我应该手动编码页面，这样我就可以控制了。我想部分原因是桌子也很古怪。

我曾经遇到过这种情况。问题最终出现在html表中。我最后在td标签中使用了valign=“top”，如下所示：

 <td width="10%" valign="top">

这听起来很管用……我可以再做一次黑客攻击……我会记住这一次。加油，马丁！