标签: cross-browser

<hr>我遇到了 x 浏览器的问题，其中的 a的样式<span>。在 FF 上，线条高 2px，符合 CSS 中的预期和声明。然而，当我在 Safari、Chrome 或 IE9 上查看时，这条线看起来更粗。事实上，当<hr>使用 Safari 的 Firebug 等效项检查 时，它会将其视为4px。

这是 CSS 属性的问题吗border-radius？在 Firefox 上不明显？我希望它看起来像我构建标记和 CSS 的方式以及它在 Firefox 中的显示方式，但我不确定标记有什么问题。

这是它在 Firefox 上的样子：

这是它在 Safari（和 IE9/Chrome）上的样子：

我的标记：

<span id="course_divider"><hr></span>

我的CSS：

#course_divider {
    left: 0;
    padding-top: 40px;
    position: absolute;
    top: 27px;
    width: 25px;
}

#course_divider hr {
    background-color: #000000;
    border: 1px solid black;
    border-radius: 7px 7px 7px 7px;
    height: 2px;
}

我希望能够在从字符串创建新日期时输入英国格式的日期，这将适用于所有现代浏览器，但主要是 FireFox 和 IE。

new Date('24/06/2014') // Gives 06/24/2014

因为我想使用它设置一个 jquery datepicker。

是否有可能获得

new Date()

解释作为字符串传递的英国日期？

new Date('24/06/2014').toLocaleString("en-GB") // Gives 06/12/2015

new Date('06/24/2014').toLocaleString("en-GB") // Gives 24/06/2014

真正的问题是当我使用日期选择器时，我指定了英国日期格式，一切都很好......

$("#outOfStockFromDate").datepicker({
    dateFormat: 'dd/mm/yy',
changeMonth: true,
numberOfMonths: 3,
onClose: function (selectedDate) {
    $("#to").datepicker("option", "minDate", selectedDate);
}});

直到我尝试使用这种英国日期格式重新填充日期选择器，例如...

$("#outOfStockFromDate").datepicker("setDate", testDate);

就好像字符串 'testDate' 必须是美国格式... grrr

编辑：我意识到这个问题有两部分，第一部分处理日期选择器；我在尝试 setDate 的同时初始化它是我的愚蠢错误（这个错误使我沿着 Date() 路线走下去）。现在我已经初始化并正确更改它接受英国格式日期！

第二部分是的，javascript 中关于格式化日期的日期功能（现在我知道）是出了名的缺乏......但是当我解决了我最初的问题时，我不关心这个...... PS我最终分裂并重建了美国日期格式（字符串）中的日期，然后使用新日期（USDateFormattedString）......然后我意识到！

所以最后，基本上我的代码在语法上是正确的，但在执行时却不是。

感谢所有回答的人！+1

有没有办法在不使用Flexbox. 我知道它是一个很棒的工具，但不幸的是它不适用于 IE 9 或 10。我希望链接内的文本显示在图像旁边。JSFiddle 显示了工作代码，但是使用 FlexBox，如何在不使用 Flexbox 的情况下实现这一点？

代码：

<display:setProperty name="paging.banner.full" value='<span class="pagelinks"> <a href="{1}"> <img src="../images/integration/FastLeft.jpg"/> </a> <a href="{2}"> <img src="../images/integration/SlowLeft.jpg"/> </a> | Page {5} of {6} | <a href="{3}">  <img src="../images/integration/SlowRight.jpg"/> </a> <a href="{4}"> <img src="../images/integration/FastRight.jpg"/> </a></span>'/>
        <display:setProperty name="paging.banner.first" value='<span class="pagelinks"> <img src="../images/integration/FastLeft.jpg"/> <img src="../images/integration/SlowLeft.jpg"/> | Page {5} of {6} | <a href="{3}"> <img src="../images/integration/SlowRight.jpg"/> </a> <a href="{4}"> <img src="../images/integration/FastRight.jpg"/> </a></span>'/>
        <display:setProperty name="paging.banner.last" value='<span class="pagelinks"> <a href="{1}"> <img src="../images/integration/FastLeft.jpg"/> </a> <a href="{2}"> <img src="../images/integration/SlowLeft.jpg"/> …

我在输出组件列表然后重新排序它们时遇到了问题。这适用于我的桌面 chrome，但不适用于移动 safari 或 chrome。有人遇到过这种情况吗？

有关更多信息，我有一个管理实体数组的 vuex 模块，我提交此更改以重新排序它们：

state.entities.sort((a, b) => parseInt(a.initiative) < parseInt(b.initiative))

然后在一个组件中，我根据这个实体数组输出标记：

<entity v-if="showEntityList" v-for="entity in entities" :key="entity.id" :entity="entity"/>

