开发一个全新产品的好处之一是确定支持的浏览器的界限，而不必担心支持旧版本浏览器的挑战。在Asana，我们不想在拥有出色的用户体验上妥协，因此我们决定只支持最现代的浏览器，这些浏览器可以满足我们复杂的Javascript客户端的需求，最新版本的Chrome、Safari和Firefox。列表中明显缺失的浏览器是IE，它在开发人员兼容性和友好性方面一直是个异类。放弃它为我们节省了很多时间和资源。InternetExplorer10代表着IE浏览器产品线的一次飞跃，爱回扣返现网，其性能、兼容性和开发人员支持都显著提高。事实上，这种差异已经足够大了，我们的许多客户都想要它，所以我们决定是时候让Asana成长起来，并为Internet Explorer 10实现一流的支持了。我们很自豪地报告说，实施是成功的，IE10用户现在可以使用Asana了！在这段旅程中，我们面临着许多挑战，第一个挑战是我们完全不知道这会有多少工作量！所以，淘客网，对于其他想跨出这一步的团队来说，下面是我们的经验，让体位在IE上发挥作用。舒适的发展环境我们是一家Mac和Linux商店，这意味着如果没有特殊的设置，我们甚至不能运行Internet Explorer。但是要求每个开发人员都有一台单独的Windows笔记本电脑是很麻烦的，而且事实证明，习惯硬件是它自己的学习曲线。所以，我们寻找一个更友好的解决方案。我们买了一些高规格的macminis，并在上面安装了vmwarefusion，运行windows7。结果是，我们团队中的每个开发人员都可以在一台机器上共享屏幕，基本上让IE在Mac上的窗口中运行。虽然有点滞后，数据中心解决方案，但感觉还不错。这也意味着，如果其他人在体位仪上需要测试的东西，他们可以只是屏幕共享相同的方式，不需要传递笔记本电脑。如果我们缩小了对Windows机器的需求，我们总能将Mac mini重新用于其他用途。学习工具IE10的"F12开发工具"实际上是一个合理的调试工具，在功能和可用性方面接近于去年的Firebug。来自相当惊人的Chrome开发工具，需要一些时间来适应。对于初学者来说，F12不会动态地更新它自己的DOM表示形式，即使在添加和删除元素时也是如此。与大多数AJAX应用程序一样，Asana在加载了初始HTML之后添加了DOM元素，而元素检查并不能处理这些动态加载的元素。HTML刷新按钮。解决这个问题的方法是在生成所有元素后单击F12的刷新按钮（save按钮旁边）。这使得在hover时很难处理添加到DOM中的元素，因此有必要确保我们能够在应用程序中冻结该状态。此外，在JS中添加调试器语句不足以暂停JS的执行，还必须单击"脚本"选项卡中的"启动调试"。注意这将刷新页面！IE的一个值得欢迎的特性是一个好的、可靠的堆栈跟踪，这在以前的版本中是缺失的。因此，现在即使我们遇到不熟悉的异常或错误，我们也可以跟踪它们发生的源代码。通过将"top:0"规则强行塞入现有的"position:absolute"规则来添加它。在调试CSS时，我们发现无法以直观的方式使用UI向元素添加新的CSS规则。但我们确实发现了一个窍门：我们可以编辑现有规则的值并向其附加新规则。不过，发发淘客助手，为了让规则显示在UI中，我们不得不再次刷新HTML。虽然这些怪癖让人恼火，但好消息是，即将推出的IE11已经显著改进了开发工具，在质量上与Chrome更接近。我们期待着能够在IE的未来开发中更多地使用它们。应对更严格的JS标准在支持标准方面，IE10比许多浏览器更加勤奋，以至于它不支持几个不推荐使用的标准。例如，IE10+不支持defineGetter和defineSetter。这种类型的问题通常很容易解决，并且可以很好地强制从代码库中删除不推荐使用的代码。以下是我们如何绕过这个特殊的案例，而不是：视图.原型.\u defineGetter_uu（"browser"，function（）{返回此项。\u ui_上下文.browser;});我们使用：对象定义属性(视图.原型，"browser"，{get:function（）{返回此项。\u ui_上下文.browser; }});我们也一直在使用函数名当传递闭包来帮助调试时。IE10不支持此非标准属性。为了解决这个问题，我们使用了：函数字符串（）.match（/^函数*（[^s（]+）/）踮着脚尖绕过不在DOM中的元素在处理不在DOM中的节点时，Chrome让我们比IE更容易摆脱麻烦。例如，以下代码在Chrome中执行得很好：变量div=文档.createElement（"div"）分割模糊（）；//有没有Div.getBoundingClientRect（）；//返回全零的ClientRectIE在这两种情况下都抛出了神秘的异常："对方法或属性访问的意外调用"和"未指定的错误"。检查元素是否实际在DOM中以避免此崩溃很容易完成document.documentElement.contains（element）但尽管如此，我们仍然认为API在这里更宽容会更好。Flexbox公司？F@$盒子！我们最近开始使用flexbox布局模型，它允许非常强大的动态定心和缩放。Flexbox还不是标准的，因此它需要特定于浏览器的css，例如：-ms flex direction:column；通过在SASS或更少的CSS管理器中使用mixin（如果您不使用其中的一个，您应该使用），这意味着我们可以在一个地方修复所有东西。作为参考，下面是我们必须添加的flex box映射：显示：-webkit-box；显示：-ms-flexbox；-webkit-box-orientation:vertical；-ms-flex方向：列；-webkit-box-flex:1；-webkit-box-align:$align；-ms-flex-align:$align；-webkit-box-pack:$pack；-ms-flex-pack:$pack；IE对flexbox有点友好，但它有怪癖。为了一件事，我们发现了一些错误，当子元素被添加或从flexbox容器中移除时。有时我会把高度降到零而不画出整个高度flexbox.其他有时候，在一些布局上，IE似乎需要在更多的地方使用更多的灵活规则（有时在其他浏览器中应用的那些相同的灵活规则会导致不希望的或相反的行为）。这是一个问题，因为浏览器有不同的实现，而不是一个比另一个更好。事实上，三种主要浏览器的行为都是不同的，而且这些差异在我们能找到的任何地方都没有清楚地记录下来，这可能会让使用这个功能变得恼火，尽管它有这么多答应。注意，各种CSS功能将与IE11更加紧密地结合在一起。查看其Flexbox更改。CSS中特定于浏览器的前缀许多CSS3规则需要特定于浏览器的前缀。对于许多规则，IE10实际上支持这些标准，例如box shadow、animation和@keyframes。我们必须审计大量的CSS，以确保我们也包括了每个规则的标准名称（而不仅仅是它的-webkit-and-moz-prefixed-names）或其-ms-prefix，而IE10仍然不支持这些标准。这是另一个使用CSS管理器的地方。无缝上传文件为了获得上传文件的流畅体验，我们希望跳过打开文件选择器并提交表单的显式单击。所以我们做了以下工作：当用户选择"从计算机附加"菜单项时，我们调用单击隐藏的文件输入。我们监听输入的onchange事件，以了解用户何时选择了一个文件。作为对该事件的响应，我们创建一个表单元素，将隐藏的文件输入移动到其中，然后将表单发布到S3（我们在其中托管附件）以上载文件。这在其他浏览器中运行得很好，但是在第3步IE拒绝发布表单。事实证明，当我们从JS调用click时，IE会尽职尽责地运行该行为，但如果表单使用了该输入，则会将其列入提交黑名单！有一个解决方法，就是让用户单击的内容成为一个LABEL元素，该元素具有一个for属性，用于指定文件输入。不幸的是，这要求标签和文件输入采用相同的形式，这就对DOM层次结构施加了我们不容易遵守的约束（我们的附件菜单是一个下拉菜单，云上，它的根位于DOM的高位）。这可能是一个很好的解决方案，其他网站，但不是我们。值得庆幸的是，不久前Amazon为S3推出了跨源资源共享（CORS）支持，因此我们转而使用更标准的XmlHttpRequest。这非常简单：我们不需要提交一个充满隐藏输入的表单，而是填充一个FormData对象，并使用XHR将其发送到S3。我们必须配置S3以允许跨源请求（当然，这仍然需要凭据）。或者如何从头开始构建基本功能我们的description和comment字段是动态编辑器，包含内容可能更改的标记（例如指向其他任务的链接）。我们必须能够重新呈现它们的一部分或全部，以响应不断变化的数据。这通常意味着我们必须在重新渲染后销毁并重新创建用户的选择。IE10不支持像其他浏览器那样设置选择的方向，这意味着如果用户用键盘向后选择，我们就不能正确地恢复选择。诚然，对于其他开发人员来说，这不是一个常见的问题，但是我们可以做到这一点的假设已经深深地嵌入到我们的反应式框架中。这意味着我们必须重新实现一些浏览器通常完全从头开始处理键盘选择的功能。这是很困难的事情，即使没有所有的角落案件。我们需要实现增长和收缩