IE CSS Bug - 当页面上的动态 javascript 内容更改时如何保持位置:绝对

2023-12-01

我有一个页面,其中有一个列和一个内容 div,有点像这样:

<div id="container">
    <div id="content">blahblahblah</div>
    <div id="column"> </div>
</div>

通过一些样式,我有一个图像在列和内容之间分开,但需要保持相同的垂直位置,以便它对齐。

样式类似于这样:

#column 
{
    width:150px;
    height:450px;
    left:-150px;
    bottom:-140px;
    background:url(../images/image.png) no-repeat;
    position:absolute;
    z-index:1;
}

#container 
{
   background:transparent url(../images/container.png) no-repeat scroll left bottom;
   position:relative;
   width:100px;
}

当内容位于#content在渲染之前动态加载。这在 Firefox 中也始终有效。但是,在 IE6 和 IE7 中,如果我使用 javascript 更改内容(以及高度)#content,图像不再排列(#column不动)。如果我使用 IE Developer Bar 来更新 div(例如手动添加位置:绝对),图像会向下跳并再次对齐。

我在这里缺少什么吗?

@Ricky - 嗯,这意味着在这种情况下我认为没有解决方案。最好的情况是,之后会有锯齿状的对决,但随着我的内容扩展和收缩等,隐藏/显示并不实用。仍然感谢您以最佳解决方案回答。


这是渲染引擎中的一个错误。我总是遇到它。解决此问题的一种可能方法是每当更改内容时隐藏和显示 div(进而更改高度):

var divCol = document.getElementById('column');
divCol.style.display = 'none';
divCol.style.display = 'block';

希望这种情况发生得足够快以至于不会被注意到:)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