我正在尝试向我的项目添加拖放功能，并为此使用slip.js。

为了装饰光标，我添加class="draggable"到每个可拖动的<tr>。这个类的 CSS 是：

.draggable:active { 
  cursor: -webkit-grabbing;
  cursor:    -moz-grabbing;
  cursor:         grabbing;
}

拖放工作正常，但在 Safari 中，当我拖动表格行时，光标看起来像cursor: text

在 Chrome 中，光标正常

有趣的是，当我只需单击并按住而不拖动光标时，在 Safari 中也可以

对于那些不知道的人来说，扩展语法是将不确定数量的参数传递到函数中的一种便捷方法，类似于此示例：

  function debug (mode, string, ...params) {
    if (debug_enabled && window.console) {
      console.log(mode+": "+string+"(",...params,");");
    }
  }

不幸的是，Internet Explorer 和其他旧版本的浏览器不支持此功能。这里有关于扩展语法和浏览器支持的更多信息。

我没有将扩展语法用于任何关键的事情，但是将其出现在网站上会导致 JavaScript 在那些较旧的浏览器上完全失败。

一种选择是我可以为旧版浏览器提供单独的脚本版本，然后根据用户代理传递此脚本。但是，我想避免这种情况，因为维护这两个文件和作为一般浏览器都很痛苦如果使用其他功能，这可能会变得更加复杂。此外，还存在对用户浏览器进行错误分类的风险。

另一种选择是找到一种方法来完全避免在所有功能中使用扩展语法。然而，这可能会增加开发时间并创建更难以理解和使用的代码。这似乎不是一个避免使用新功能的好策略，因为只有极少数的观众无法使用它们。

我希望有人可能拥有或知道一种聪明的方法来检测扩展语法的支持，并在用户浏览器不支持扩展语法的情况下排除部分脚本。通过这种方式，我可以为使用旧版浏览器的用户提供仍然可用的体验，并且只错过一些功能。我一直在网上搜索，但找不到任何执行此操作的代码。我认为这可能是不可能的，因为它是核心语法修改，但是我也找不到任何东西来完全确认这种情况。

在我的网站上，我在菜单中使用引导手风琴。我能够在谷歌浏览器中按需要制作它，但是在 safari 和我的 iPhone 上，它向我显示了错误的颜色和样式。这是一个已知的错误还是我做错了什么？（网站：http : //ketyi.com）铬：

苹果浏览器：

这是CSS：

     <div class="card">
        <div class="heading" role="tab">
            <a class="collapsed" type="button" data-toggle="collapse" data-target="#collapse-{{ mainCategory.name }}"
               aria-expanded="{% if (categoryParentId is not null) and (categoryParentId == mainCategory.id) %}true{% else %}false{% endif %}" aria-controls="collapse-{{ mainCategory.name }}">
                {{ mainCategory.name }}
            </a>
        </div>
        <div id="collapse-{{ mainCategory.name }}" class="collapse {% if categoryParentId == mainCategory.id %}show{% endif %}" aria-labelledby="{{ mainCategory.name }}" data-parent="#categories">
            {% for category in mainCategory.children %}
                <div class="card-body">
                    <a {% if categorySlug == category.slug %}class="active"{% endif %} …

我想知道cypress是否支持多种浏览器类型和版本来实现跨浏览器测试。正如他们在文档 [1] 中提到的，他们确实支持 Chrome 系列浏览器（包括 Electron）和对 Firefox 浏览器的 beta 支持。

但是它们是否支持 Internet Explorer、safari 和其他版本的 chrome 和 Firefox？如果没有，有没有其他方法可以实现这种功能（外部插件或其他东西）？我已经尝试过 Applitools Ultrafast Grid。[2] 但是他们的配置 (APPLITOOLS_API_KEY) 仅针对 windows 和 mac OS 提及。我正在 Ubuntu 操作系统上实施该项目。

并且跨浏览器测试也应该在无头模式下运行。

[1] https://docs.cypress.io/guides/guides/cross-browser-testing.html#Continuous-Integration-Strategies

[2] https://applitools.com/blog/cypress-cross-browser-testing?utm_referrer=https://www.google.com/

我有一个奇怪的跨浏览器闪存问题.请参阅下面的屏幕截图.我以前见过这种行为,但我不记得原因是什么.有人可以告诉我为什么会发生这种情况,我可以采取哪些措施来解决这个问题？

我相信这对本网站的所有读者都很容易,但这种问题对我来说很难.

我有一个网站http://www.areacatracha.com,在Internet Explorer中没有正确显示.其他浏览器正常显示.

谁能帮我？

有关如何开始修复这些跨浏览器兼容性问题的任何建议？