Internet Explorer 渲染问题答案

【问题标题】：Internet Explorer Rendering issueInternet Explorer 渲染问题
【发布时间】：2011-10-29 11:02:08
【问题描述】：

您好，我有 Internet Explorer 渲染问题，我有一个 aspx 页面，其中有一个表格，我将其背景图像设置为 800 x 700 像素，我的表格大小为 800 x 550。但在 Internet Explorer 2 中如图所示，表格正在渲染

此页面的html：

%@ Page Language="C#" MasterPageFile="~/mftpmasterpage.Master" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="FtpWebInterface.Home" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">




</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server" >

    <div   >
    <table align="center" border="0" style=" width:800px;height:520px;background-image:url(Images/formbg.jpg); border: 5px outset  #2B60DE;border-radius: 5px;box-shadow: 0px 0px 20px #000;    -webkit-border-radius: 5px;-moz-border-radius: 5px; ">
<tr>
<td align="left" colspan="3" >
&nbsp;</td>

</tr>
<tr>
<td align="right" colspan="3"  height="10%" valign="top" align="left">
    <asp:LinkButton ID="lnksignout" runat="server" CausesValidation="False" 
        onclick="lnksignout_Click" Font-Size="11px">Sign out</asp:LinkButton>
 </td>
</tr>
<tr>
<td colspan="2"  height="10%" valign="bottom" align="left">
    <asp:UpdatePanel ID="uplblCurdir" runat="server">
     <Triggers>
              <asp:AsyncPostBackTrigger ControlID="TreeView1" EventName="SelectedNodeChanged" />
          </Triggers>
          <ContentTemplate>

          </ContentTemplate>
    </asp:UpdatePanel>
</td>

<td valign="bottom" align="left" >
    <asp:UpdatePanel ID="upUploadbtn" runat="server">
     <Triggers>
            <asp:AsyncPostBackTrigger ControlID="TreeView1" EventName="SelectedNodeChanged" />
         </Triggers>
         <ContentTemplate>


         </ContentTemplate>
    </asp:UpdatePanel>
</td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>

<tr>
<td height="80%" width="15%" border="1"  valign="top" align="left">
       <div style="height: 300px;width: 180px;overflow:auto; background-color:#e4f1fb; border: 1px solid  #2B60DE;border-radius: 3px;box-shadow: 0px 0px 10px #000; -webkit-border-radius: 3px;-moz-border-radius: 3px; ">   


                 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
             <Triggers>
                 <asp:AsyncPostBackTrigger ControlID="TreeView1" EventName="SelectedNodeChanged" />
              </Triggers>
                 <ContentTemplate>


                  </ContentTemplate>
             </asp:UpdatePanel>

        </div> 

</td >
<td width="70%" valign="top" align="left">
  <asp:UpdatePanel ID="Updatepanel2" runat="server" UpdateMode="Always">
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="TreeView1" EventName="SelectedNodeChanged" />
                        </Triggers>
                        <ContentTemplate>

                   </ContentTemplate>
                   </asp:UpdatePanel>

                   </td >

                   </tr> 

                 <tr>
                   <td style="display:none;" colspan="3" >
                   <input id="hdnuser" type="hidden" runat="server"/><asp:Button ID="refreshbtn" runat="server"  onclick="refreshbtn_Click" CausesValidation="False" /></td>
                  </tr> 

                 </table>
                     </ContentTemplate>
                     </asp:UpdatePanel>

           </td>  
</td>
<td width="15%"  valign="top" align="left">
       <table align="left" valign="top" width="100%"> 
          <tr>
            <td>
                <asp:Button ID="btncreatefolder" runat="server" Text="Create Folder" 
                    onclick="btncreatefolder_Click" CausesValidation="False" class="submit" 
                    onclientclick="popup('CreateFolder.aspx','CreateFolder')" /></td>
          </tr>
          <tr>
           <td><asp:Button ID="btnuploadfolder" runat="server" Text="Upload Folder" 
                   onclick="btnuploadfolder_Click" CausesValidation="False" 
                   class="submit" Enabled="False" /></td>
          </tr>  

         </tr>
         <tr>
            <td><asp:Button ID="btndeltefolder" runat="server" Text="Delete Folder" OnClientClick="popup('DeleteFolder.aspx','DeleteFolder')"
                    class="submit" onclick="btndeltefolder_Click" CausesValidation="False" /></td>  
          </tr>     
      </table>   
