cross-browser 相关问题

jQuery $('body > header').on('webkitTransitionEnd oTransitionEnd msTransitionEndtransitionend', function(event) { if (event.target && event.originalEvent.

javascript jquery cross-browser transition transitionend

回答 1 投票 0

当 CSS 简写与各个简写组成部分结合使用时，正确的浏览器行为是什么？

考虑以下代码。一个{ 文字装饰颜色：红色； } .哎呀{ 文本装饰：下划线； } 代码 { 边框：1px实心rgb（0 0 0 / 0.2）；内边距：0.5em； } 这个... 考虑以下代码。 a { text-decoration-color: red; } .oops{ text-decoration: underline; } code { border: 1px solid rgb(0 0 0 / 0.2); padding-inline: 0.5em; } <p>This <a href='#'>link</a> is underlined in red with <code>text-decoration-color: red</code>.</p> <p>This <a href='#' class="oops">link</a> also has <code>text-decoration-color: red</code> applied, but is not underlined in red in Chrome or Firefox as it has <code>text-decoration: underline</code> applied, which is a short hand for <ul> <li>text-decoration-color</li> <li>text-decoration-line</li> <li>text-decoration-style</li> <li>text-decoration-thickness</li> </ul></p> 如果您在 Chrome 或 Firefox 中查看此链接，则第二个链接不会带有红色下划线，因为 text-decoration-color 被 text-decoration-shorthand 覆盖（即使颜色未指定为其中的一部分）。在 Safari 中，它用红色下划线表示，因为 text-decoration-color 会覆盖简写。可以通过将 text-decoration: underline 更改为 text-decoration-line: underline 轻松解决差异，但我想知道......根据规范，这是正确的行为？正如我所怀疑的那样，但在问题评论中得到了证实（由@TemaniAfif，并由@C3Roe链接）省略属性：未指定的值将设置为其初始值。这意味着它会覆盖之前设置的值。来源通过使用 text-decoration（简写），您可以有效地将每个组成属性设置为 initial。请参阅下面的示例： .second 和 .third 效果相同 .fourth 具有所需的效果（根据您的示例），因为它不会覆盖之前设置的值 a { text-decoration-color: red; } .second { text-decoration: underline; } .third { text-decoration-color: initial; text-decoration-line: underline; text-decoration-style: initial; text-decoration-thickness: initial; } .fourth { text-decoration-line: underline; } <a href='#'>First</a> </br> <a href='#' class="second">Second</a> </br> <a href='#' class="third">Third</a> </br> <a href='#' class="fourth">Fourth</a> 至于 Safari... 从我在 Safari Elements 面板中看到的情况来看，当使用属性 text-decoration 的简写时，Safari 会尝试将该属性拆分为其组成属性。

css google-chrome firefox safari cross-browser

回答 1 投票 0

HTML5 音频无法在 Firefox 上运行

在 Chrome 上运行良好。此外，我使用的是 ogg 文件，所以这不是问题。我正在运行最新版本 9.0.1。 Chrome 和 Firefox 应该都支持 HTML5 音频。在 Chrome 上运行良好。此外，我使用的是 ogg 文件，所以这不是问题。我正在运行最新版本 9.0.1。 Chrome 和 Firefox 应该都支持 HTML5 音频。 <audio id="audio"> <source src="audio/Your_Hand_In_Mine.ogg" type="audio/ogg" /> <source src="audio/Your_Hand_In_Mine.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> 默认情况下，大多数服务器（包括 GoDaddy 使用的服务器）不为 OGG 文件提供适当的 MIME 类型。在这种情况下，如果您希望 HTML5 音频播放器在 Firefox 中正常工作，您需要为 OGG 文件设置适当的 MIME 类型。因此，对于 Apache 服务器，您需要将以下内容添加到 .htaccess 文件中： AddType audio/ogg .oga AddType video/ogg .ogv AddType application/ogg .ogg 显然，如果未提供 MIME 类型，其他浏览器将根据文件扩展名猜测 MIME 类型。如果您想了解更多信息，请查看 Mozilla 页面上的为 Ogg 媒体配置服务器。 http://support.mozilla.org/en-US/questions/758978 我发现这对我来说很有用，因为我有正确的哑剧类型，但仍然没有运气：您无法在 Firefox 中播放带有此类代码的 MP3 文件。请参阅 https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements <audio controls="controls"> <source src="http://www.kevinroseworld.com/Music/OkaVanga/OkaVanga/BajeLaCalle.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> 您必须使用普通的对象元素才能在 Firefox 中播放该歌曲。您可以将这些作为示例： <object data="music.mp3" type="application/x-mplayer2" width="xxx" height="xxx"><param name="filename" value="music.mp3"></object> <embed type="application/x-mplayer2" src="file.mp3" height="xxx" width="xxx" > 尝试使用一些音频库来处理 HTML5 音频。因为库处理有关 html5 音频的各种问题。如果浏览器不支持 HTML5 音频，某些库会自动回退 Flash 音频。最好的图书馆之一是 http://www.schillmania.com/projects/soundmanager2/ 解决方案是将 ogg 文件正确转换为 mp3，反之亦然。当我将 .ogg 文件重命名为 mp3 时，编码是错误的，我傻了。我使用名为“Audacity”和“Switch”的软件来完成此任务。

html firefox audio cross-browser

回答 4 投票 0

跨浏览器截屏最好的服务是什么？

我有一个网站，想要监控各种浏览器（主要是 Internet Explorer）中的显示问题。我知道 browsercam.com 和 broswershots.org 提供此服务。有没有可以...

cross-browser

回答 6 投票 0

内容可编辑，在文本末尾设置插入符号（跨浏览器）

输出：嘿怎么了？在 Chrome 中输出： <div id="content" contenteditable="true" style="border:1px solid #000;width:500px;height:40px;"> hey <div>what's up?</div> <div> <button id="insert_caret"></button> 我相信FF它看起来像这样： hey <br /> what's up? 并在IE中： hey <p>what's up?</p> 不幸的是，没有好的方法可以让每个浏览器插入 <br /> 而不是 div 或 p 标签，或者至少我在网上找不到任何东西。无论如何，我现在想做的是，当我点击按钮时，我希望将插入符号设置在文本末尾，所以它应该看起来像这样： hey what's up?| 有什么方法可以做到这一点，使其适用于所有浏览器？示例： $(document).ready(function() { $('#insert_caret').click(function() { var ele = $('#content'); var length = ele.html().length; ele.focus(); //set caret -> end pos } } 以下功能将在所有主要浏览器中执行此操作： function placeCaretAtEnd(el) { el.focus(); if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != "undefined") { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(false); textRange.select(); } } placeCaretAtEnd( document.querySelector('p') ); p{ padding:.5em; border:1px solid black; } <p contentEditable>foo bar </p> 将插入符号放在开头几乎是相同的：它只需要将传递到调用中的布尔值更改为collapse()。下面是一个创建将插入符号放在开头和结尾的函数的示例： function createCaretPlacer(atStart) { return function(el) { el.focus(); if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { var range = document.createRange(); range.selectNodeContents(el); range.collapse(atStart); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != "undefined") { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(atStart); textRange.select(); } }; } var placeCaretAtStart = createCaretPlacer(true); var placeCaretAtEnd = createCaretPlacer(false); 不幸的是，蒂姆的出色答案对我来说只适用于放在最后，要放在开始时我必须稍微修改它。 function setCaret(target, isStart) { const range = document.createRange(); const sel = window.getSelection(); if (isStart) { const newText = document.createTextNode(''); target.appendChild(newText); range.setStart(target.childNodes[0], 0); } else { range.selectNodeContents(target); } range.collapse(isStart); sel.removeAllRanges(); sel.addRange(range); target.focus(); target.select(); } 不确定是否确实需要 focus() 和 select()。这个（实时）示例显示了一个简短的简单函数，setCaretAtStartEnd，它有两个参数；用于放置插入符号的（可编辑）节点和一个指示放置位置的布尔值（节点的开始或结束） const editableElm = document.querySelector('[contenteditable]'); document.querySelectorAll('button').forEach((elm, idx) => elm.addEventListener('click', () => { editableElm.focus() setCaretAtStartEnd(editableElm, idx) }) ) function setCaretAtStartEnd( node, atEnd ){ const sel = document.getSelection(); node = node.firstChild; if( sel.rangeCount ){ ['Start', 'End'].forEach(pos => sel.getRangeAt(0)["set" + pos](node, atEnd ? node.length : 0) ) } } [contenteditable]{ padding:5px; border:1px solid; } <h1 contenteditable>Place the caret anywhere</h1> <br> <button>Move caret to start</button> <button>Move caret to end</button> 如果您使用的是谷歌闭包编译器，您可以执行以下操作（从 Tim 的答案中进行了一些简化）： function placeCaretAtEnd(el) { el.focus(); range = goog.dom.Range.createFromNodeContents(el); range.collapse(false); range.select(); } ClojureScript 中也有同样的事情： (defn place-caret-at-end [el] (.focus el) (doto (.createFromNodeContents goog.dom.Range el) (.collapse false) .select)) 我已经在 Chrome、Safari 和 FireFox 中测试过这个，不确定 IE...

javascript html cross-browser contenteditable caret

回答 4 投票 0

带有子网格和溢出的 CSS 网格在 Safari 上会中断，但适用于所有其他浏览器

我正在构建一个带有子网格的嵌套CSS网格，但是当在子网格上使用overflow:auto时，整个事情在Safari上都会中断。在 Chrome/FireFox 上它工作得很好，但在 Safari 上它就坏了，对于某些人来说......

html css grid cross-browser subgrid

回答 2 投票 0

如何判断是否支持某个权限的navigator.permissions.query

我有以下代码： if (navigator.permissions && navigator.permissions.query) { navigator.permissions.query({ name: '剪贴板写入' }).then(函数(结果){ 如果（结果。

javascript firefox permissions cross-browser navigator

回答 2 投票 0

缓存背景图片

有没有办法“缓存”背景图片。例如.. 背景图片为3x3px，设置如下：身体 { 背景：#000 url(bg.png); } 当刷新发生时，背景图像“fl...