tr虚线border在火狐浏览器加载异常问题

来源：互联网发布：中国环保产业数据编辑：程序博客网时间：2024/06/03 16:00

编写一个demo，动态添加一行tr，tr包含一个下划虚线border-bottom: 1px dashed #000;
为了让tr的border属性生效，我们在table中加入

> border-collapse:collapse;

初始代码块

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>            table {                border-collapse:collapse;            }            table tr {                height: 50px;                border-bottom: 1px dashed #000;            }        </style>    </head>    <body>        <button>addOneLine</button>        <table width="100%">            <tr>                <td>序号</td>                <td>姓名</td>            </tr>        </table>    </body>    <script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>    <script>        var i = 0;        $('button').click(function(){            var a = '<tr>'+                        '<td>'+(i++)+'</td>'+                        '<td>小白'+ i +'号</td>'+                    '</tr>';            $('table').append(a);        });    </script></html>

但在火狐浏览器中出现加载异常问题，虚线无法正常显示，如下图（做demo没做样式美化，勉强看看就好）

这里写图片描述

解决方案：

将border-bottom:1px dashed #000; 加在td中，去年table的border-collapse:collapse; 属性

修改后代码

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>            table tr {                height: 50px;            }            table tr td {                border-bottom: 1px dashed #000;            }        </style>    </head>    <body>        <button>addOneLine</button>        <table width="100%">            <tr>                <td>序号</td>                <td>姓名</td>            </tr>        </table>    </body>    <script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>    <script>        var i = 0;        $('button').click(function(){            var a = '<tr>'+                        '<td>'+(i++)+'</td>'+                        '<td>小白'+ i +'号</td>'+                    '</tr>';            $('table').append(a);        });    </script></html>

修改后运行如下：

这里写图片描述

0 0