个人中心
gpt4 book ai didi

html - IE6 中的任意列大小和缺失边框

转载 作者：行者123 更新时间：2023-11-28 13:50:12 25 4
gpt4 key购买 nike

我使用以下标记创建了嵌套表格，其中第一个表格包含典型行的示例:

<table class="outer">
    <tr>
        <td>
            <table class="column" id="left_column">
                <tr>
                    <td>
                        <table class="cell" id="t1">
                            <tr>
                                <td>
                                    <asp:Literal runat="server" ID="t1r2c0" />
                                </td>
                                <td>
                                    <asp:Literal runat="server" ID="t1r2c1" />
                                </td>
                                <td class="image">
                                    <span id="s1" runat="server">
                                        <asp:PlaceHolder ID="p1" runat="server">
                                        </asp:PlaceHolder>
                                    </span>
                                </td>
                                <td>
                                    <asp:Literal runat="server" ID="t1r2c3" />
                                </td>
                                <td class="gray">
                                    <asp:Literal runat="server" ID="t1r2c4" />
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table class="cell" id="t2">
                            <!-- ... -->
                        </table>
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table class="column" id="rightColumn">
                <!-- ... -->
            </table>
        </td>
    </tr>
</table>

这是相关的 CSS:

#rightColumn table, #leftColumn table {
    width: 100%;
}
.cell {
    border-collapse: collapse;
    border: 2px solid black;
    margin: 5px;
}
.cell td {
    border-collapse: collapse;
    border: 2px solid black;
    text-align: center;
    vertical-align: middle;
}
.image {
    padding: 0;
    margin: 0;
    width: 75px;
}

在 Firefox 中，它呈现如下:

enter image description here

但在 IE6 中它呈现如下:

enter image description here

IE 中有两处错误:

  1. 每张表格都没有右边框。
  2. 尽管这些单元格属于“图像”类并且应具有 75 像素的固定宽度，但右侧列中的第二个和第三个表格的最后一列具有任意大小。

非常感谢任何建议。

编辑:#rightColumn 表，#leftColumn 表 { 宽度:100%；背景:红色

enter image description here

最佳答案

检查 IE 是否以怪异模式呈现您的页面。 Quirks 模式通常会特别影响元素宽度，因此我认为这是导致问题的一个非常有力的候选者。

您应该确保页面处于标准模式以便正确呈现。

这很容易通过确保页面在页面顶部有一个有效的文档类型来实现。

如果您没有文档类型，您可以添加任何有效的文档类型以使其在标准模式下工作，但如果您不确定使用哪一个，只需使用以下内容:

<!DOCTYPE html>

希望对您有所帮助。

关于html - IE6 中的任意列大小和缺失边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11460781/

25 4 0
文章推荐： javascript - 禁用 Javascript 时显示占位符 HTML
文章推荐： ios - 存储空间已满时将应用程序数据保存到用户的 iCloud(CloudKit)？
文章推荐： javascript - addEventListener ("beforeload") 缺少事件
文章推荐： javascript - setTimeout() 语法？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com