ASP.NET AJAX DropShadow 控制項的一個BUG和解決方案(a bug of DropShadow and solution to resolve)

DropShadow 控制項：http://www.asp.net/AJAX/AjaxControlToolkit/Samples/DropShadow/DropShadow.aspx

 

既方便又使用，給廣大新手們帶來了很大的便利，可以輕鬆的為Panel（DIV）等控制項製作出圓角陰影製作效果，只需要如下代碼就可以為Panel1添加美觀的效果：

 

<asp:Panel ID="pnlMain_Images" runat="server" Width="885px" Height="300px" BackColor="#000066">
</asp:Panel>

<cc1:DropShadowExtender ID="dseCentral_Content" runat="server" Rounded="True" TargetControlID="pnlMain_Images" Opacity=".1" TrackPosition="true">
</cc1:DropShadowExtender>

 

但今天發現了這個控制項的一個BUG： 如果我們把一個應用了Shadow的Panel放到另一個應用了Shadow的Panel裡，裡面Panel的陰影就會有較大的位移，非常影響美觀,如所示：

 

代碼：

 

        <asp:Panel ID="Panel1"  runat="server" Width="885px" Height="300px" BackColor="#FFFFFF">
            <asp:Panel ID="Panel2"  runat="server" Width="585px" Height="200px" BackColor="#000055">
            </asp:Panel>
        </asp:Panel>
        <cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="Panel1"
            Rounded="True" Opacity=".1" TrackPosition="False">
        </cc1:DropShadowExtender>
        <cc1:DropShadowExtender ID="DropShadowExtender2" runat="server" TargetControlID="Panel2"
            Rounded="True" Opacity=".5" TrackPosition="False">
        </cc1:DropShadowExtender>

 

：

 

解決方案：

 

這是由於相對位置位移造成的，我們只用在內部的Panel上套一層絕對位置的DIV即可<div style="position:absolute">：

 

 

        <asp:Panel ID="Panel1"  runat="server" Width="885px" Height="300px" BackColor="#FFFFFF">
            <div style="position:absolute">
            <asp:Panel ID="Panel2"  runat="server" Width="585px" Height="200px" BackColor="#000055">
            </asp:Panel>
            </div>
        </asp:Panel>
        <cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="Panel1"
            Rounded="True" Opacity=".1" TrackPosition="False">
        </cc1:DropShadowExtender>
        <cc1:DropShadowExtender ID="DropShadowExtender2" runat="server" TargetControlID="Panel2"
            Rounded="True" Opacity=".5" TrackPosition="False">
        </cc1:DropShadowExtender>

 

下面是修正後的：

 

 

放在這裡，希望被這個問題困擾的新手們能夠找到這兒來。