cross-browser 相关问题

我有两层菜单 - 一个 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; }

jquery css drop-down-menu cross-browser html-lists

回答 4 投票 0

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

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

c# cross-browser specflow playwright-dotnet

回答 1 投票 0

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

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

javascript cross-browser video-recording web-mediarecorder

回答 1 投票 0

来自输入元素的文件数据

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

javascript cross-browser

回答 2 投票 0

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

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

internet-explorer cross-browser include indexof

回答 2 投票 0

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

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

cross-browser filenames icalendar

回答 1 投票 0

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

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

css browser fonts cross-browser

回答 2 投票 0

safari css 粗体字体太粗体

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

css fonts cross-browser

回答 3 投票 0

粗体的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

css google-chrome browser fonts cross-browser

回答 2 投票 0

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

我有一个表格，单元格内有两个 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>

css flexbox cross-browser

回答 1 投票 0

浏览器中 ReadableStream.from 的 Polyfill？

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

javascript stream cross-browser polyfills

回答 1 投票 0

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

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

css cross-browser subgrid

回答 1 投票 0

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

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