如何为 Edge 浏览器设置特定的 css 属性？答案

【问题标题】：How can I set a specific css property for Edge browser?如何为 Edge 浏览器设置特定的 css 属性？
【发布时间】：2019-06-03 23:12:14
【问题描述】：

我有这个 CSS：

.records-table-row-checkbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Edge浏览器置顶出现问题，尝试解决了近两天。我想改变 top:50%;到顶部：19px； 仅适用于 Edge 浏览器。其余浏览器应该有 top:50%;.

我试过了：

  *::-ms-input-placeholder { 
    top: 19px;
  }

但 Edge 仍然占据 50%。

【问题讨论】：

“但 Edge 仍然占据 50%” - 这并不令人惊讶，因为 *::-ms-input-placeholder 格式化显示在表单字段中的占位符值。这不会选择您的复选框（？）根本。
我理解错误。
也许我们可以退后一步，找出您为什么只需要针对一个浏览器。如果我们解决了这个问题，也许我们就不需要这些丑陋的黑客了。
上面的 css 代码将复选框居中在 Chrome 中，而不是在 Edge 中。此外，top:50% 不会影响这两种浏览器中的任何一种，但它仍然以 Chrome 为中心。问题可能是顶部属性是百分比，而父级没有设置高度，而是根据复选框确定高度。我希望这很清楚。
嗯。你能提供一个minimal reproducible example 来证明这个问题吗？

标签： css microsoft-edge

【解决方案1】：

对于复选框，您可以使用仅在 Internet Explorer 和 Microsoft Edge 中支持的::-ms-check 选择器。 下面的示例用法：

input[type=checkbox]::-ms-check {
  top: 19px
}

【讨论】：

有没有不包含type=checkbox的方法？
我可以看到您使用相同的代码创建了另一个线程。 stackoverflow.com/questions/54075558/… 您可以在其中查看我的测试结果，并且在 Chrome 和 Edge 中的工作方式类似。在这里我想和你确认一下，Edge 应用不同的 CSS 有什么特别的原因吗？通常人们希望在各种浏览器中获得相似的结果。

【解决方案2】：

@supports (-ms-ime-align:auto) {
  .records-table-row-checkbox {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}}

【讨论】：

请解释为什么以及如何解决 OP 的问题。