樣式未在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作為默認值。

還有其他可能發生的怪癖，但是從我從問題中得到的細節來看，這似乎是最有可能的。

希望能有所幫助。