javascript - md-datepicker 在 Edge 和 IE 11 的侧面显示滚动条

Question

我在我的页面上使用标准的 md-datepicker。它在所有浏览器上工作正常，但在 IE11 和 Edge 上，右侧显示了一个奇怪的滚动条。

请在下面找到屏幕截图。

这是我的代码:

HTML:

<div id="myDatepicker" layout="column" ng-cloak>
  <md-content>
    <md-datepicker 
      ng-model = "myDate" 
      md-placeholder = "Enter date" md-hide-icons="triangle">
    </md-datepicker>
  </md-content>
</div>

JS:

$scope.myDate = "";
this.isOpen = false;

CSS:

.md-default-theme .md-datepicker-input-container, .md-datepicker-input-container {
  border-bottom-color: white;
}

.md-default-theme .md-datepicker-input, .md-datepicker-input {
  color: #1797c0;
}

#myDatepicker .md-datepicker-calendar-icon {
  color: #1797c0;
}

占位符下方还有一条橙色线，我已尝试在上面的 CSS 中将其更改为白色 - 不确定为什么未应用它？

链接 - IE 11 - scrollbar on the right of datepicker

链接 - Edge - scrollbar on the right of datepicker

Answer 1

如果由于某种原因导致 md-datepicker 的高度出现问题，添加 overflow: hidden; 到 md-datepicker CSS 可能会解决问题。如果没有在 JSFiddle 或类似工具中看到它，很难确定。

如果您使用 Dev Tools 检查 Chrome 中的页面，您能看到橙色的属性吗？这可能是默认主题中内置的内容，您没有覆盖或正确更改。我认为您可能需要将边框颜色应用于 .md-input-container 和 .md-input