Silverlight 2.0在IE6 SP2上的虛線邊框問題

作者: 野文來源: 博客園發布時間: 2009-05-26 11:24 閱讀: 2432 次推薦: 0 原文鏈接 [收藏]

　　在《Silverlight嵌入到HTML之windowless屬性及運用AjaxControlToolKit時出現虛線邊框的問題》里談一些Silverlight在瀏覽器上運行時會出現虛線邊框的問題，當時主要考慮了IE7和FireFox，卻沒想到在ie6 sp2上還是會出現虛線邊框，必須鼠標點擊一次讓其獲得焦點虛線邊框才消失。

　　經過測試，發現如果用<asp:Silverlight />引入silverlight來取代直接使用<object>可以避免虛線邊框的出現。實際上直接使用<object> 的代碼可以完全移植到<asp:Silverlight />里，<asp:Silverlight />是動態生成了object標簽的，只不過其中的很多js我還沒有看得很明白。

　　需要注意的一點，直接使用<object>對應的代碼可以寫成這樣：

<div id="silverlightHost" style="width:275px;height:324px;background-color:transparent;float:le
ft">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" style="wi
dth:100%;height:100%;position:absolute">
            <param name="source" value="../ClientBin/Silverlight.xap"/>
            <param name="onerror" value="onSilverlightError" />
            <param name="onload" value="onSilverlightLoaded" />
            <param name="background" value="transparent" />
            <param name="windowless" value="true" />
            <param name="minRuntimeVersion" value="2.0.31005.0" />
            <param name="autoUpgrade" value="true" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
                 <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silv
erlight" style="border-style: none"/>
            </a>
        </object>
        <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
    </div>

　　對應的onSilverlightLoaded事件中可以獲得<object>元素及包含他的<div>：

function onSilverlightHomePeoplePickerLoaded(sender, args) {            
      var objElement = sender.getHost();
      var divHost = objElement.parentNode;
}

　　使用<asp:Silverlight />控件實際上生成的也是<object>，只不過在<object>標簽外面加了一個<span>，大致等價于：

<span>
  <object>
    .。。。。。
  </object>
</span>

　　所以如果將上面的

<div id="silverlightHost"  style="height:100%;">        
     <asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightApplication1.xap"
 MinimumVersion="2.0.31005.0" Width="100%" Height="100%" OnPluginLoaded="onSilverlig
htLoaded" />
</div>

　　對應的javascript代碼要稍做修改：

function onSilverlightHomePeoplePickerLoaded(sender, args) {            
      var objElement = sender.get_element();
      var divHost = objElement.parentNode.parentNode;
}