Android Chrome表格边框问题

tgabmvqs 于 12个月前发布在 Android

关注(0)|答案(4)|浏览(104)

我在Android Chrome浏览器上的边框渲染有问题。你可以看到单元格之间的黄色细线边框。但CSS中的边框设置为零。
此渲染问题仅适用于Android Chrome浏览器，桌面Chrome渲染是无边框的。
它在Android Chrome浏览器上的外观Nexus 7（2012），Android 5.0，Chrome 39.0.2171.59

的数据
有可能通过css或js解决这个问题吗？
这里是jsfiddle code

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

字符串

android

来源：https://stackoverflow.com/questions/27115112/android-chrome-table-border-issue

4条答案

按热度按时间

q1qsirdb1#

我只是有同样的问题.你是对的，它看起来像问题发生在Android Chrome浏览器的渲染引擎.
Chrome浏览器只是忽略它：

border: 0px;

字符串
为了解决这个问题，你必须定义一个与表格单元格背景颜色相同的1 px边框。在我的例子中，我应用了：

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

型
如前所述，table-cell的背景也是#fff。
我希望这对你有帮助！克里斯

赞(0）回复(0）举报 12个月前

5fjcxozz2#

尝试删除边框中的实体。

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

型

赞(0）回复(0）举报 12个月前

uhry853o3#

x1c 0d1x的数据
完成@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属性，即使是1 px。
所有的。所有的一起。不只是其中一个。。
(To测试）打开Chrome >使用wampserver或IIS打开您的网站>右键单击>单击检查>单击移动的图标>选择您的移动终端>并在任何移动的中非常快速轻松地观看结果

编辑：

这部分代码也能创造奇迹

table {
    border-collapse: collapse;
}

型
将其添加到css文件的顶部，或者将其作为样式添加到表格标记中

赞(0）回复(0）举报 12个月前

t98cgbkg4#

我一直在玩这个，如果我把代码放在一个“file.css”和链接到它从<head><link>，Android Chrome不与它工作。
如果我将特定的有问题的代码放入页面<head><style>中，Android Chrome似乎可以使用该CSS代码。只是我的观察。希望这对那里的人有所帮助。

赞(0）回复(0）举报 12个月前

我来回答

Android Chrome表格边框问题

4条答案

相关问题

热门标签

最新问答