程序员经验分享-hwhale

使用 colspan 设置的 Internet Explorer 8 表格单元格宽度错误

2024-04-24

我有以下 html 页面：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>A title</title>
</head>
<body>
    <table style="width: 700px; border: solid 1px green">
        <tr>
            <td style="border: solid 1px red;" colspan="2">A cell with a bunch of text.  The amount of text here increases the 'x' cell.<td>
        </tr>
        <tr>
            <td style="width: 100px; border: solid 1px purple;" >x</td>
            <td style="border: solid 1px blue;">Some sample text</td>
        </tr>
    </table>
</body>
</html>

在除 Internet Explorer (8) 之外的所有浏览器中，内容为“x”的单元格的宽度为 100 像素，并且它的相邻单元格填充表格的其余部分。在 Internet Explorer 8 中，它要大一些，并且其大小根据设置了 colspan="2" 的单元格中的文本量而变化。 IE 中的这个错误有修复吗？


好吧，这纯粹是疯狂。雷的答案适用于初始测试，但不适用于我的现实生活示例，这导致我使用雷的修复创建了第二个测试用例：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>title</title>
</head>
<body> 

<form>

    <table style="width: 700px;">
        <tr>
            <td colspan="2">Here is some really long text.  For some reason, in internet explorer 8, the long text in a table cell that spans two columns above some other cells affects the cell below it. I have no idea why.  Also, if the contents of the first cell below this one is some text rather than a checkbox, then the effect is not as dramatic, though it's still there.</td>
        </tr>
        <tr>
            <td style="width:100px; background: green;"><input type="checkbox" value="1" /></td>
            <td style="width:600px;">blah</td>
        </tr>
    </table>

    <table style="width: 700px;" border="0">
        <tr>
            <td colspan="2">Some short text</td>
        </tr>
        <tr>
            <td style="width: 100px; background: red;"><input type="checkbox" value="1" /></td>
            <td style="width: 600px;">blah</td>
        </tr>
    </table>

</form>

</body>
</html>

由于某种原因，将输入元素放在第一个表格单元格中会使 Ray 的解决方案不太有效。

最终解决我们试图修复的现实情况的解决方案需要将“table-layout:fixed”添加到表格中，并使表格中的第一行具有宽度已设置的空单元格。这是前面示例的修改版本，其中包含我刚才描述的修复：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>title</title>
</head>
<body> 

<form>

    <table style="table-layout: fixed; width: 700px;">
        <tr>
            <td style="width: 100px;"></td>
            <td style="width: 600px;"></td>
        </tr>
        <tr>
            <td colspan="2">Here is some really long text.  For some reason, in internet explorer 8, the long text in a table cell that spans two columns above some other cells affects the cell below it. I have no idea why.  Also, if the contents of the first cell below this one is some text rather than a checkbox, then the effect is not as dramatic, though it's still there.</td>
        </tr>
        <tr>
            <td style="background: green;"><input type="checkbox" value="1" /></td>
            <td>blah</td>
        </tr>
    </table>

    <table style="width: 700px; table-layout: fixed;" border="0">
        <tr>
            <td style="width: 100px;"></td>
            <td style="width: 600px;"></td>
        </tr>
        <tr>
            <td colspan="2">Some short text</td>
        </tr>
        <tr>
            <td style="background: red;"><input type="checkbox" value="1" /></td>
            <td>blah</td>
        </tr>
    </table>

</form>

</body>
</html>

真的是 Internet Explorer 吗？？？真的吗？

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

html

css

internetexplorer

使用 colspan 设置的 Internet Explorer 8 表格单元格宽度错误 的相关文章

  • 使用特定 HTTP 方法链接到页面 (DELETE)

    如何像 Rails 那样链接到页面并让浏览器使用 DELETE 方法调用它 我试过 a href DELETE ME a 但不起作用 我使用 Node js 所以我可以用它来处理 DELETE 方法 你不能 链接只会触发 GET 请求 您可

  • 如何仅在单击子级时触发父级单击事件

    子级和父级都是可点击的 子级可以是带有 jQ uery 单击事件的链接或 div 当我点击子事件时 如何只触发父事件而不触发子事件 DOM 事件阶段 活动分为三个阶段 Capture 第一阶段是 捕获 其中从事件处理程序开始调用

  • HTML：将表单字段复制到另一个表单（包括文件输入字段）？

    我发现出于安全原因 无法使用 javascript 设置表单文件输入字段值 我只想将文件输入复制到另一个表单并将其发布 我搜索了解决方法但找不到任何内容 这可能吗 更新 我的代码 function prepareUpload fileval

  • 如何让左浮动和右浮动在同一条线上？

    问题 The left part nav ul li which float left and the right part nav search which float right are not in a line it should

  • 使用 jQuery / JavaScript 将 Alpha 通道添加到背景颜色

    我有一个 jQuery 函数 它添加了一个Alpha通道到一个背景颜色当事件发生时 这是我的jsFiddle http jsfiddle net liormb SxQt8 1 CSS div background color rgb 100

  • SVG 在 Firefox 中渲染得很糟糕

    我正在制作带有滑动轮播的信息图表 li 我认为 尽管 FF 中 SVG 的错误已得到解决 但 SVG 在 Firefox 中显示为像素化 有人能看到这个问题的解决办法吗 URL http weaver wp weavertest com r

  • Html5 全屏视频

    有什么办法可以做到这一点吗 我想全屏播放视频 没有浏览器 环境width 100 height 100 保持浏览器可见 不 目前还没有办法做到这一点 我希望他们在浏览器中添加这样的未来 EDIT 现在有一个全屏API http dvcs w

  • 跨浏览器方法使子 div 适合其父级的宽度

    我正在寻找适合孩子的解决方案div进入它的父母width 我在这里看到的大多数解决方案不跨浏览器兼容 eg display table cell IE 不支持 lt 8 解决方案就是不声明width 100 默认为width auto 对于

  • 无法在 Angular 10 中的“pdf-viewer”=>“ng2-pdf-viewer”中显示 blob url

    我有一个 API 它将上传的文件作为 blob 返回 当我尝试绑定时src如果使用 blob URL 则它不会显示任何内容 但是 当我尝试绑定直接 URL 时 它可以显示 PDF 文件 这是我下面给出的代码 我的 TS 代码 downloa

  • 对（静态）CSS 文件所做的更改未反映在 Django 开发服务器中

    我正在使用 Django 制作一个 Web 应用程序 但在将 CSS 文件 存储在我的应用程序的静态目录中 中所做的更改反映到开发服务器上时遇到了一些问题 需要明确的是 服务器能够访问静态文件 但是 它目前停留在我的 CSS 文件的旧版本上

  • 框架可以用什么代替？

    假设我有一个包含 50 个网页的网站 每个页面由 A Header 导航 左侧内容 右侧内容 Footer 不使用 Frames 服务器端编程 第三方工具和软件 构架 我需要将这 5 个部分的代码 HTML 标记 分别放入这 50 个页面中

  • Sublime 2，如何自动关闭HTML标签并将光标放在标签内

    我试图弄清楚如何让 Sublime 2 创建以下行为 Type strong Sublime 然后会立即打印 strong strong 然后你的光标将被放置在标签内 我觉得它在不超过几个月前自动执行了此操作 或者也许我只是产生幻觉 或者正

  • 始终滚动 div 元素而不是页面本身

    我有一个带有内部的页面布局 div 包含页面上重要内容的元素 设计的重要部分是 content height 300px width 500px overflow scroll 现在 当包含的文本大于 300px 时 我需要能够滚动它 是否

  • 动态添加jinja模板

    我有一个 jinja 模板 它是一组 div 标签内的唯一内容 div include temppage html div 当我按下按钮时 我想用其他内容替换标签之间的所有内容 我希望用另一个 jinja 模板 include realpa

  • CSS3输入元素的圆角，没有js/图像

    谁可以为输入元素制作圆角 我需要一种不使用 javascript 和图像的方法 Added

  • 带圆角边框的 Div

    我不明白获得 div 的更大圆角底部边框的公式 以及是否有更简单的方法在 Bootstrap 中实现它 现在是这样的 以及我想如何开发它 header background color blue height 40px width 90px

  • 如何编辑 QProgressBar 的样式表

    我无法在我的应用程序中编辑进度条的颜色 仅编辑文本颜色 pyhton 3 9 PySide6 QT Creator 7 0 2 Python应用程序 https i stack imgur com 6hKFI png import sys

  • 为什么对于大于 65776 像素的画布源，drawImage 性能差异很大

    我在 jsperf 上写了一些与以下相关的测试用例 1 在屏幕外画布上绘图 2 将图像绘制到屏幕画布上 我发现如果源画布中的像素数 无论 dst 小于 65776 像素 性能会高得多 我预计这个性能限制是 65536 像素 如果有的话 He

  • 音频html标签无法快进或快退控制

    我正在使用音频 html 标签从我的上传服务器加载音频 但我不知道为什么我的音频无法像往常一样循环 快进或快退控制 我的音频 标题 Accenpt Ranges bytes Connection Keep Alive Content Len

  • 可以在 IE 中的表格行上添加渐变吗？

    当我将鼠标悬停在表格特定部分的表格行上时 我希望背景更改为线性渐变 CSS 很简单 tbody row links tr hover background typical multi browser linear gradient code

