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>

 

下面是修正后的截图：

 

 

放在这里，希望被这个问题困扰的新手们能够找到这儿来。