在 Android Chrome 上查看时块之间的空间答案

【问题标题】：space between blocks when viewed on Android Chrome在 Android Chrome 上查看时块之间的空间
【发布时间】：2016-02-10 19:34:54
【问题描述】：

我遇到了一些 CSS 问题。看看：http://codepen.io/anon/pen/rxQQpv.

ul {
  list-style: none;
}
ul li {
  background: #333;
  color: #fff;
  width: 100px;
  float: left;
  text-align: center;
}

<ul>
  <li>Test1</li>
  <li>Test2</li>
</ul>

当我在 Android 谷歌浏览器中打开它时，它看起来像：

请注意，2 li 块之间有一点空间。我该如何删除它？为什么会在那里？

【问题讨论】：

【解决方案1】：

添加与背景颜色相同的边框。它会起作用的：

ul li{
   border: 1px solid #333;
}

如果您更喜欢，也可以只在左右两侧添加边框。

ul li{
   border-left: 1px solid #333;
   border-right: 1px solid #333;
}

【讨论】：

作为临时解决方案效果很好。谢谢
我建议改用透明边框。它仍然会显示背景，但如果它发生变化，您不必在两个地方更改值。看这里的效果：jsfiddle.net/e9n04ovd
@PhiterFernandes 在什么浏览器/操作系统中？我刚刚检查了它与现代的，甚至一些移动的（使用浏览器堆栈）
"框的内容、内边距和边框区域的背景样式由生成元素的 'background' 属性指定。边距背景始终是透明的。" W3C Documentation。只有边距始终具有透明背景。内容、边框和填充框使用内容背景。
这没有任何意义...您是否检查了样式选项卡中的盒子模型图形？它清楚地显示了最新 chrome 上小提琴的 16px 边框：i.imgur.com/uy2Va5B.png

【解决方案2】：

我认为你必须设置 li css 规则 margin:0 和 padding:0 来解决你的问题。

【讨论】：

【解决方案3】：

尝试将display: block 添加到您的 li 元素中：

ul li {
    display: block;
}

您在哪个 Android 设备/版本上进行测试？我无法重现该问题。

【讨论】：

您可以使用chrome上的开发者工具重现android兼容性问题。顺便说一句，您的解决方案不起作用
我正在使用 browserstack.com 在实际设备（和一些模拟器）上进行测试。三星 Galaxy S5、Google Nexus 5 和 Galaxy S3（模拟）上的 Android 4.4 都按预期运行，没有边界。
可以是轮廓而不是边框吗？ li { outline: none !important; } 。添加 !important 以针对 :focus 和 :active 状态进行测试。
li 默认是块元素。

【解决方案4】：

我找到的最佳解决方案是使用另一个 div，该 div 横跨在这两个具有相同颜色的 div 的背景中。我的 webapp 有超过 20 个连续的这样的块。因此为它们添加边框效果不佳。这个解决方案效果最好。

【讨论】：