AngularJS Material 1.1.0 md-select多选选项换行显示问题排查

嘿，我完全懂你现在的困扰——用AngularJS Material 1.1.0的md-select开启multiple=true后，好好的已选选项本该单行用逗号分隔，结果冒出来个多余的<div class="md-container"><div class="md-icon"></div></div>把布局搞乱成纵向排列了，而且官方示例里根本没这玩意儿，找来源确实头大。

我给你几个实用的排查思路和解决办法：

一、先排查自定义代码的干扰 #

• 先扫一遍项目里有没有自定义的AngularJS指令或者全局样式，大概率是某个自定义扩展在编译md-select的时候偷偷插了这个.md-container元素。比如有没有团队自己写过针对多选下拉的增强指令？或者有没有第三方组件库混进来了？
• 另外检查CSS，说不定是某个全局样式把.md-container改成了display: block，让它独占一行，把已选选项挤到下面去了。

二、确认版本兼容与依赖冲突 #

• 虽然你用的是1.1.0版本，但还是要核对下AngularJS核心版本和Material版本是否匹配。比如AngularJS 1.5.x和Material 1.1.0是适配的，但如果核心版本太老或者太新，可能会触发渲染异常。
• 看看项目里有没有同时引入其他UI库（比如Bootstrap），它们的类名可能和Material的类名撞了，意外触发了这个多余元素的生成。

三、临时救急的CSS修复（找不到根源时用） #

要是暂时摸不到这个元素的生成根源，可以先靠CSS强行修正布局：

/* 把多余的.md-container隐藏掉 */
md-select.md-multiple .md-container:not(.md-placeholder-container) {
    display: none !important;
}
/* 确保已选选项保持单行排列 */
md-select.md-multiple .md-select-value {
    flex-wrap: nowrap;
    overflow: hidden;
}

不过这只是权宜之计，最好还是找到根源解决，免得后续出其他奇怪的兼容问题。

四、用调试器揪出元凶 #

打开浏览器开发者工具，用断点调试追踪元素生成：

1. 在Elements面板选中那个多余的.md-container，右键选「Break on」→「Subtree modifications」。
2. 然后刷新页面或者触发下拉框的渲染，当这个元素被插入时，调试器会暂停，你顺着调用栈往上找，就能看到是哪段代码生成了这个元素。

按这个步骤来，应该能很快定位到问题所在。

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