您的位置：首页 > 其它

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

2016-10-28 15:56 120 查看

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

修改后运行如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： dashed firefox 异常

相关文章推荐

新的分享

章节导航