样式未在IE8中应用，但在Chrome和Firefox中是

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; Trident / 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）时间戳：UTC，2013年8月11日，10：06：22

消息：权限被拒绝行：5514字符：3代码：0 URI：站点名称已删除/publishmode.xxxjs

这似乎与以下方面有关：

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

2）当您在IE开发人员工具中查看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的开发工具以与您期望的方式不同的方式显示布局，则通常表明您的代码中存在HTML错误，这些错误导致IE的解析器有点停滞。 因此，要做的第一件事是进行检查：转到W3C的HTML验证程序，并修复它报告的所有错误。

这也可能导致缺少样式。 很难确定没有实际行动，但是如果您很幸运，那也将解决该问题。 如果没有，那么您需要向我们展示相关的CSS以获得更多帮助。 （编辑问题以将其包括在内）。

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

您提到了Javascript permission denied错误。 我认为这与按钮的样式不正确有关（虽然，老实说，鉴于您提供的代码数量有限，这是不可能的），但这显然仍然是一个问题，并且会破坏某些内容您的网站，即使不是那样。

权限问题是您的JS代码尝试访问iframe元素的内容。 如果您遇到权限错误，则意味着浏览器认为iframe中的页面与主站点位于不同的域，因此出于安全原因，它不会让您的代码对其进行修改。

我不知道此iframe在您的网站上是什么，但是无论它是什么，似乎任何在其中运行的代码都行不通。

IE8的安全性模型在这方面是相当不错的，但确实有一些奇怪之处。 特别是一个吸引了很多人的地方，那就是可以从另一个域考虑about:blank页（即默认为about:blank URL）。 在这种情况下，这显然无关紧要，但是浏览器并不足够聪明。 如果这是您的问题，则可以通过使代码从您的网站加载虚拟页面来解决，而不必使用about:blank作为默认值。

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

希望能有所帮助。