IE CSS Bug - 当页面上的动态 javascript 内容更改时如何保持位置:绝对 的相关文章

  • 文本后面有粗下划线

    如何使用 span 和 css 在文本 ABC 后面重现这种下划线 我已经能够做下划线below嵌套的文本span和彩色的border bottom 但无法获取behind图像和above文本基线 p style font size 48p
  • 使用滤镜将css3灰色图像转为蓝色?

    我正在尝试将灰色图像变为更蓝色的色调 真的不知道如何为此设置滤镜或是否可能 该图像只有一种颜色 cacaca 其余部分透明 我正在尝试使用相同的图像进行一些叠加 以便它仅突出显示那些彩色部分而不是透明区域 一直在尝试其中的一些 但没有取得多
  • 由于 MIME 类型不受支持,拒绝应用样式

    我不断收到一条错误消息 指出 MIME 类型 text html 不可执行或不是受支持的样式表 MIME 类型 并且启用了严格的 MIME 检查 我的链接代码是
  • html 和 body 元素的高度

    我一直在互联网上查找 min height 和 height 属性如何在 body 和 html 元素上工作 我在很多地方都看到过下面的代码 html height 100 body min height 100 上面的内容可以与其他一些
  • 如何使用 javascript 或 jquery 生成 CSS 路径?

    关于如何生成元素的 CSS 路径有什么建议吗 CSS 路径是识别特定元素所需的 css 选择器的路径 例如 如果我的 html 是 div div class bar ul li 1 li li 2 li li span class sel
  • 我可以在 CSS 类名中使用驼峰命名法吗

    我想命名一个 CSS 类并调用它imgSuper 我可以在 CSS 类中使用驼峰命名法吗 从技术上讲是可以的 但这是有风险的 因为虽然 CSS 语法大多不区分大小写 但在某些浏览器中 在某些条件下 类名被视为区分大小写 因为规范没有指定浏览
  • 使用 JavaScript 使链接保持活动状态并在单击时显示悬停效果

    I am struggling to make this work I d like to make it where if O F is clicked the hover state stays active if another li
  • 如何更改bootstrap中form-control弹出窗口中必填字段的默认消息?

  • 现在 CSS3 供应商前缀有多必要? [复制]

    这个问题在这里已经有答案了 我只是想知道现在在 CSS 中指定 webkit moz ms 或 o 等供应商前缀在多大程度上仍然有必要 如果我理解正确的话 opera 切换到了 webkit 所以会删除 o 对吗 IE 在 IE10 中不再
  • FireFox 中的“contenteditable = true”高度问题

    当有空的时候div with contenteditable true CSS contenteditable true border 1px dashed dedede padding 3px HTML div div 在 IE 和 Ch
  • 如何更改文本选择背景颜色

    我的意思是 当您选择一些 HTML 文本时 背景中会有一种颜色告诉您选择了哪个文本 怎么可能通过CSS来改变它呢 我需要它是白色的 透明的 我已经看到这样做了 您可以使用某些 CSS 选择器来更改所选文本的 CSS 属性 我对此进行了测试
  • 背景突出显示代码块中的文本?

    我的目标是能够显示如下内容 我想要背景突出显示已经有的代码块内的一段代码语法高亮 我想在 Github 上托管于 Github Pages 上的 Markdown 文件上执行此操作 可以使用 kramdown markdown html c
  • 单击时更改 CSS 属性

    我试图在单击另一个元素时更改一个元素的 CSS 我进行了很多搜索 但没有任何效果是完美的 目前我正在使用下面的代码 但它不起作用 谁能告诉我我错过了什么 div hello world div img src zoom png functi
  • 如何在 leaflet.js 中设置 layer.control 的样式?

    我正在尝试更改图层控件中的默认下拉菜单图标 我希望图标旁边有文字 有什么办法可以做到这一点吗 也许使用 JQuery 和 CSS 我正在开发一个基于此示例的传单项目 http leafletjs com examples layers co
  • CSS 安全区域属性在 iPhone X 上不起作用

    就我而言 我正在 iPhone X 上运行一个 Web 应用程序 我尝试在顶部添加一个填充 以使用 Webkit 的安全区域 css 属性将我的身体推到安全区域padding top constant safe area inset top
  • 弯曲方向等高行:列

    我有一个带有两个弹性项目的弹性布局 显示为行 flex direction column 这些物品应该有一个最小高度 但它们应该保持其中一个物品生长所需的相同高度 看这个 JSFiddle https jsfiddle net 958vxh
  • 我的 iPhone 6 获取 iPhone 5 媒体查询

    我不明白这里发生了什么事 我在 CSS 媒体查询中专门针对 iphone 5 media only screen and min device width 320px and max device width 568px some div
  • Excel 类似 HTML 表格,可在 x 轴(完整表格)和 y 轴(标题固定)上滚动

    我想建立一个具有固定宽度列的表格 在大多数情况下 表数据会水平和垂直溢出 如果列的宽度大于视图宽度 则需要水平滚动条来滚动并查看所有表列 同时滚动标题和数据 如果数据的高度大于可用视图 则会出现垂直滚动框 但在滚动时保持标题固定 以便用户关
  • iOS 5 中的 webkit-overflow-scrolling: touch "handle" 是否有外观 CSS 规则?

    我有一个元素恰好同时具有 webkit overflow scrolling touch 和 background color black 因此显示滚动位置的 手柄 很难看到 是否有 webkit CSS 样式规则可以改变该 手柄 的外观
  • CSS 旋转轮在 5 秒后停止?

    我正在使用我在小提琴上找到的 CSS 代码来旋转我的轮子 http jsfiddle net gaby 9Ryvs 7 http jsfiddle net gaby 9Ryvs 7 div margin 20px width 100px h

