使用jQuery CSS函数传递变量失效？IE10网格布局问题求助

我太懂在IE10里折腾网格布局的糟心了——这浏览器的网格支持简直是个“复古版”，和现代网格规范差远了。咱们一步步排查你的问题：

首先，父容器的网格配置是核心前提 #

IE10的网格布局要求父元素必须先明确设置网格容器属性，不然子元素的-ms-grid-row/-ms-grid-column根本不会生效。你得先给.grid加上这些基础样式：

.grid {
  display: -ms-grid;
  /* 必须定义列数，和你的脚本逻辑匹配（3列） */
  -ms-grid-columns: 1fr 1fr 1fr;
  /* 行高可以设auto或者固定值，按需调整 */
  -ms-grid-rows: auto;
}

如果父容器没做这个配置，哪怕你脚本写得再对，元素也不会按网格规则排列。

检查脚本的逻辑与细节 #

你的行列循环逻辑本身没问题，但有几个小细节可以优化，同时排查潜在问题：

1. 确认选择器是否准确：.grid .flex是不是真的选中了所有需要排列的div？可以在循环里加个调试输出，看看选中的元素对不对；
2. 调整行列判断条件：你的if (y >= 3)会让第3个元素的列是3，然后换行，这个逻辑没问题，但换成y === 3会更清晰，避免边界值出错；
3. 试试原生JS设置样式：有时候jQuery的.css()对某些前缀属性的支持可能有小问题，换成原生方法会更稳妥。

修正后的脚本可以改成这样：

var row = 1; 
var col = 1;
jQuery(".grid .flex").each(function() {
    var $element = jQuery(this);
    // 调试：确认当前选中的元素
    console.log('当前处理元素:', $element);
    // 用原生JS设置属性，适配IE10更稳妥
    this.style.setProperty('-ms-grid-row', row);
    this.style.setProperty('-ms-grid-column', col);
    console.log('已设置：行=' + row + '，列=' + col);
    // 换行逻辑
    if (col === 3) {
        col = 1;
        row++;
    } else {
        col++;
    }
});

最后用IE10开发者工具验证 #

打开IE10的F12开发者工具，选中目标div，查看“样式”面板，看看-ms-grid-row和-ms-grid-column有没有被正确应用。如果还是没显示，那大概率是选择器没选中元素，或者父容器的网格配置有误。

内容的提问来源于stack exchange，提问作者rookie243