标签: cross-browser

我有用于构建自定义复选框的代码HTML。CSS我相信我的代码具有正确的网络工具包，但它似乎不适用于 FireFox。

这是代码：

超文本标记语言

 <input type='checkbox' style="float: left" class='regular-checkbox big-checkbox'
     checked='checked' id='product-45-45' name='product_id_page-0[45-45]'
     value='45-45' data-first_price="11.99" data-second_price="" data-paysys="" />

CSS

.regular-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fafafa;
    border: 1px solid #cacece;
    box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0),inset 0 -15px 10px -12px rgba(0,0,0,0);
    padding: 9px;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    display: inline-block;
    position: relative;
}
.regular-checkbox:active,
.regular-checkbox:checked:active …

我写了一个js代码来触发地图区域上的mouseenter和mouseleave。它在 Chrome 和 Firefox 中运行良好，但在 Safari、Edge 和 IE 中则不行。

我实在不明白为什么。

这是我的 JavaScript：

var areas = document.getElementsByTagName('area');

// set event listener for all objects
for (var i = 0; i < areas.length; i++) {
    areas[i].addEventListener('mouseenter', inArea);
    areas[i].addEventListener('mouseleave', outArea);
}

// On mouse enter
function inArea() {
    console.log('mouseenter');
}

// On mouse leave
function outArea() {
    console.log('mouseleave');
}

你可以在这里玩它：https ://codepen.io/fantomette/pen/pVdLwM

这段代码有什么问题？或者也许您知道另一种方法？

谢谢。

我正在使用 Electron 尝试打开 URL。我知道我可以做类似的事情

const { shell } = require('electron')

shell.openExternal('https://github.com')

在默认浏览器中打开 URL。

有没有办法在非默认浏览器中执行此操作？例如，如果我想打开指向 Edge Store 的链接，但我的默认浏览器是 Chrome，我可以执行以下操作吗

const { shell } = require('electron')

shell.openExternal('microsoft-edge:https://github.com')

Firefox 和 Chrome 中模糊效果的渲染存在差异。

对于像 Chrome 和 Firefox 这样的小值filter: blur(30px)，会产生几乎相同的高斯模糊。

但对于像这些浏览器这样的大值来说，filter: blur(200px)有一个非常明显的差异。

以下是 4 张图片中的示例：（左为 FF，右为 Chrome）

（显示的网站是https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function我在开发工具中将滑块的最大数量编辑为 200）

0px 模糊：相同

30px 模糊：相同

100px 模糊：相同

200px 模糊：不同

看起来 Firefox 只在原始尺寸内应用模糊，而 Chrome 则扩大了模糊应用区域，并从外到内泄漏了“白色”。但这种观察可能是错误的。

我的问题是“如何在跨浏览器中获得一致的模糊效果？”

是否有人花了几个小时才能在所有浏览器中正确呈现其应用程序的UI？

当简单的样式倾向于在一个浏览器中工作而不是其他浏览器时,你如何解决这种挫败感？当你发明黑客来处理它时(在某些情况下也不会发生),只有在浪费你的时间之后？

我将等待所有浏览器都遵循相同标准的那一天,直到那时我(和其他人)可以从经常这样做的人那里得到一些建议.

是否有任何jQuery 1.3动画过渡在Firefox 3和IE7中都有效？

我有一个包含多个表行(25或更多)的表,其中一些行开始隐藏(这些行都共享一个公共类;在本例中,它是".hidden").在表头中是一个"显示更多"链接,它通过.click()绑定到一个显示隐藏行的函数,然后将"显示更多"更改为"显示更少"并将.click()更改为相反的功能.

在每个.click()函数中,都有一行代码

$(this).parents("tbody").children("tr.hidden").show();

用.show()替换为.hide()替换"Show less"函数.

但是,如果我尝试用.fadeIn()/ .fadeOut()替换.show()/.hide(),IE会将它呈现为与.show()/.hide()几乎完全相同,除非它需要一分钟.hide()生效.那里没有真正的动画.IE中的劣势,虽然它的Firefox很棒.

如果我尝试使用.slideDown()/ .slideUp(),它在IE中同样是janky,几乎与.show()/.hide()完全相同,只是在完成转换后有一个奇怪的脉冲效果.Firefox 3也扼杀了它,显然只是忘记了所显示的表行的行宽并使整个事情看起来很糟糕.

那么动画只是在IE7中吮吸？在这种情况下,有没有办法在两种浏览器中都能实现优雅平滑的过渡？

一些背景资料

我们针对两个最受欢迎的标准兼容浏览器(Firefox 3和Safari 3)开发了应用程序,然后对IE 7进行了必要的修复

我们使用了HTML 4.01 Strict DOCTYPE

根据Urchin在简短的AdWords广告系列中的统计数据,Firefox 3,Safari 3和IE 7将覆盖85%的目标受众群体

展望未来,我们显然计划支持Chrome和IE 8

财务限制妨碍了进一步的测试,我们唯一的另一个选择是根本不发布.

那么释放和被诅咒会更好吗？

经过一个小时的狩猎和啄食之后,我觉得我可能会向世界贡献一个可怕的事实,即你的javascript无法在IE中工作的唯一原因是因为你认为你可以在它上面拉一个快速的使用你喜欢的xHTML快捷方式.

我已经阅读了dtd,我真的找不到任何IE的基础如此持久性.

当我从javascript使用innerHTML时,浏览器(至少Safari和Firefox)似乎用它们的命名实体替换某些字符和数字实体.

字符\xa0(非中断空格)被替换为 , <(小于)被替换为<.但是例如变形金刚ü不会被取代ü.

我没有找到任何有关此行为的文档.

一个简单的演示:

<h2 id="withoutnbsp">This does not use en be es pe (uses the \xa0 character)</h2>
<script>alert(document.getElementById("withoutnbsp").innerHTML);</script>

可以在这里找到更精细的演示:

http://gist.github.com/89434

您可以使用gist页面上的"raw"链接在浏览器中查看.

我需要确切地知道innerHTML替换了哪些字符.任何帮助表示赞赏.谢谢.