</div>
--------------------------------------Body End-----------------------------------------------
-----------------------------The Divs below this are hidden, there display property s bydefault hidden and they are used in modal poup--------------------------

    <!-----Upload Div------------------------>
   <div id="div_to_popup" class="popup_block" align="center">        
         <img id="btn_close" alt="" src="images/Close.png" align="right" onclick="HideModalPopup('div_to_popup'); return false;" class="btn_close"/><table width="100%" style="background-image:url(Images/loginbg.jpg);">      
       <tr>
       <td align="center" style="">    
           <asp:UpdatePanel ID="UpdatePanel6" runat="server">
           <Triggers >
           <asp:AsyncPostBackTrigger ControlID="btnupload" EventName="Click"/>
           </Triggers>
           <ContentTemplate>
           <asp:Label ID="lblDirectory" runat="server" CssClass="label" ></asp:Label>
           </ContentTemplate>
            </asp:UpdatePanel>           
       </td>
       </tr>
       <tr>
       <td></td>
       </tr>      
           <tr>
           <td align="center" style="">
              <asp:Label ID="Label3" runat="server" Text="Select file to upload." CssClass="label"></asp:Label><br />
           </td>                     
           </tr>
           <tr>
           <td colspan="2"></td>
           </tr>
            <tr>
           <td align="center">
            <center> 
             <asp:Panel ID="Panel3" runat="server" Height="58px" Width="282px">
             <br />             
            <center> 
              <asp:FileUpload ID="file" runat="server" /><br />
                <asp:Label ID="lblfilereq" runat="server" CssClass="label"></asp:Label>
              <input id="hdnfilename" type="hidden" runat="server"/></center>            
            </asp:Panel>
           </center> 
           </td>           
           </tr>           
        <tr>
        <td></td>
        </tr>

           <tr>
           <td  align="center" >
               <asp:Button ID="btnuploadok" runat="server" Text="Upload" CausesValidation="false" 
                   onclick="btnuploadok_Click" 
                   class="submit" />

               <asp:Button ID="btnuploadCancel" runat="server" Text="Cancel" CausesValidation="false" 
                    class="submit"  OnClientClick="HideModalPopup('div_to_popup');"/>
           </td>
           </tr>

           <tr>
           <td>
               <asp:Panel ID="pnlstatus" runat="server"  Height="31px" Visible="false">
               <center><asp:Label ID="lblstatus" runat="server" ForeColor="Black" Text="" Font-Size="14px" Font-Bold="true"></asp:Label></center>    
               </asp:Panel>
           </td>
           </tr>
           </table>

     </div>
<!------End upload Div------------------->

<!---------Loading Div -------------->
<div id="div_to_folder" class="popup_block">   
       <img id="Img1" alt="" src="images/Close.png" align="right" onclick="HideModalPopup('div_to_folder');return false;" class="btn_close"/><asp:Panel ID="Panel4" runat="server" BackImageUrl="~/Images/loginbg.jpg">         
         <asp:Label ID="lblloading" runat="server" Text="Preparing Download...."  CssClass="label"></asp:Label>
         <center><img alt="" src="Images/ajax-loader.gif" style="width: 215px" /></center>
        </asp:Panel> 

</div> 
<!--------End Loading Div------------>

