移动浏览器类型上 td 周围不需要的边框答案

【问题标题】：Unwanted border around td on mobile browser type移动浏览器类型上 td 周围不需要的边框
【发布时间】：2015-12-02 15:48:51
【问题描述】：

我有这个 html 代码作为示例来显示我的问题。

table {
  border-collapse: collapse;
  border: 0px;
  border-spacing: 0;
  background-color: black;
  width: 300px;
  height: 300px;
  margin: auto;
}
td {
  border: none;
  background-color: white;
  padding: 0px
}

<table border='0' cellspacing='0' cellpadding='0'>
  <tr>
    <td>White</td>
    <td>White</td>
  </tr>
</table>

你可以看到父元素有黑色背景，子元素有白色，我无法在当前示例中删除 td 周围的这条线。与 Floted div 相同。

这仅适用于移动浏览器或 chrome 移动开发者视图。请帮忙）

http://i.stack.imgur.com/bppBb.png

要在 chrome 上查看边框切换到移动视图后必须刷新页面如果它可以在您的电脑上运行，为什么它不能在我的电脑上运行？
这是完整的示例代码。我做错了什么？

我在 Windows 10 上。但无论如何我的 HTC 显示相同...

<!DOCTYPE html>
<html>
<body>



<table border='0' cellspacing='0' cellpadding='0' style="border-collapse:collapse;border:0px;border-spacing:0;background-color:black;width:300px;height:300px;margin:auto">
  <tr>
      <td style="border:none;background-color:white;padding:0px">White</td>
      <td style="border:none;background-color:white;padding:0px">White</td>
  </tr>
</table>


</body>

</html>

即使在 CssZengarden 网站上，此边框在移动设备上也是可见的

http://i.stack.imgur.com/kVZgR.png

【问题讨论】：

我认为它工作正常
我在 chrome 上工作正常，没有边框
尝试在移动视图上刷新。谢谢回答
@SergeySh 我可以复制这个问题，而且很奇怪，你不能用边框代替背景色吗？
问题是，我根本不需要边框。这只是一个例子。实际上，我有一个很大的页面，里面有很多 div 和大量的颜色选择。在电脑上看起来一切都很好，但是一旦你转到移动设备上，如果父元素有其他背景，它都会有这个“边框”......谢谢你的回答

标签： html css mobile

【解决方案1】：

我可以重现这个问题，我建议使用 css3 显示表而不是使用实际表。

.table-wrapper {
  display: table;
  width: 300px;
  height: 300px;
  background-color: black;
}
.cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  background-color: white;
}

<div class="table-wrapper">
  <div class="cell">TEXT HERE</div>
  <div class="cell">TEXT HERE</div>
</div>

【讨论】：

我在 chrome 45 中对其进行了测试。使用移动/响应式测试工具，我可以重新创建表格边框。它们不与 display: table 一起显示。
@Perijn@ 你没有设置背景颜色...父黑色，子白色，比你看到的要多
@SergeySh 我编辑了代码以包含黑人父母白人孩子。（听起来很不对）
好吧，现在我看看我是否在移动设备上运行你的代码 Shippet，它看起来没问题，但是当我将代码复制到本地文件并在移动设备上运行时，它会显示边界。看起来 StackOverflow 使用某种类型CSS重置，这就是我要找的。我尝试了一些公共 CSS 重置，但没有成功...
但即使在这里，您的代码 Shippet 也会在带有移动版本查看器的 chrome 上显示边框。也许只有我的铬？版本 45.0.2454

【解决方案2】：

尝试将border: 0 none !important; 设置为table、tr、th 和td。我建议 !important 只是为了确保您的边框不是来自您可能包含的第三方的任何 CSS。

如果失败，您仍然可以尝试应用border-color: transparent; 或border-color: #your-background-color; 或border-color: rgba(255,255,255,0); 作为解决方法。

万不得已，也可以尝试设置

border-style: hidden;

【讨论】：

我不认为这是一个边界。它更有可能是父元素的背景。因为如果我改变父元素的背景颜色，那些边框也会改变颜色......
是的。这不是边框......在中将“background-color:black”属性更改为“background-color:white”正在解决问题。

是的，我得到了这个，但在我的文档中，例如我需要黑色背景。这只是一个例子。我已经测试了一些网站，其中很多都有这个边框，它们不像白底黑字那样可见，但仍然......在我看来，开发人员不太关心它，或者它无法解决。有人认为我尝试过，如果您将 2px 实心边框添加到与父元素背景颜色相同的子元素，它会看起来更好。但仍然可以看到微小的边缘

如何将 background-color:white 添加到
中？边框没有完全隐藏，但现在仍然太亮了，在许多网站上也看不到....这里：

【解决方案3】：

遇到同样的问题，找到了解决办法。

我正在使用 12% 黑色 1px 边框，这解决了它：

>td[colspan] { border-top: 1px solid rgba(0,0,0,.06) !important; }

神秘地使用半可见性进行双边框匹配。仅使用 border-color 或 border-top-color + val 也无法解决此问题。

【讨论】：