ui-grid分页显示错乱的原因及解决方法咨询

我之前也踩过这个坑，你的分页区域出现尺寸不对、对齐错乱的"破损"状态，核心原因是AngularJS版本和ui-grid版本不兼容，下面给你拆解原因和具体修复方案：

为什么会出现这个问题？ #

ui-grid 3.x及后续版本对AngularJS的版本有最低要求，你当前使用的AngularJS 1.2.26版本太老旧了，无法适配ui-grid分页组件内部的DOM渲染逻辑和样式计算，最终导致分页区域布局异常。

具体修复步骤 #

1. 升级AngularJS到兼容版本 #

把AngularJS及其依赖（touch、animate）升级到1.3.x或更高版本，比如1.4.9（这个版本和多数稳定版ui-grid兼容性很好）。修改HTML中的script引用：

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.js"></script>

2. 锁定ui-grid资源版本（可选但推荐） #

虽然你已经引用了ui-grid的CSS和JS，但建议使用固定版本的资源链接，避免CDN自动更新到不兼容的版本。比如改用：

<script src="http://ui-grid.info/release/ui-grid-3.2.1.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-3.2.1.css" type="text/css">

这样能确保JS和CSS版本完全匹配，减少潜在的样式冲突。

3. 检查自定义CSS是否冲突 #

你的.grid { width: 600px; }样式本身没问题，但如果后续添加了其他全局样式，要注意不要覆盖ui-grid分页组件的默认样式。可以通过浏览器开发者工具（F12）查看分页区域元素的样式，排查是否有被意外覆盖的属性（比如padding、margin、width等）。

验证修复 #

修改完成后重新加载页面，分页区域的布局、对齐应该就能恢复正常了——兼容的AngularJS版本能正确解析ui-grid的分页指令，让样式渲染逻辑正常工作。

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