Question

Android Chrome浏览器上的边框渲染存在问题。您可以在单元格之间看到黄色的细线边界。但CSS中的边界设置为零。

此渲染问题仅适用于Android Chrome浏览器，桌面Chrome渲染无边框。

Android Chrome浏览器Nexus 7（2012），Android 5.0，Chrome 39.0.2171.59的外观如何

enter image description here

可以通过某些css或js解决方法解决这个问题吗？

<style>
.bg {
    background-color: #FFD906;
    padding: 10px;
}
.demo {
        width:100%;
        border:0px solid;
        border-collapse:collapse;
        padding:5px;
    }
    .demo td {
        border:0px solid;
        text-align:center;
        padding:5px;
        background:#000;
        color: #FFF;
    }
</style>

    <div class="bg">
<table class="demo">
    <tbody>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
    </tr>
    </tbody>
</table>
</div>

Answer 1

我也有同样的问题。你是对的，看起来问题出现在Android Chrome浏览器的渲染引擎中。

Chrome浏览器只是忽略它：

border: 0px;

为了解决这个问题，你必须定义一个与table-cell背景颜色相同的1px边框。在我的例子中，我申请了：

border: 1px solid #fff; /* Google Chrome Mobile Fix */

如前所述，表格单元格的背景也是#fff。

我希望这有帮助！克里斯

Answer 2

尝试并删除边框中的实体。

.demo td {
     border:0px;
     text-align:center;
     padding:5px;
     background:#000;
     color: #FFF;
}

如果它真的不起作用。

.demo td {
    border:1px solid #000;
    text-align:center;
    padding:5px;
    background:#000;
    color: #FFF;
}

Answer 3

完成@Chris的答案

在上面的照片中，我们有一个 TR标签，我们有5个 TD标签

1）没有数据

2）包含（是）

3）无数据

4）包含（否）

5）无数据

在大多数Android网络浏览器中，您会看到这个可怕的结果

它不只是在Android Chrome中！

在我看来，70％的移动浏览器显示了这个结果

如何解决？

这很容易

错误方式：

border-top:4px solid #1B4B8D;

正确的方式：

border-top:4px solid #1B4B8D;
border-left:1px solid #1B4B8D;
border-right:1px solid #1B4B8D;
border-bottom:1px solid #1B4B8D;

简答：

如果您将 border-x 属性设置为 TD

您也必须使用其他所有 border-x 属性，即使是1px也是如此。

所有......所有这些都在一起。不只是其中一个...

（测试）打开Chrome＆gt;使用wampserver或IIS打开您的网站＆gt;右键单击＆gt;点击Inspect＆gt;点击移动图标＆gt;选择您的移动设备＆gt;并且可以非常快速，轻松地在任何移动设备上观看结果

修改

并且这部分代码也可以做奇迹：

table { border-collapse: collapse; }

将其添加到您的css文件之上或将其作为样式添加到表标记
中

Android Chrome桌面边框问题

3 个答案: