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

最新推荐文章于 2022-02-25 08:40:09 发布

不晓笙

最新推荐文章于 2022-02-25 08:40:09 发布

阅读量528

点赞数

分类专栏： css bug 文章标签： dashed firefox 异常

本文链接：https://blog.csdn.net/qq_21761793/article/details/52957048

版权

bug 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

编写一个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

收藏

觉得还不错? 一键收藏
0
评论
tr虚线border在火狐浏览器加载异常问题

tr虚线border在火狐浏览器加载异常问题编写一个demo，动态添加一行tr，tr包含一个下划虚线border-bottom: 1px dashed #000; 为了让tr的border属性生效，我们在table中加入> border-collapse:collapse;初始代码块<!DOCTYPE html><html> <head> <meta charset="
复制链接

扫一扫