Question

我有以下角度材质成分：

<div flex>
    <md-autocomplete 
          md-selected-item="selectedSavedList"
          md-search-text="searchSavedList"
          md-search-text-change="savedListItemChange(searchText)"
          md-items="item in querySavedList(searchSavedList)"
          md-item-text="item.name"
          md-min-length="0"
          style="min-width: 300px;"
          placeholder="hellow">
            <md-item-template style="background-color:white;">
                <span class="select-title">
                <span> {{item.name}} </span>
          </span>
            </md-item-template>
    </md-autocomplete>
</div>

首先，当我将鼠标悬停在组件上时，占位文本会略微移动到底部。如果鼠标离开组件，文本将再次移动到其自己的位置。点击后，在我选择一个项目后，它确实完全相同的动作。我几乎在我的项目中使用该组件，他们唯一常见的是css文件（因此没有js问题）

它是否已知材料问题或是在我的CSS导致它？如果是这样，哪些部分会对此产生影响？

Answer 1

嗯，对我有用。也许它之前的浏览器或代码？你是否用其他flex或layout属性包装它？

Answer 2

问题的原因是改变了line-height属性（虽然不清楚它是否受到其他框架的影响）。

为输入元素指定行高属性可以解决问题。

e.g。

md-autocomplete input:not(.md-input) {
    line-height: 2.42857143;
}

在角度材料的md-autocomplete中跳跃文本

2 个答案: