＆＃34;边界崩溃：崩溃＆＃34;父表影响＆＃34;边界间距：7px＆＃34; IE中的子表但不在Chrome中，如何解决？

Question

好的，我有父表<table class="{style.removeBorderTable}" >，子表<table class="{style.flexTable}">

.flexTable { 
  border-spacing: 7px;
}

.removeBorderTable {
   border-collapse:collapse
}

在IE中，它没有边框空间，如下所示：

在Chrome中，它有boprder-space，看起来像这样

SO，如何解决？实际代码非常复杂，但当我删除.removeBorderTable时，表格在IE＆amp;在Chrome中（即IE中有border-spacing。）

Answer 1

这是由浏览器之间的浏览器样式表（默认呈现规则）的差异引起的。要解决此问题，请在内部表上明确设置border-collapse。由于您显然需要单独的边框模型，否则设置边框间距将毫无意义，请添加

.flexTable { border-collapse: separate }

Chrome（以及Firefox）中的浏览器默认样式表包含规则

table { border-collapse: separate }

您可以查看开发人员工具。此浏览器样式表规则与HTML5中建议的默认rendering rules for tables一致。但是，IE没有这样的规则。这不是一个错误，而是一个功能;默认渲染规则只是建议或预期;此外，HTML5仍然是一个草案（虽然很快就会成为官方）。

因此，在IE中，内部表从外部表继承border-collapse值。这会导致折叠边框模型，忽略border-spacing。因此，您需要使用显式设置来阻止该继承。

（除非嵌套表，否则问题不会表现出来。在一个简单的表中，如果没有border-collapse设置，IE会应用初始值separate，如在CSS规范中定义。）