解决tr标签设置背景颜色时在手机端浏览器上出现多余线条问题
今天在手机端使用table时发现一个问题，就是给某一行设置背景颜色时，td之间出现了细细的竖线。本来以为是相关属性（如cellspacing等）没有设置，但检查后发现该设置的都设置了，并且该table在网页端显示正常。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>移动端table设置tr背景出现多余的线条</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border-spacing:none;
border-collapse:collapse;
background-color: black;
}
tr {
height: 200px;
line-height: 200px;
font-size: 0;
}
td {
font-size: 100px;
}
.selected {
background-color: blue;
}
</style>
</head>
<body>
<table border=0 cellspacing=0 cellpadding=0>
<tr width='500px' id="tr1" class="selected">
<td width='100px' id="td1">1</td>
<td width='200px' id="td2">test</td>
<td width='100px' id="td3">...</td>
<td width='100px' id="td4">...</td>
</tr>
<tr class="selected">
<td>2</td>
<td>test</td>
<td>...</td>
<td>...</td>
</tr>
</table>
</body>
<script>
var tr1 = document.getElementById('tr1').clientWidth;
console.log('#tr1: ' + tr1);
var td1 = document.getElementById('td1').clientWidth;
console.log('#td1: ' + td1);
var td2 = document.getElementById('td2').clientWidth;
console.log('#td2: ' + td2);
var td3 = document.getElementById('td3').clientWidth;
console.log('#td3: ' + td3);
var td4 = document.getElementById('td4').clientWidth;
console.log('#td4: ' + td4);
</script>
</html>
网页端显示正常（Chrome：55）：
手机端显示多出了些分隔线（米4C，UC，v11）
当将table的背景颜色设为白色时，线的颜色也会跟着变化，如下如所示：
加入以下代码，取一行的所有td宽度与tr宽度进行比较，结果4个td的宽度之和等于tr的宽度，没有发现什么异常。
js代码：
<script>
var tr1 = document.getElementById('tr1').clientWidth;
console.log('#tr1: ' + tr1);
var td1 = document.getElementById('td1').clientWidth;
console.log('#td1: ' + td1);
var td2 = document.getElementById('td2').clientWidth;
console.log('#td2: ' + td2);
var td3 = document.getElementById('td3').clientWidth;
console.log('#td3: ' + td3);
var td4 = document.getElementById('td4').clientWidth;
console.log('#td4: ' + td4);
</script>
js显示结果：
在进行诸多尝试之后仍不得其所。最终只能从表象进行猜测，线的颜色随着table背景颜色的变化而变化，那可能在渲染table内的元素时出现了问题，导致背景颜色透漏出来了。最后从td上作文章，勉强遮住这些线条能用。
css中加入：
.selected td {
background-color: blue;
/* border-left: 1px solid blue;
border-right: 1px solid blue;*/
}
效果：
将tr下的td背景也设成这个颜色之后，线条消失，也可能是淡化到可以接受范围内。线是没有了，但是问题却没有得到真正的解决，希望知道根本原因的道友不吝赐教，先谢过了！
浙公网安备 33010602011771号