1. 引言
在开发网页时，我们经常需要使用媒体查询来针对不同的设备或屏幕大小应用不同的样式。然而，当使用媒体查询触发时，我们有时会遇到一个奇怪的问题，即在Webkit浏览器中，元素的display属性会在<table>单元格(display: table-cell)和内联块级元素(display: inline-block)之间切换。在本文中，我们将探讨这个问题的原因和解决方法。
2. 问题描述
当使用媒体查询时，我们可能会定义一个较小的屏幕宽度下应用display: inline-block的样式，而在较大的屏幕宽度下应用display: table-cell的样式。然而，当从较大宽度切换到较小宽度时，Webkit浏览器可能会错误地将元素的display属性从table-cell切换为inline-block，导致布局混乱。
2.1 问题复现
为了更好地理解这个问题，我们可以通过以下代码来复现：
@media (max-width: 600px) {
.container {
display: inline-block;
}
}
@media (min-width: 601px) {
.container {
display: table-cell;
}
}
上述代码中，我们使用了两个媒体查询，在小于等于600px的屏幕宽度下，将.container元素的display属性设置为inline-block，而在大于600px的屏幕宽度下，将其设置为table-cell。
接下来，我们在一个Webkit浏览器中打开这个页面，并调整窗口大小。当窗口缩小到小于等于600px时，我们可以看到.container元素的布局仍然保持为table-cell，这是错误的行为。
3. 问题原因
这个问题是由于Webkit浏览器引擎的渲染机制造成的。在处理媒体查询时，Webkit会重新计算元素的布局，并根据新的条件重新应用样式。然而，在应用新样式时，Webkit可能会错误地将display属性从table-cell切换为inline-block，无视我们定义的样式规则。
4. 解决方法
为了解决这个问题，我们可以采用以下两种方法：
4.1 使用min-device-width
一种解决方法是使用min-device-width而不是min-width来定义媒体查询。min-device-width是设备屏幕的实际宽度，而不是浏览器窗口的宽度。因此，使用min-device-width可以避免Webkit错误地切换display属性。
4.2 添加!important
另一种解决方法是对应用table-cell样式的规则添加!important。使用!important可以提升样式的优先级，确保这个样式规则不会被其他规则覆盖。
@media (min-width: 601px) {
.container {
display: table-cell !important;
}
}
通过添加!important，我们可以确保在应用媒体查询后，Webkit不会错误地切换display属性。
5. 总结
在本文中，我们探讨了当使用媒体查询触发时，Webkit浏览器中元素的display属性在table-cell和inline-block之间切换的问题。我们发现这个问题是由于Webkit渲染机制造成的，可以通过使用min-device-width或添加!important来解决。在实际开发中，我们应该根据具体情况选择合适的解决方法来处理这个问题。