cross-browser 相关问题

父菜单下的位置子菜单在 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...

导致渐变带的原因以及如何解决它？

最近我正在编写一些线性和径向渐变，我注意到它们在 Chrome 中显示得很好，但在 Safari 中却有条带。从与该主题相关的许多其他问题来看，似乎

HTML/CSS 图像位于左侧，文本位于右侧。多浏览器

我正在尝试创建一个带有图像和文本的新闻栏。我可以让它在单独的浏览器（即 Chrome）上正常工作，但如果我在 Firefox 中打开它，它会弄乱格式。有没有...

indexedDB onupgradeneeded 事件永远不会完成

在我的应用程序中，用户应该能够动态创建和删除 objectStore。感谢indexedDB，这个操作（为什么在世界上）只允许在onupgradeneeded中。 升级后...

ASP.NET 中具有屏蔽编辑扩展器的文本框中的退格键或删除键在 Chrome 中不起作用

' 宽度=“60px”启用=“假”> <asp:TextBox ID="txttime" runat="server" CssClass="TextBox">' Width="60px" Enabled="false" ></asp:TextBox> <ajax:MaskedEditExtender ID="ajaxtime" runat="server" AcceptNegative="None" Enabled="True" TargetControlID="txttime" MaskType="Time" AcceptAMPM="true" ask="99:99" CultureName="en-CA" AutoComplete="true" AutoCompleteValue="99:00"/> 在上面的代码中，在文本框中删除或退格键可以在 Firefox 和 IE 中工作，但在 Chrome 中不起作用。 请帮忙.. 有什么建议吗...?? Google Chrome 在控件方面存在更多问题。您可以具体检查您正在运行的版本以及它需要什么 ascii 值？当您尝试使用按键时。还有一件事，检查你的文本框标记是否正确？ 这似乎是 MaskedEditExtender 中的一个错误。请参阅这个 CodePlex 问题。 您可以尝试更新到最新版本，它指出该问题已在 2013 年 4 月的版本中修复。 或者，这里有一个小修复可用。 添加以下代码，它应该可以正常工作。谢谢。 protected void Page_Init(object sender, EventArgs e) { try { if (!ClientScript.IsStartupScriptRegistered(GetType(), "MaskedEditFix")) { ClientScript.RegisterStartupScript(GetType(), "MaskedEditFix", String.Format("<script type='text/javascript' src='{0}'></script>", Page.ResolveUrl("../Javascript/MaskedEditFix.js"))); } } catch (Exception ex) { throw ex; } } 下面的代码工作正常，将 TargetControlID="txtPhone" 替换为您的文本字段 ID。 <ajax:MaskedEditExtender ID="textPhone_MaskedEditExtender" MaskType="None" runat="server" CultureAMPMPlaceholder="" CultureCurrencySymbolPlaceholder="" CultureDateFormat="" CultureDatePlaceholder="" CultureDecimalPlaceholder="" CultureThousandsPlaceholder="" CultureTimePlaceholder="" Enabled="True" TargetControlID="txtPhone" Mask="(999)-999-9999" AutoComplete="true" ClearMaskOnLostFocus="false" CultureName="en-US"> </ajax:MaskedEditExtender>

将 Uint8Array 保存到二进制文件

我正在开发一个网络应用程序，它可以打开二进制文件并允许对其进行编辑。 这个过程基本上就是ondrop -> dataTransfer.files[0] -> FileReader -> Uint8Array 本质上，我想要...

在 Chrome/Safari 中提交两次表单

我正在寻求执行基本的表单发布，但以下内容在 Chrome 和 Safari 中提交到服务器两次（但在 Firefox 中的行为符合预期）： 我正在寻求执行基本的表单发布，但以下内容在 Chrome 和 Safari 中提交到服务器两次（但在 Firefox 中的行为符合预期）： <form id="create-deck-form" action="/decks/create" method="post"> <fieldset> <legend>Create new deck</legend> <label for="deck-name-field">Name</label> <input id="deck-name-field" name="deck-name-field" type="text" value="" maxlength="140" /> <label for="tag-field">Tags</label> <input id="tag-field" name="tag-field" type="text" value="" maxlength="140" /> <input class="add-button" type="submit" value="Create" /> </fieldset> </form> 我想在提交之前使用 onsubmit 属性对字段进行验证，但是无论返回值是 true，表单都会提交两次。 我试图将 jQuery 处理程序绑定到表单，但在这里，默认行为不会被阻止，表单会提交两次，例如： <script type="text/javascript"> $(document).ready(function() { $("#create-deck-form").submit(function(event){ if($("#deck-name-field").val() == "") { event.preventDefault(); alert("deck name required"); } }); }); </script> 虽然我认为对于新人来说这里有一些明显的错误，但我很困惑为什么提交（无论是否经过验证）都会在 Chrome 和 Safari 中向服务器发出重复的帖子。如果有任何见解，我将不胜感激。 这个问题实际上与 Facebox 有关（http://defunkt.github.com/facebox/）。 Facebox 初始化会在页面加载后引发第二组请求。因此，如果您发布到 /myaction/create，Facebox 将启动第二组请求，并将基本 URL 设置为 /myaction/create。解决方法是在发布后重定向到处理 get 请求的 URL，这样您就不会执行两次发布。非常感谢您的帮助。 我不是100%确定，但请尝试这个： <script type="text/javascript"> $(document).ready(function() { $("#create-deck-form").submit(function(event){ if(!$("#deck-name-field").val().length) { return false; } }); }); </script> 如果这不起作用，请看看 for(e in $("#create-deck-form").data('events')) alert(e); 这将提醒您所有与您的 form 相关的事件。也许还有更多的事件处理程序？否则也警报/日志 $("#create-deck-form").attr('onclick') 和 $("#create-deck-form").attr('onsubmit') 以防万一。 您可以在收到警报后尝试 return false; 并删除 event.preventDefault();。也许您还需要在 else 子句中使用 return true;。我相信我在某个地方有这样的工作。 好吧，不确定这会有多大帮助，但尝试删除提交输入并通过 JavaScript 提交表单。例如 <input id="submit-button" class="add-button" type="button" value="Create" /> 那么你可以尝试一下，而不是听 onsubmit $('#submit-button').click(function(evt) { if(validationSuccess(...)) { $("#create-deck-form").submit(); } else { //display whatever } }); 现在你的方法也应该可以工作......但是这样你就可以调试你的问题所在......这应该只提交一次......祝你好运！ 浏览器（例如 Safari 桌面版）将表单提交事件屏蔽为点击事件。因此，即使您在表单的提交事件上设置了 evt.preventDefault() 或 evt.stopPropagation()，您也可能会遇到提交表单的问题。 一个很好的例子和场景是通过按 ENTER 键提交表单。在这种情况下，Safari 会发出一个点击事件，可能会导致其他事件侦听器触发等。 解决方案： 您可以像这样监听那些屏蔽的提交事件： $('[type="submit"]', $('form')).on('click', function(evt) { ... } 现在你只想捕获那些实际上被屏蔽的事件；您不想捕获提交按钮上的鼠标点击。 因此你必须区分真正的点击和那些流氓点击。您可以通过检查 evt.originalEvent 对象来做到这一点。 如果你能找到一个pointerId（Chrome）键，那么恶意点击就会带有pointerId = -1（某个负值）；如果您没有pointerId（例如Safari），您可以查找evt.originalEvent.detail键（Safari），如果出现恶意点击，该键的值为0（零）。 完整示例 $('[type="submit"]', $('form')).on('click', function(evt) { let do_not_submit = false // chrome if (typeof evt.originalEvent.pointerId !== 'undefined' && evt.originalEvent.pointerId < 0) { do_not_submit = true } // safari if (!do_not_submit && typeof evt.originalEvent.detail !== 'undefined' && evt.originalEvent.detail === 0) { do_not_submit = true } if (do_not_submit) { evt.preventDefault() evt.stopPropagation() return } // no worries ... // submitting ... }

javascript array.sort 具有未定义的值

Array.prototype.sort 如何处理数组中未定义的值？ var 数组 = [1,未定义,2,未定义,3,未定义,4]; var array2 = []; 数组2[0] = 1；数组2[2] = 2；数组2[4] = 3；数组2[6] = 4； W...