HTML 选择元素在适用于 macOS 的 Chrome 和适用于 Windows 的 Chrome 上呈现不同

标签 html css google-chrome cross-platform

最近,我开发的部分应用程序在 Windows 上进行了测试,我们发现某个特定 UI 上下文中的下拉菜单/选择元素在 Chrome for Windows 和 Ubuntu 上的呈现方式与在 Chrome for macOS 上的呈现方式截然不同。

我曾尝试在不同操作系统上检查 Chrome 开发工具中的元素和样式,但未能发现任何可能导致下拉列表在一种情况下符合预期而在另一种情况下完全无法使用的差异。

我的问题是什么可以解释这种差异,开发工具中是否有任何方法可以查看什么差异?我是调试跨平台样式问题的新手,除了 Chrome 开发工具中的样式 选项卡外,我不确定从哪里开始,而且我还没有找到我要找的东西。

在 macOS 上:

enter image description here

在 Windows 和 Ubuntu 上:

(在屏幕截图中似乎没有月份,但它们只是白底白字,因此除非突出显示,否则看不到):

enter image description here

最佳答案

选择主要由浏览器/操作系统设置样式。所以你可以自定义它到某个点(你可以使用 -webkit-appearance: none; 来禁用一些默认样式,然后应用你需要的),但是真的 使其在所有平台上看起来都相同,您必须使用一些常规元素(例如 divli 以及 JS

关于HTML 选择元素在适用于 macOS 的 Chrome 和适用于 Windows 的 Chrome 上呈现不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48352211/

相关文章:

html - 当显示设置为 flex 时,上标 <sup> 标签不起作用

php - 在 php 中使用循环创建 css/html 元素的想法

c# - 元素重叠在其容器上

css - 移动响应主题 css 不起作用

javascript - Chrome 内容脚本不工作 : DOMContentLoaded listener does not execute

macos - 在Mac上为Chrome安装VLC Web插件

html - wp-accordion slider css 错误地使字体在 IE9 中显得更粗

html - 响应 div 高度

HTML/CSS dropright 子菜单项与页面背景上的文本重叠(未正确呈现)

javascript - 在导航到新页面时保持 Chrome 扩展弹出窗口打开