Question

我在网站上有以下html。 “ApplicationName_ButtonDiv”，“ApplicationName_Button”等中指定的样式在Chrome和Firefox中正确应用，但在IE8中却没有。

<div class="CommandButtonContainer">
   <div class="ApplicationName_ButtonDiv">
      <button id="changeName" type="button" class="ApplicationName_Button"onclick = "javascript: window.location='/Application/Customer/EditName';" >
         <a href="#" class="ApplicationName_Button">
            <span>
               <span>Change Name</span>
            </span>
         </a>
      </button>
   </div>
</div>

1）仅在IE8中页面出错：

网页错误详情

用户代理：Mozilla / 4.0（兼容; MSIE 8.0; Windows NT 5.1;   三叉戟/ 4.0; chromeframe / 18.0.1025.162; InfoPath.1; .NET CLR   3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E）时间戳：太阳，2013年8月11日10:06:22 UTC

消息：权限被拒绝行：5514字符：3代码：0 URI：   现场名称已删除/ publishmode.x.x.x.js

这似乎与：

有关

5513  contents: function( elem ) {
5514      return jQuery.nodeName( elem, "iframe" ) ?
5515          elem.contentDocument || elem.contentWindow.document :
5516          jQuery.makeArray( elem.childNodes );
5517  }

2）当您在IE Developer Tools中查看html时，它会略微显示，但重要的是，与您查看来源时不同：

<div class="CommandButtonContainer">
   <div class="ApplicationName_ButtonDiv">
      <button class="ApplicationName_Button" id="changeName" onclick="javascript: window.location='/Application/Customer/EditName';" type="button">
         <a class="ApplicationName_Button" href="#"/>
         <span>
            <span>
           Text - Change Name
            Text - Empty Text Node (italics)
         </a/>
      Text - Empty Text Node (italics)

锚标记已关闭，span标记现在不包含在其中。造型依赖于内部有两个跨度的锚。这可能只是工具的一个怪癖，因为我刚开始使用它。

如果您对导致此问题的原因有任何疑问，请与我们联系。谢谢约翰

Answer 1

将您的按钮变为标签：

你有：

<button id="changeName" type="button" class="ApplicationName_Button"onclick = "javascript: window.location='/Application/Customer/EditName';" >
         <a href="#" class="ApplicationName_Button">
            <span>
               <span>Change Name</span>
            </span>
         </a>
      </button>

尝试制作它：

<a id="changeName" class="ApplicationName_Button" type="button" onclick="javascript: window.location='/Application/Customer/EditName';">Change Name</a>

看看它是否适合你...仅仅按照你所拥有的那个部分并没有多大意义。另外，你有跨度......为什么？

Answer 2

如果IE的Dev Tools以不同的方式显示布局，那么通常表明代码中存在HTML错误导致IE的解析器窒息。所以要做的第一件事是检查：转到W3C's HTML Validator并修复它报告的任何错误。

这也可能是缺少风格的原因;没有看到它在行动中很难确定，但如果你很幸运，那也将解决这个问题。如果没有，那么您需要向我们展示相关的CSS以获得更多帮助。（编辑问题以包含它）。

CSS很可能是相关的，特别是对于<button>标签，因为按钮的默认样式不是完全一致的跨浏览器，尤其是像IE8这样的旧浏览器。您可能需要考虑使用CSS“重置”样式表来规范化某些浏览器差异。

您提到了Javascript permission denied错误。我没有认为与您的按钮没有正确设置相关（尽管说实话，考虑到您给出的代码数量有限，但是它是不可能的），但它显然仍然是问题并且会破坏您网站上的某些内容，即使不是这样。

权限问题是您的JS代码尝试访问iframe元素的内容。如果您收到权限错误，则表示浏览器认为iframe中的页面来自与主站点不同的域，因此出于安全原因，它不会让您的代码修改它。

我不知道这个iframe在您的网站上是什么，但无论它是什么，似乎任何在其中运行的代码都不会起作用。

IE8的安全模型在这方面相当不错，但确实有些怪癖。特别是一个人捕获了很多人，这是一个空页 - 即默认为about:blank URL - 可以从不同的域中考虑。在这种情况下，它显然没关系，但浏览器不够聪明，不知道。如果这是您的问题，您可以通过让代码从您的网站加载虚拟页面而不是使用about:blank作为默认值来解决此问题。

还有其他可能的怪癖可能会发生，但从我从问题中得到的细节来看，这似乎是最有可能的。

希望有所帮助。

样式不适用于IE8，但适用于Chrome和Firefox

2 个答案: