消除Chrome中浮动元素之间的差距

Question

Google Chrome中的div和table元素之间存在意外差距。 试过很多解决方案，包括Why is there an unexplainable gap between these inline-block div elements?，但没有运气。

很遗憾，由于具体原因，我无法将table替换为div。

此外，放大110％可消除差距。

请帮忙。

https://jsfiddle.net/bdyju024/

div {
  float: left;
  width: 18%;
  background-color: orange;
}

table {
  float: right;
  width: 82%;
  border-spacing: 0;
}

table td {
  background-color: gray;
}

<div>
  test
</div>
<table>
  <tr><td>test</td></tr>
</table>

Answer 1

每个元素只需float:left; or right。

主题通常从右到左（rtl）或从左到右（ltr）写入，这意味着网格上的每个浮点都会转到特定的一侧。

你的例子分叉：https://jsfiddle.net/xwazzo/u6k60vkz/1/

如果你喜欢这个答案，请选择它。 干杯！

修改

请仔细阅读css：

div {
  float: left; /* If you select float: left, both floats should go to the same direction. */
  width: 18%;
  background-color: orange;
}

table {
  float: left; /* This one was floated to right, you need LEFT in order to get what you need.*/
  width: 82%;
  border-spacing: 0;
}

在jsfiddle https://jsfiddle.net/bdyju024/

上查看我的实例