cross-browser 相关问题

在打字稿中使用浏览器特定属性的正确方法是什么？

具体来说，我想在 FireFox 中的 Error 对象上使用“fileName”和其他额外属性。 但是这样的东西给了我红色下划线，我可以简单地忽略它，但它

获取 requests.exceptions.InvalidHeader：来自 ('Sec-Gpc', 1) 的标头部分 (1) 必须是 str 或 bytes 类型，而不是 <class 'int'> 尽管 Chrome 会发送它

当尝试在标头中使用 Sec-Gpc 属性时，我得到 requests.exceptions.InvalidHeader：标头部分 (1) from ('Sec-Gpc', 1) 必须是 str 或 bytes 类型，而不是 ： 标题= { ...

window.open 在 Mac 中处于全屏浏览器模式时在新选项卡中打开

我的 Next.js 函数中有以下代码。我希望在同一选项卡中打开该网址，但在一个新的较小窗口中打开。 window.open(url, '_blank', 功能) 特征在哪里， 常量特征 = `wi...

a 的不透明度过渡：悬停不起作用

我希望所有链接元素都显示一致的行为。 a:悬停{ 不透明度: 0.5; } 这适用于 IE 和 Firefox，但不透明度（以及相关的 CSS 过渡）未正确应用于...

检查 Javascript 删除功能的支持

在 Javascript 中你可以删除对象属性： var o = { x: 1, y: 2 }; var wasDeleted = 删除 o.x; 现在 o.x 应该是未定义的并且 wasDeleted 是 true。 但是您只能删除本机对象...

是否有标准方法来处理跨浏览器的网络错误和阻止的请求？

根据获取规范 https://fetch.spec.whatwg.org/#concept-network-error 网络错误响应的状态应为 0。但是对于这些错误情况，我们看到浏览器实现了该功能...

使用 <img> 与海报属性作为 HTML5 视频标签的后备图像有什么区别？

在视频不可用、加载缓慢、操作系统限制或不支持 HTML5 标记的情况下，浏览器实际上如何回退到这些选项？ 在视频不可用、加载缓慢、操作系统限制或不支持 HTML5 标记的情况下，浏览器实际上如何回退到这些选项？ <video src="/video.mp4" poster="/fallback-image.png" /> <video src="/video.mp4"> <img src="/fallback-image.png" /> </video> <video src="/video.mp4" poster="/fallback-image.png"> <img src="/fallback-image.png" /> </video> 跨浏览器的首选方法是什么？两者同时使用有意义吗？ 海报不是后备图像。这是在视频播放之前显示的图像。 添加 img 元素作为 video 元素的内容仅适用于浏览器非常旧且不知道 <video> 元素是什么的情况。显然，如果浏览器不知道 <video> 元素是什么，它就不会知道海报属性的作用。

在 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 埃德...