<!------ Send File Div ---------------->
  <div id="div_send_file" class="popup_block" >
            <img id="Img2" alt="" src="images/Close.png"  align="right" onclick="HideModalPopup('div_send_file'); return false;" class="btn_close"/></asp:Timer><asp:UpdatePanel ID="UpdateDivSendFile" runat="server"><Triggers><asp:AsyncPostBackTrigger ControlID="TreeView1" EventName="SelectedNodeChanged" /></Triggers><ContentTemplate>
           <asp:Panel ID="pnlSendmail" runat="server" Height="408px" Width="576px"  ScrollBars="Auto" BackColor="White">
              <center>
                  <asp:Label ID="Label1" runat="server" Text="Send File" CssClass="heading"></asp:Label></center>     
           <table align="center">

        <tr>
          <td  align="left">        
            <asp:Label ID="lblto" runat="server" Text="To :" CssClass="label"></asp:Label>
          </td>   
          <td>
          <table>
          <tr>
          <td><asp:TextBox ID="txtto" runat="server" Width="451px" Height="32px" 
                  TextMode="MultiLine"></asp:TextBox>
          </td>
          <td>  <asp:RequiredFieldValidator ID="reqfilename" runat="server" BorderStyle="None" 
            ControlToValidate="txtto" ErrorMessage="*"></asp:RequiredFieldValidator>  </td>
          </tr>

          </table>             


          </td>
       </tr>
        <tr>
          <td  align="left">        
           <asp:Label ID="lblsubject" runat="server" Text="Subject" CssClass="label"></asp:Label>
          </td>    
          <td>
          <table>
          <tr>
          <td> <asp:TextBox ID="txtSubject" ForeColor="Black" runat="server" Height="32px" Width="451px"></asp:TextBox></td>
          <td></td>
          </tr>
          </table>

          </td>
       </tr>
       <tr>
          <td   align="left">      
           <asp:Label ID="lblattachment" runat="server"  Text="Attached File" CssClass="label"></asp:Label>
          </td>
          <td  align="left">
           <asp:Image ID="imgattachment" runat="server" /> 
           <asp:Label ID="linkAttachedFile" runat="server" CssClass="label"></asp:Label>
          </td>

       </tr> 
       </table>
       <table  align="center"> 
       <tr>

          <td  align="center">    
            <asp:TextBox ID="txtmsg" runat="server" Height="118px" Width="560px"></asp:TextBox>     
          </td>        
       <tr>
        <td >
          <asp:Panel ID="pnalStatus" runat="server" Height="32px"   
                Visible="false">
             <center><asp:Label ID="lblStausCode"  runat="server" CssClass="label"></asp:Label></center>  
          </asp:Panel>         
        </td>        
       </tr>
       <tr>   
          <td  align="center" >        
            <asp:Button ID="btnSend" runat="server" Text="Send"
             class="submit" onclick="btnSend_Click"  />        
            <asp:Button ID="btnSendFileCancel" runat="server" CausesValidation="False" Text="Cancel" OnClientClick="HideModalPopup('div_send_file'); return false;" class="submit"/>  
          </td>


          </tr>         
        </table>
        </asp:Panel>       
      </ContentTemplate>
     </asp:UpdatePanel>
  </div>

</asp:Content>

在 firefox chorome 和 safari 中，仅在表格上方呈现，但在 IE 中，两个表格正在呈现，任何人都可以帮助我解决问题以及如何解决此问题，谢谢。

【问题讨论】：

标签： asp.net html css internet-explorer

【解决方案1】：

您检查过来源吗？它实际上是另一张桌子吗？

我的第一个想法是背景在重复。您没有在样式属性中指定no-repeat：

改变： <table align="center" border="0" style=" width:800px;height:520px;background-image:url(Images/formbg.jpg); ... >

到： <table align="center" border="0" style=" width:800px;height:520px;background:transparent url(Images/formbg.jpg) top left no-repeat; ... >

看看它会给你什么。

【讨论】：

我不确定它是源中的另一个表格，它没有显示表格，但由于它以相同的边框呈现，我猜 t 是另一个表格，因为我只将边框样式应用于表格，并且我尝试不重复背景位置左上角，但没有任何反应仍然是相同的结果:(这是添加的内容。背景图像：url（图像/formbg.jpg）；背景重复：无重复；背景位置：左上角；
嗯...尝试仔细检查您的标记并检查您是否正确关闭了所有标签。
是的，这是一个愚蠢的错误，我没有关闭表格标签。谢谢亚历克斯 :)