如何检测当前浏览器是否支持`table-cell`和`vertical-align`属性？

可以使用以下几种方法来检测当前浏览器是否支持table-cell和vertical-align属性：

一、功能检测（Modernizr）

1. 使用 Modernizr 库：Modernizr 是一个用于检测浏览器特性支持的 JavaScript 库。它可以检测众多的 HTML5 和 CSS3 特性，包括对table-cell和vertical-align的支持情况。
   • 引入 Modernizr 库到你的项目中。
   • 然后可以通过以下方式检测：

     if (Modernizr.tablecell) {
     console.log('浏览器支持 table-cell 属性');
     } else {
     console.log('浏览器不支持 table-cell 属性');
     }

   • 对于vertical-align属性，可以通过创建一个测试元素并应用该属性，然后检查其效果来间接判断。例如：

     var testDiv = document.createElement('div');
     testDiv.style.display = 'table-cell';
     testDiv.style.verticalAlign = 'middle';
     document.body.appendChild(testDiv);
     var isVerticalAlignSupported = testDiv.offsetHeight > 0 && testDiv.style.verticalAlign === 'middle';
     if (isVerticalAlignSupported) {
     console.log('浏览器支持 vertical-align 属性与 table-cell 结合使用');
     } else {
     console.log('浏览器不支持 vertical-align 属性与 table-cell 结合使用');
     }
     document.body.removeChild(testDiv);

二、特性检测

1. 手动创建元素并应用属性：通过在 JavaScript 中动态创建一个元素，应用table-cell和vertical-align属性，然后检查该元素的样式是否生效来判断浏览器是否支持。
   • 以下是一个示例代码：

     
     var testDiv = document.createElement('div');
     testDiv.style.display = 'table-cell';
     testDiv.style.verticalAlign = 'middle';
     document.body.appendChild(testDiv);
     var isTableCellSupported = testDiv.style.display === 'table-cell';
     var isVerticalAlignSupported = testDiv.style.verticalAlign === 'middle';
     if (isTableCellSupported && isVerticalAlignSupported) {
     console.log('浏览器支持 table-cell 和 vertical-align 属性');
     } else {
     console.log('浏览器不支持 table-cell 和 vertical-align 属性');
     }
     document.body.removeChild(testDiv);

**三、使用浏览器控制台进行调试**

1. 在浏览器的开发者工具控制台中，可以尝试应用`table-cell`和`vertical-align`属性到一个元素上，然后观察效果。如果属性生效，说明浏览器支持；如果没有达到预期的效果，可能表示不支持或者存在兼容性问题。
   - 例如，在 Chrome 浏览器中，按下 F12 打开开发者工具，切换到控制台选项卡，输入以下代码：

```javascript
var testDiv = document.createElement('div');
testDiv.style.display = 'table-cell';
testDiv.style.verticalAlign = 'middle';
document.body.appendChild(testDiv);
console.log(testDiv.style.display); // 输出 'table-cell'（如果支持）
console.log(testDiv.style.verticalAlign); // 输出 'middle'（如果支持）
document.body.removeChild(testDiv);