md-switch在输入点击时跳转位置

Question

我正在使用Angular-Material的md-switch来设置复选框的样式，但我遇到了一个奇怪的问题。 从标准来看，md-switch在列中使用相对较多的空间，所以我写了一些自定义css来调整它到我的表格单元格。

md-switch {
    margin: 0px;
    height: 0px;
    line-height: 0px;
} 

md-switch .md-bar {
        background-color: #d0cece; /* set not selected bar color */
}

md-switch.md-checked .md-bar {
        background: rgb(160,209,90); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(160,209,90,1) 0%, rgba(117,166,66,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(160,209,90,1) 0%,rgba(117,166,66,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(160,209,90,1) 0%,rgba(117,166,66,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0d15a', endColorstr='#75a642',GradientType=0 ); /* IE6-9 */
}


md-switch .md-thumb {
        color: rgb(158,158,158); /* not selected switch color */
            line-height: 0px;

}

md-switch.md-checked .md-thumb {
        background: rgb(255,255,255); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(234,234,234,1) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(234,234,234,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */
        border: 1px solid #CBCBCB;

}

md-switch[disabled] .md-thumb {
        background-color: rgb(255,255,255); /* disabled switch color */
}

.md-switch-td {
    margin-top: 0px;
}

md-switch .md-container {
    height: 0px;
}

#md-switch {
    width: 4.3333333%;
}

md-switch[disabled], md-switch[disabled] .md-container {
    cursor: not-allowed;
}

默认情况下，md-switch正在使用：

margin: 16px,
line-height: 28px;
height: 30px

当进入带有md-switch的页面时，开关被放置在表格单元格之外，如下图所示：

当点击另一个输入时，从描述输入开始，开关跳回到预期位置：

我已经尝试在Chrome开发者工具中观看md-switch元素，看看当触摸输入时它的类是否发生了变化，但是md-switch的类保持不变：

class="ng-pristine ng-untouched ng-valid"

遇到同样问题或想出解决方案的任何人？

提前致谢！