随机推荐

  • 如何使用 CPANPLUS 自动捆绑包更新新版本的 Perl？

    我有 Perl 5 13 4 其中包含大量已安装的 CPAN 模块 我刚刚编译了 Perl 5 14 0 我想将 5 13 4 中的所有模块安装 重新编译 到 5 14 0 中 我可以 已经使用 cpanp 和 b 选项生成了已安装模块的捆

  • 在 R 中将矩阵组合成数组

    如果我创建了多个矩阵 如何将它们组合成一个数组 我有 8 个矩阵 每个矩阵有 200 行和 200 列 我需要将它们组合成一个 dim 200 200 8 的数组 所以我希望每个矩阵都是数组的一部分 您可以使用abind函数从abind包裹

  • 强制构建全局对象

    代码如下 struct S S debugbreak static const S g s 显然 我希望一些代码在启动时运行 这仅适用于某些具有外部代码引用的符号的源文件 对于静态库中没有任何从外部引用的符号的源文件 看起来编译器或链接器会

  • 如何声明带有值的 ArrayList？ [复制]

    这个问题在这里已经有答案了 Java 中的 ArrayList 或 List 声明 https stackoverflow com questions 12321177 arraylist declaration java已提问并回答了如何

  • 是否可以在由同一父进程创建的两个子进程之间建立管道（LINUX，POSIX）

    我有多个孩子由同一个父母 分叉 我尝试构建pipe所有这些子进程之间的连接就像一个链表结构 孩子 1 向孩子 2 发送数据 孩子 2 向孩子 3 孩子 N 向孩子 1 发送数据 有没有正确的方法可以做到这一点 此外 如果我在进程之间创建和通

  • 为什么 JavaScript 的 parseInt 的基数默认为 8？

    在 JavaScript 的 parseInt 函数中将基数默认为 8 如果字符串以 0 开头 让我很烦恼 只是因为我仍然忘记将可选的第二个参数传递为 10 我正在寻找一个答案 告诉我为什么这样做有意义将其默认为 8 如果输入字符串以 0

  • 为什么预分配对列表有用？

    我知道预分配向量或矩阵很有用 因为它们始终存储在连续的内存块中 然而 就列表而言 它可以包含不同长度和模式的元素 所以我的第一个猜测是列表可能只包含指向其元素真实地址的指针 我对么 这里有一个相关问题列表的内部实现是怎样的 https st

  • Python 中的连续“is”运算符[重复]

    这个问题在这里已经有答案了 有人能为我解释一下吗 gt gt gt None is None is None True gt gt gt None is None is None False is 运算符不是接受 2 个操作数 从左侧比较对

  • 正则表达式在所有文件的函数调用中查找/替换参数模式

    我有一个很大的代码库 我们需要在特定函数的参数中进行模式更改 即函数的所有参数foo 从格式重命名something anotherThing将被重命名为something anotherThing 参数可以是任何内容 但始终采用 str1

  • 如何调试视频解码损坏？

    我刚刚开始为一家新公司工作 我的新角色要求我帮助调试他们通过解码帧接收到的视频损坏 尽管我打算深入研究代码并研究问题的具体细节 但它让我开始思考视频调试的总体情况 由于处理视频对我来说非常陌生 整个过程看起来相当复杂 而且似乎有很多地方可以

  • for 循环如何借用迭代器？

    一个人怎样才能拥有一个for in循环借用它正在操作的迭代器 例如 let x vec 1 2 3 4 let i x iter for a1 in i break iterate over just one i for a2 in i b

  • 如何替换 PathBuf 或 Path 的文件扩展名？

    我当前的解决方案是 let temp format png path file stem unwrap to string lossy path pop path push temp 这相当难看 需要至少 6 次函数调用并创建一个新字符串

  • AttributeError：“模块”对象没有属性“模型”

    谁能帮我解决这个问题 from django db import models Create your models here class Poll models model question models CharField max le

  • 同步框架服务器到服务器同步

    I have kind of a such scenario source microsoft com http i msdn microsoft com bb887608 Figure3 en us png Here i need to

  • 如何在 Python 3.8+ 和 Python 2.7 中使用 collections.abc

    在Python 3 3 抽象基类 中collections like MutableMapping or MutableSequence 被移至二级模块collections abc 所以在 Python 3 3 中 真实类型是collec

  • TypeScript：在对象上强制使用单个动态键

    有没有办法为具有以下属性的对象编写接口single动态命名的键 我能够编写一个接受任意数量的动态命名键的接口 但我想将其限制为只有一个 让我们从一些基础知识开始 然后逐步解决我的问题 在下面的接口中 对象只能有一个键 并且它被命名为 id

  • 使用 Windbg 进行关键部分挂起分析

    最近 当我的应用程序一段时间没有响应时 我通过 procdump 生成了一个转储文件 当我在转储文件上运行 locks 时 我得到一个单独的条目 如下所示 0 000 gt locks CritSec 123456 at 00123456

  • 如何为 GHCi 设置程序的命令行参数？

    假设某个 Haskell 文件被执行 runghc Queens hs gecode compile 现在 这失败了 我想用它来调试它ghci 我如何传递选项gecode compile进入程序 所以getArgs会正确读取吗 Thanks

  • 如何在 ruby​​ 中将分数转换为浮点数

    我有一根绳子 1 16 我想将其转换为浮点数并乘以45 但是 我没有得到想要的结果 我正在尝试script console gt gt 1 16 to f gt 1 0 gt gt 1 16 to f 45 gt 45 0 我怎样才能得到想

  • 使用 colspan 设置的 Internet Explorer 8 表格单元格宽度错误

    我有以下 html 页面 table style width 700px border solid 1px green table

热门标签