某些移动设备上占位符的 getCompulatedStyle 错误

Question

这对我来说似乎是一个浏览器错误，但我找不到其他人看到同样的问题。对于某些移动浏览器， getComputedStyle 似乎没有为输入占位符获取正确的字体大小。

在下面的示例中，占位符字体大小设置为 11px。在某些移动浏览器中，getComputedStyle 认为占位符的字体大小为 16px。

我已经对此进行了测试：

• iPhone 16 在 Safari 和 Chrome 中：16px

• Chrome 中的三星 Galaxy S22：16px

• Firefox 中的三星 Galaxy S22：11px

• Win11 上的 Chrome 和 Firefox：11px

参见 this jsfiddle，或下面的片段：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<style>
.form-control::placeholder {
  font-size: 11px;
}
</style>

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script>
function updatePlaceholderLength(el) {
    var styles = window.getComputedStyle(el);
    var placeholderFontSize = window.getComputedStyle(el, '::placeholder').fontSize;
    
   document.querySelector('.debug-info-js').textContent = 'placeholder font size: ' + placeholderFontSize;
}

updatePlaceholderLength(document.getElementById('whatever'));
</script>

<div class="container">
  <label class="control-label" for="whatever">Check it out</label>
  <input class="form-control" id="whatever" type="text" placeholder="Here is my placeholder.">
  <hr>
  <pre class="debug-info-js"></pre>
</div>

只是想知道是否有人有任何关于此的信息...这是一个已知的错误/限制吗？这是设计使然吗？有没有办法获得正确的字体大小？

尝试添加 !important 到字体大小声明中，但这当然不起作用......我不知道我还能做什么。

Answer 1

我不认为这是一个错误，只是某些浏览器尚未实现即将推出的草案标准。

此外，最新的W3标准明确仅支持::before 和::after，而CSS WG草案并没有限制这个值。 浏览器兼容性可能会有所不同。

参见：https://developer.mozilla.org/en-US/docs/Web/API/Window/getCompulatedStyle