Android Chrome 表格边框问题

Question

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

此渲染问题仅在 Android Chrome 浏览器上出现，桌面 Chrome 渲染是无边框的。

在 Android Chrome 浏览器 Nexus 7 (2012)、Android 5.0、Chrome 39.0.2171.59 上的外观

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

这是jsfiddle代码

<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;

为了解决这个问题，你必须定义一个与表格单元格背景颜色相同的 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。

所有……所有的人在一起。不只是其中 1 个...

（测试）打开 Chrome > 使用 wampserver 或 IIS 打开您的网站 > 右键单击 > 单击检查 > 单击移动设备图标 > 选择您的移动设备 > 并在任何移动设备上快速轻松地观看结果

编辑：

这部分代码也可以创造奇迹：

table {
    border-collapse: collapse;
}

将其添加到 css 文件顶部或将其添加为表格标签中的样式

Answer 4

我一直在研究这个问题，如果我将代码放入“file.css”并从“”链接到它，Android Chrome 就无法使用它。

如果我将特定的有问题的代码放入页面“”中，Android Chrome 似乎可以使用该 css 代码。只是我的观察。希望这对那里的人有帮助。