在移动浏览器类型中，td周围出现不需要的边框

Question

在移动浏览器类型中，td周围出现不需要的边框

3

我有这个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周围的这些线条。同样的情况也出现在浮动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

- Serhii

我认为它正常工作。 - Amit singh

我正在使用Chrome，没有边框，并且工作正常。 - Akhil

请尝试在移动视图下刷新。谢谢回答。 - Serhii

@SergeySh 我能够复制这个问题，而且很奇怪，那你不能使用边框代替背景颜色吗？ - Muhammad Bilal

事实上，我根本不需要边框。这只是一个例子。实际上，我有一个很大的页面，里面有许多嵌套的div和大量的颜色选择。在电脑上看起来都很好，但一旦你切换到移动设备上，如果父元素有其他背景，它们就会出现这种“边框”...谢谢回答。 - Serhii

相关：https://dev59.com/aW865IYBdhLWcg3wSMkw#6305878，如果您不想缩放，则有部分解决方案。 - Iiridayn

3个回答

0

遇到相同的问题并找到了解决方案。

我使用12%黑色1px边框进行工作，这是解决方法：

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

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

- Patrick Hellebrand

0

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

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

作为最后的手段，您还可以尝试设置

border-style: hidden;

- connexo

1

我认为这不是一个边框。更可能是父元素的背景。因为如果我改变父元素的背景颜色，这些边框的颜色也会改变... - Serhii

是的，没错。这不是边框问题...在<table>中将“background-color:black”属性更改为“background-color:white”可以解决此问题。 - Akhil

是的，我明白了，但在我的文档中，例如，我需要黑色背景。这只是一个例子。我测试了一些网站，很多网站都有这些边框，它们不像白色那样明显，但仍然...对我来说，开发人员似乎不太关心它，或者无法解决。我尝试过的一件事情，并且它有效的是，如果您向子元素添加与父元素背景相同颜色的2px实线边框，这将使外观更加美观。但仍然可以看到一点边距。 - Serhii

在<tr>中添加background-color:white怎么样？边框并没有完全隐藏，但现在它太浅了，而且在许多网站上也不可见.... 这样写：<tr style="background-color:white"> - Akhil

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Persijn · Accepted Answer

我可以重现这个问题，并建议使用CSS3的display table代替实际表格。

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