设置内部div填充列高度-适用于Chrome，但不适用于Safari/Firefox

问题：设置内部div填充列高度-适用于Chrome，但不适用于Safari/Firefox

回答：这个问题涉及到在不同浏览器中设置内部div填充列高度的兼容性问题。在Chrome浏览器中，可以使用一些CSS属性和技巧来实现，但在Safari和Firefox等其他浏览器中可能不起作用。

一种常见的解决方案是使用Flexbox布局。Flexbox是一种CSS布局模型，可以轻松地实现等高列布局。通过将父容器设置为display: flex，并将子元素设置为flex: 1，可以使子元素自动填充父容器的高度。

以下是一个示例代码：

HTML:

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

CSS:

.container {
  display: flex;
}

.column {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
}

在这个示例中，.container是父容器，.column是子元素。通过设置.container的display属性为flex，子元素.column会自动填充父容器的高度。

这种方法在大多数现代浏览器中都能正常工作，包括Chrome。但是，由于不同浏览器对CSS规范的解释和支持程度不同，可能会在某些浏览器中出现兼容性问题。

如果需要更广泛的浏览器兼容性，可以考虑使用JavaScript来实现等高列布局。通过获取最高列的高度，并将其他列设置为相同的高度，可以实现等高列布局。

以下是一个使用JavaScript实现等高列布局的示例代码：

HTML:

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

CSS:

.column {
  padding: 10px;
  border: 1px solid #ccc;
}

JavaScript:

var columns = document.getElementsByClassName('column');
var maxHeight = 0;

for (var i = 0; i < columns.length; i++) {
  if (columns[i].offsetHeight > maxHeight) {
    maxHeight = columns[i].offsetHeight;
  }
}

for (var i = 0; i < columns.length; i++) {
  columns[i].style.height = maxHeight + 'px';
}

在这个示例中，通过JavaScript获取所有.column元素，并找到最高列的高度。然后，将所有列的高度设置为最高列的高度，实现等高列布局。

需要注意的是，使用JavaScript来实现等高列布局可能会增加页面加载和渲染的时间，因此在性能要求较高的情况下需要谨慎使用。

总结：设置内部div填充列高度在不同浏览器中的兼容性问题可以通过使用Flexbox布局或JavaScript来解决。Flexbox布局在大多数现代浏览器中都能正常工作，而JavaScript可以实现更广泛的浏览器兼容性。具体选择哪种方法取决于项目需求和浏览器兼容性要求。