随机推荐

  • 在VBA中重复随机变量

    如何使用 randomize 和 rnd 来获取随机变量的重复列表 通过重复列表 我的意思是 如果您运行循环来获取 10 个随机数 则列表中的每个随机数都将是唯一的 此外 如果再次运行该序列 您将获得与之前相同的 10 个随机数 来自微软自
  • Python 自定义比较器如何工作?

    我有以下 Python 字典 2 3 4 5 3 1 0 0 0 1 4 1 10 1 2 3 现在我想根据字典值的值之和对它们进行排序 因此对于第一个键 值之和为 3 4 5 12 我编写了以下代码来完成这项工作 def myCompar
  • Qt:制作不同颜色的堆叠条形图[关闭]

    Closed 这个问题不符合堆栈溢出指南 目前不接受答案 我正在尝试在 Qt 中制作一个时间线 其中不同的颜色代表不同的任务 最终 它应该看起来有点像这样 但只有一行 现在有人知道如何在不安装额外库的情况下仅使用 QPaint 来做到这一点
  • Matplotlib:使用 twinx 叠加时箱线图和条形图会发生变化

    当我创建条形图并使用 twin x 覆盖条形图时 与条形相比 框看起来向右移动了一位 这个问题之前已经被识别过 Python pandas 绘制如果孪生两个 y 轴则移动 x 轴 但该解决方案似乎不再有效 我使用的是Matplotlib 3
  • ““void (exeCallback::*)(int)”类型的值不能分配给“void (*)(int)”类型的实体”[重复]

    这个问题在这里已经有答案了 可能的重复 禁用 错误的函数转换 警告 我试图让我的大脑围绕 C 函数指针 为了保持我的学习经验基础 我创建了一个测试函数指针示例 最终 我想通过引用传递所有就绪的实例化对象 以便我可以回调该对象的方法 然而 为
  • 使用 AWK/Grep/Bash 从 HTML 中提取数据

    我正在尝试编写一个 Bash 脚本来从 HTML 页面中提取结果 我用Curl实现了获取页面内容 但下一步是解析输出 这是有问题的 该页面有趣的内容如下所示 div class result div class item div class
  • 如何修复使用 zxing 2.1 生成的不清晰的二维码图像?

    我使用zxing 2 1库生成了二维码图像 但图像非常模糊且不清晰 我可能哪里出错了 生成发生在较低级别 然后根据宽度和高度请求进行缩放 您可以请求生成更高的宽度和高度 ZXing 在查看器中公开了您可以设置的 BarcodeOptions
  • MySQL 按两个值排序

    简而言之 我有一个游戏 它的计分板显示了玩家最后的分数 他们花了多长时间才达到这个分数 我需要对 MySQL 结果进行排序 以便最快时间的最高分数排在第一位 最慢时间的最低分数排在最后 并且两者之间的所有内容都以相同的方式排名 但我不知道该
  • collectingAndThen方法足够高效吗?

    我最近开始使用collectingAndThen 发现与我用来执行类似任务的其他编码程序相比 它花费的时间有点长 这是我的代码 System out println CollectingAndThen Long t System curre
  • 分割逗号分隔的字符串,但忽略逗号后跟空格

    公共静态无效主 字符串 args String title Today and tomorrow 2 1 2 5 0 String titleSep title split System out println Arrays toStrin
  • 用户控件的数据上下文

    我正在创建一个UserControl我想用这样的东西
  • 如何防止在 boost::fast_pool_allocator 管理的对象上调用析构函数?

    我想利用以下广告功能boost fast pool allocator see Boost Pool 的 Boost 文档 例如 您可能会遇到这样的情况 您想要分配一个 一堆小物体在一个点上 然后到达你的一个点 不再需要它们的程序 使用池接
  • 了解 TensorBoard(权重)直方图

    在 TensorBoard 中查看和理解标量值非常简单 然而 目前尚不清楚如何理解直方图 例如 它们是我的网络权重的直方图 After fixing a bug thanks to sunside What is the best way
  • watch 命令不适用于使用管道的命令[关闭]

    Closed 这个问题是无法重现或由拼写错误引起 目前不接受答案 非常简单 快速的问题 为什么这个命令不起作用 watch ls log wc l or watch d ls log wc l 我正在尝试watch当前目录中文件总数的更新
  • 未能在 build.sbt 中包含 com.typesafe(对于 Scala 和 Heroku 上的 Spray)

    尝试引导我的 Scala 样板SprayHeroku 上的项目 我正在尝试按照以下方式向我的本地项目添加必要的调整Heroku 文档 喷雾样板项目源自github上的优秀模板它简单有效 并且包含优雅的代码和测试 在最后提到的模板项目运行良好
  • NVIDIA Parallel Nsight 与 Visual Profiler

    我正在Windows平台上使用CUDA 在 Windows 平台上 我们可以访问 Parallel Nsight 和 Visual Profiler 两者都非常好 但它们在分析和跟踪方面具有几乎相似的功能 有人能告诉我它们有什么不同吗 哪一
  • 强制标签文本从左到右,同时包含一些从右到左的文本

    我有一根绳子 代表货币符号 我从中得到NSLocale localeIdentifier ar AE objectForKey NSLocaleCurrencySymbol as String In my UILabel 当我将文本设置为t
  • SQL Server 模板 - 如何转义小于字符?

    我喜欢使用 SQL Server 2005 模板来运行常用查询 您可以使用以下语法在模板中包含参数
  • 是否可以使用 ColdFusion 重写 url?

    我需要生成用户友好的 url 我在 IIS 上 我的动态 URL 看起来像 www testsite com blog article cfm articleid 4432 客户希望网址看起来像 www testsite com blog
  • IE CSS Bug - 当页面上的动态 javascript 内容更改时如何保持位置:绝对

    我有一个页面 其中有一个列和一个内容 div 有点像这样 div div blahblahblah div div div div 通过一些样式 我有一个图像在列和内容之间分开 但需要保持相同的垂直位置 以便它对齐 样式类似于这样 colu