Question

我在td中有一个包含expand / collapse div元素的表。在IE9中进行扩展时，一切正常，但在谷歌浏览器（版本16.0.912.75米）中，我在不同的点上获得了意想不到的稳固边界。似乎colspan = 3 tr与此有关，因为实心边框出现在上面和下面。此外，div宽度值似乎会影响这一点：选择其他值时行为会发生变化。

见下面的html。我添加了4个屏幕打印：初始视图，展开row1，展开row2，展开两者。造成这种奇怪行为的原因是什么？如何防止它？

initial row1 expanded row2 expanded both expanded

<html>
<head>
    <meta http-equiv=Content-Type content="text/html; charset=windows-1252">
    <title>Example</title>
    <style type="text/css">
        table {
            border: solid black 1pt;
            border-collapse: collapse;
            padding: 0;
            border-spacing: 0;
        }

        th {
            background: rgb(255, 255, 153);
            border-style: solid;
            border-color: black;
            border-width: 1pt;
            padding: 0cm 5pt;
            color: black;
            font-family: Verdana;
                font-size: 10pt;
            font-style: normal;
            vertical-align: top;
        }
        td {
            border-style: dotted dotted none none;
            border-color: black;
            border-width: 1pt;
            padding: 0cm 5pt;
            color: black;
            font-style: normal;
            font-family: Verdana;
                font-size: 10pt;
            vertical-align: top;
            margin-bottom: 4.5pt;
            margin-top: 0pt;
        }

        div.QUAL {
            margin-left:4pt;
            font-size: 90%;
        }

        input.buttonQUAL {
            color: blue;
            background: white;
            border: none;
            margin-left:0pt;
            margin-top: 0px;
            margin-bottom: 0px;
            font-size: 100%;
        }

        div.listQUALdesc {
            color: black;
            background: white;
            font-size: 100%;
        }
    </style>
    <script type="text/javascript" language="javascript">
        //expand and collapse functions based on id
        function toggleMe(a){
            var e = document.getElementById(a);
            if(!e) return true;
            if( e.style.display == "none")
                {
                e.style.display = "block"
                }
            else    {
                e.style.display = "none"
                }
            return true;
        };

        function expandByIdStart(IdStart){
            var divs = document.getElementsByTagName('div');
            for (var i=0; i<divs.length; i++) {
                if (divs[i].id.match("^"+IdStart) == IdStart) { 
                    divs[i].style.display = "block";
                }
            }
            return true;
        }

        function collapseByIdStart(IdStart){
            var divs = document.getElementsByTagName('div');
            for (var i=0; i<divs.length; i++) {
                if (divs[i].id.match("^"+IdStart) == IdStart) { 
                    divs[i].style.display = "none";
                }
            }
            return true;
        }
    </script>
</head>
<body>
    <p/>
    <table style='table-layout:fixed word-break:break-all'>
        <col width="70"><col width="70"><col width="70">
        <thead><tr><th>Col1</th><th>Col2</th><th>Col3</th></tr></thead>
        <tbody>
            <tr>
                <td>
                    <input
                        type="button"
                        class="buttonQUAL"
                        onclick="toggleMe('row1'); return true;"
                        onMouseOver="this.style.cursor='hand'"
                        value="row1"/>
                </td>
                <td>text1
                    <div id="row1" class="listQUALdesc" style="width:100; display:none">
                        text2
                    </div>
                </td>
                <td></td>
            </tr>
            <tr>
                <td><div class="QUAL">xxx</div></td>
                <td>text3</td>
                <td></td>
            </tr>
            <tr>
                <td colspan="3">Start</td>
            </tr>
            <tr>
                <td>
                    <input
                        type="button"
                        class="buttonQUAL"
                        onclick="toggleMe('row2'); return true;"
                        onMouseOver="this.style.cursor='hand'"
                        value="row2"/>
                    <div id="row2" class="QUAL" style="display:none;width:65">
                        text5<br/>
                    </div>
                </td>
                <td>text4</td>
                <td></td>
            </tr>
            <tr>
                <td colspan="3">End</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Answer 1

参见评论 - 添加＆lt; ！doctype html＆gt;部分解决了这个问题

<强>加成

网页上存在一些问题，指出Chrome和Safari（使用webkit）中的错误如下所示：webkit-colspan-table-border-bug。

似乎将colspan和bottom-border与border-collapse结合使用：collapse会导致边框显示问题，就像在我的示例中一样。

扩展表格行div时Chrome中的奇怪边框行为

1 个答案: