cross-browser 相关问题

在 Firefox 中重置 <input type="time"> 的值

我发现一个有趣的跨浏览器问题，使用 jQuery 的 .val 来清除 HTML 时间输入。我想动态禁用输入并清除表单中的值。看来 Firefox 需要这样才能实现......

内联 SVG 在 Safari 和 Mobile Safari 中中断

我最近推出了一个使用了一些内联 SVG 的网站。 我最近推出了一个使用了一些内联 SVG 的网站。 <svg class="divider-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 55.221 58.079" enable-background="new 0 0 55.221 58.079" xml:space="preserve" preserveAspectRatio="xMidYMid meet"> <path d="[...]"/> </svg> Chrome 和 Firefox 中一切都很完美，但当我在 iPhone 或桌面版 Safari 中测试时，布局完全被破坏，许多 SVG 都丢失了。我通过 W3C 验证器运行了源代码，一切都找到了。我经常使用 SVG，所以这很令人困惑...... 事实证明，如果省略 height 和 width 属性，Safari 和 Mobile Safari 就会崩溃。我使用 CSS 设置尺寸，这在其他浏览器中运行良好。但我必须重新添加这些属性以使其行为一致： <svg class="divider-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="55.221px" height="58.079px" viewBox="0 0 55.221 58.079" enable-background="new 0 0 55.221 58.079" xml:space="preserve" preserveAspectRatio="xMidYMid meet"> <path d="[...]"/> </svg> 注意上面缺少的 width 和 height 属性。 此外，有趣的是，preserveAspectRatio 的值很重要。我还有其他几个具有 preserveAspectRatio="none meet" 的内联 SVG 元素，它们不受此问题的影响。 另一个场景/修复方法是，如果您通过 CSS 缩放 SVG，以确保同时声明了 max-width 和 max-height。 .whatever svg { vertical-align: middle; max-height: 1rem; max-width: 1rem; } 我也遇到了这个问题，其中只有许多重复的 SVG 中的第一个会显示在列表显示中。这是因为 SVG 在元素中有一个带有 ID 的 ClipPath。 解决方案是为除第一个之外的每个 SVG 删除 中的 ，或者将其全部删除。

带有与图像宽度匹配的Figcaption的浮动图形。适用于 Firefox 和 Chrome 的 CSS 解决方案

基本上我有一个浮动图像，它具有基于正在加载的图像的任意大小（上限为某个最大宽度％），下面有标题。 （在示例中，我仅为

省略号现在在 Safari 中以渐变文本显示

我有一个带有用户图标和电子邮件的 HTML 块，文本颜色是渐变的。问题是当我将屏幕缩小到最小尺寸时，省略号在 Safari 中不显示，尽管它可以工作......

在浏览器中下载视频，而不是在新选项卡中播放[CORS]

我有 并且在其 href 属性内，我从第 3 方 api 获得了一个视频 URL，当单击该 时，浏览器会打开一个新选项卡并播放视频而不是下载它！

有没有办法让Chrome显示SVG光标，就像在Safari中一样？

我使用 SVG 文件作为 CSS 中的鼠标指针。 Safari 可以正确显示它，而 Chrome 会在其周围显示黑点，就像制作不良的透明 GIF 伪影一样。 检查 Safari 中的小提琴...

针对目标 safari 浏览器版本的媒体查询 <= 15.x.x only

有人可以告诉我如何使用 css 中的媒体查询来定位小于或等于 15.x.x 版本的 safari 浏览器吗？ 我们遇到了一个错误，在 Safari 版本中，一个元素对齐被破坏...

父菜单下的位置子菜单在 IE/FF 中不起作用

我有两层菜单 - 一个 ul 和另一个嵌套的 ul， - 一个带有下拉子菜单的菜单，例如： 菜单项 菜单项... 我有两层菜单 - 一个 ul 和另一个嵌套的 ul， - 带有下拉子菜单的菜单，例如： <div id="menu"> <ul> <li>Menu item</li> <li>Menu item <ul> <li>Sub Menu item</li> <li>Sub Menu item</li> </li> </ul> <li>Menu item <ul> <li>Sub Menu item</li> <li>Sub Menu item</li> </li> </ul> </li> </ul> </div> 第一个 ul 内联显示，而第二个 ul 显示块并使用 JQuery 隐藏和显示。 我有以下 CSS 将子菜单 ul 放置在其各自的父菜单 li 下： #menu UL LI { list-style-type: none; display: inline; padding: 10px; position: relative; } #menu UL LI UL { display: none; z-index: 999; position: absolute; } #menu UL LI UL LI { display: block; width: 100px; } 我的问题是子菜单项没有出现在 FireFox 和 IE 中各自的父菜单项下。但它在 Chrome 和 Safari 中运行良好。 我认为这是正确的方法，但有人知道更好的方法吗？ 要达到您想要的状态，需要进行一些小的更改： #menu ul li { + display: inline-block; - padding: 10px; + padding: 0 10px 0 10px; } #menu ul li ul li { + padding: 10px; } 无需重新发明轮子，更灵活： http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/ 演示： http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html 此外，如果您不打算使用灵活的布局，请设置固定宽度。当浏览器缩小时，您的网站就会崩溃。 让它位于正确位置的最简单方法是将其定位到父 LI。 将 left: 0 添加到您的 #menu UL LI UL css 声明中，它应该开始按照您想要的方式运行。 如果您从网站复制了标记，那么可能是这个有问题。您的开始标签和结束标签不匹配。我已经在这里解决了这个问题： <div id="menu"> <ul> <li>Menu item</li> <li>Menu item <ul> <li>Sub Menu item</li> <li>Sub Menu item</li> </ul> </li> <li>Menu item <ul> <li>Sub Menu item</li> <li>Sub Menu item</li> </ul> </li> </ul> </div> 我刚刚对您的 CSS 进行了一些快速修改，这可以帮助您。 #menu ul { background: blue; } #menu ul li { list-style-type: none; width: 100px; } #menu ul > li { display: inline-block; position: relative; padding: 10px; height: 20px; background: red; } #menu li > ul { display: none; position: absolute; left: 0px; top: 40px; z-index: 999; background: yellow; } #menu li > ul > li { display: block; background: green; }

如何在与specflow.actions.json链接的Specflow Playwright C#中使用跨浏览器测试

我的JSON文件是： specflow.actions.json 文件 { “目标”： { “默认超时”：60， “无头”：假， “traceDir”：“痕迹” } } 我的宝贝...

文件格式：使用 VP8 编解码器编码的 WebM 无法在 Safari 浏览器中预览

我们在 Angular 应用程序中开发了一项功能，可以使用 MediaRecorder API 创建视频文件。该应用程序旨在跨 Chrome、Edge 和 Safari 浏览器无缝运行。使用...

来自输入元素的文件数据

在 Firefox 3 中，可以访问 元素的内容，如下所示。 假设一个表单包含以下元素： 不...

为什么Internet Explorer不支持include()？

我试图支持跨浏览器兼容性，但 IE ( Internet Explorer ) 不支持函数includes()。有谁知道为什么会这样吗？

使用 jQuery 为 ICS 文件命名并即时打开该文件

我的 ICS 脚本工作正常，但根据浏览器的不同，他的行为有所不同！ 首要问题 ： 浏览器生成这些文件名= Safari：未知-1.ics GG Chrome，勇敢：téléchargement(1).ics 埃德...

Google Fonts - 可变字体在 Windows 浏览器中不起作用

我有一个简单的 Next.js 应用程序，正在 macOS（chrome）上开发，并且在 Windows（chrome 和其他）上测试时才注意到出现了问题。 我使用 Google Fonts 中的 Inter 字体，

safari css 粗体字体太粗体

第一行字体在Safari中渲染， 第二行字体在其他浏览器中呈现。 我认为这是 safari 中粗体字体渲染的常见问题。但有没有人有...

粗体的Roboto字体是看不见的

我有一个供内部使用的网站，使用 Roboto 谷歌字体。这是包含它的代码。 我有一个供内部使用的网站，使用 Roboto 谷歌字体。这是包含它的代码。 <link href="//fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet" type="text/css">. & body { font-family: "Roboto"; } b, strong { font-weight: 700; } 我发现我公司有人的 Chrome 无法在粗体时呈现此字体。我可以通过转到 Youtube 并使用检查元素将 Roboto 文本设置为粗体来复制它。在任何其他计算机上都不会出现此问题。 Chrome 是最新的，没有安装任何扩展。我尝试过关闭并重新打开 Chrome 以及几次硬刷新。强制浏览器使用调整大小、CSS 或 JS 重新绘制也无法解决问题。 这不会欺骗问题Google Fonts Roboto 的字体粗细，正常（400）和粗体（700）工作，浅色（300）不行。该问题出现在该网站的 http 和 https 版本上，字体加载为 //，并且我没有从 Chrome 收到不安全内容警告。 造成此问题的原因是什么？我可以在网站或此人的计算机上执行哪些操作来进一步排除故障或修复此问题？ 如果您使用 Google 字体 <link href="//fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet" type="text/css"> 没有后备字体，例如； body { font-family: "Roboto"; } b, strong { font-weight: 700; } 您应该在您的 Google 字体链接中提供 font-weight，例如； <link href="//fonts.googleapis.com/css?family=Roboto:500,700" rel="stylesheet" type="text/css"> 或者，您应该提供后备字体； body { font-family: "Roboto", sans-serif; } 这样做，如果您的浏览器找不到 font-weight: 700; Roboto 字体，它可以使用系统中合适的 sans-serif 字体。 在理想情况下，使用 font-family 支持所有可能的计算机系统，例如； body { font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; } 将解决所有这些问题。 官方文档提供了这个嵌入代码： <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet"> 通过此代码，我们可以使用粗体的 Roboto 字体。 在此处查找更多信息：https://fonts.google.com/selection?query=roboto

如何将表格单元格的最后一个子元素与单元格底部对齐？

我有一个表格，单元格内有两个 div。我希望第一个 div 与单元格顶部对齐，最后一个 div 与底部对齐。这是该表的示例： 我有一个表格，单元格内有两个 div。我希望第一个 div 与单元格顶部对齐，最后一个 div 与底部对齐。这是表格的示例： <table> <tr> <td class="left-cell"> <div class="cell-container"> <div class="first-div"> This content should be at top of the cell, but not overlap </div> <div class="last-div"> This content should be at bottom of the cell, but not overlap </div> </div> </td> <td> Long Content <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> </td> </tr> <tr> <td class="left-cell"> <div class="cell-container"> <div class="first-div"> This content should be at top of the cell, but not overlap </div> <div class="last-div"> This content should be at bottom of the cell, but not overlap </div> </div> </td> <td> Shorter Content </td> </tr> </table> 我的第一次尝试是在表格单元格上使用相对定位，在底部 div 上使用绝对定位。当表格单元格足够高以容纳所有内容时，此方法有效，但绝对定位会导致两个 div 对于较小的单元格重叠。 CodePen：https://codepen.io/Adam-Petersen/pen/mdgJwaG 接下来我尝试使用 Flexbox，但在表格单元格内使用 Flexbox 时似乎存在一些不平凡的渲染逻辑。这是迄今为止我想到的最好的尝试： CodePen：https://codepen.io/Adam-Petersen/pen/NWmqgeZ 这在 Chrome 中完美运行，但在 Firefox 中不起作用。我不明白为什么 height: 0px 上需要 td 才能真正证明我在 Chrome 中想要的内容，但如果不使用 Firefox，我将不得不想出其他东西。 是否有某种方法可以使此 CSS 与 Firefox 兼容，或者是否有另一种完全我没有考虑的方法？ 以防万一您没有陷入表格标记，您可以使用具有更灵活样式功能的网格。 .table-container { height: 100vh; display: grid; grid-template-rows: 1fr; } .table-container>* { padding: 1em; } .row-thing { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr; border: solid red 1px; padding: 0.25em; } .left-cell { padding: 1em; background-color: #00ffff10; } .cell-container { height: 100%; display: grid; grid-template-rows: 1fr auto; align-items: space-between; border: solid 1px blue; } .first-div { align-self: start; } .last-div { align-self: end; } <div class="table-container"> <div class="row-thing"> <div class="left-cell"> <div class="cell-container"> <div class="first-div"> This content should be at top of the cell, but not overlap </div> <div class="last-div"> This content should be at bottom of the cell, but not overlap </div> </div> </div> <div> Long Content <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> </div> </div> <div class="row-thing"> <div class="left-cell"> <div class="cell-container"> <div class="first-div"> This content should be at top of the cell, but not overlap </div> <div class="last-div"> This content should be at bottom of the cell, but not overlap </div> </div> </div> <div> Shorter Content </div> </div> </div>

浏览器中 ReadableStream.from 的 Polyfill？

浏览器的ReadableStream.from 目前仅在 Firefox 中受支持。我找到了 JavaScript 中的 Node 实现，但它使用了很多内部原生节点函数。同样，ReadableStream...

具有深度嵌套子网格的浏览器之间的行为不一致

当我将子网格嵌套在网格内的填充子网格内时，不同浏览器之间的行为不一致。 Chrome/Edge (Windows) 火狐（Windows） Safari MacOS 这是代码： ...

浏览器端JS：文件系统API与文件系统访问API？

有一个文件系统 API，但现在显示为已弃用：https://developer.mozilla.org/en-US/docs/Web/API/Window/requestFileSystem 现在还有另一个，文件系统访问API：https://developer.mo...