IE渲染额外的表行

时间:2013-03-13 16:48:41

标签: html asp.net-mvc

使用ASP MVC Web应用程序。我有一个动态填充的表来显示搜索结果。结果在Chrome和FF中看起来很不错,但在IE7中它会在标题行上方添加行。我在渲染的页面来源中没有添加任何源代码'。

正如您在下图中所看到的,添加了一堆行(没有内容)。编写的html(在MVC中)是:

<div class="detailSection">

<h2>Search Results</h2>
<p style="font-size:1.2em; font-weight: bold;">Applicant: <%: Html.DisplayFor(m => m.NewPersonModel.FirstName) %>
        <%: Html.DisplayFor(m => m.NewPersonModel.LastName) %></p>

<p>Your search has returned the following results.  If the current applicant has an existing record, 
        select the record and click the 'Compare' button at the end of the list.</p>

    <% Html.BeginForm("Compare", "NewApplicant"); %>

        <table id="s_ResultsTable" class="grid-striped">
            <tr>
                <th>Select</th>
                <th>First Name</th>
                <th>Middle Name</th>
                <th>Last Name</th>
                <th>Date of Birth</th>
                <th>Alias?</th>
            </tr>
                <% if (Model.PersonSearchModel.Count == 0)
                { %>
                <tr>
                    <td colspan="6">There are no matching volunteer records.  <%: Html.ActionLink("Return to Detail page", "Detail", "NewApplicant", new { id = Model.NewPersonModel.ApplicantID }, null)%> to verify and save the application.</td>
                </tr>

                <%}%>

                <% var rowCount = 0;

                    foreach (var item in Model.PersonSearchModel)
                   { %>
                    <tr class="row<%: rowCount++%2 +1 %>">
                        <%: Html.HiddenFor(m => item.PersonID) %>
                        <%: Html.HiddenFor(m => m.NewPersonModel.ApplicantID) %>
                        <td class="resultsRadio"><%: Html.RadioButton("SelectedResult", item.PersonID) %></td>
                        <td><%: Html.DisplayFor(m => item.FirstName)%></td>                        
                        <td><%: Html.DisplayFor(m => item.MiddleName)%></td>                        
                        <td><%: Html.DisplayFor(m => item.LastName)%></td>                        
                        <td><%: Html.DisplayFor(m => item.DOB)%></td>                                                    
                        <td><%: Html.DisplayFor(m => item.IsAlias)%></td>                                                    
                    </tr>
                <%}%>
        </table>
        <div id="searchButtonDiv">
            <input type="hidden" id="SelectedPerson" name="SelectedPerson" value="" />
            <input type="submit" id="submit" class="SKButton" value="Compare" />
  <input type="button" class="SKButton" value="Back to Detail" title="Return to detail page" onclick="location.href='<%:@Url.Action("Detail", "NewApplicant", new { id = Model.NewPersonModel.ApplicantID }) %>'" />

        </div>
<% Html.EndForm(); %>
</div>

这在浏览器中呈现为:

<p>Your search has returned the following results.  If the current applicant has an existing record, 
        select the record and click the 'Compare' button at the end of the list.</p>


    <form action="/webapps/Eligibility/NewApplicant/Compare" method="post">

        <table id="s_ResultsTable" class="grid-striped">
            <tr>
                <th>Select</th>
                <th>First Name</th>
                <th>Middle Name</th>
                <th>Last Name</th>
                <th>Date of Birth</th>
                <th>Alias?</th>
            </tr>
                    <tr class="row1">
                        <input id="item_PersonID" name="item.PersonID" type="hidden" value="41838" />
                        <input id="NewPersonModel_ApplicantID" name="NewPersonModel.ApplicantID" type="hidden" value="718" />
                        <td class="resultsRadio"><input id="SelectedResult" name="SelectedResult" type="radio" value="41838" /></td>
                        <td>Steven</td>                        
                        <td></td>                        
                        <td>Amos</td>                        
                        <td>11/22/1977</td>                                                    
                        <td>No</td>                                                    
                    </tr>

                    <tr class="row2">
                        <input id="item_PersonID" name="item.PersonID" type="hidden" value="54477" />
                        <input id="NewPersonModel_ApplicantID" name="NewPersonModel.ApplicantID" type="hidden" value="718" />
                        <td class="resultsRadio"><input id="SelectedResult" name="SelectedResult" type="radio" value="54477" /></td>
                        <td>Steven</td>                        
                        <td></td>                        
                        <td>Atkinson</td>                        
                        <td>09/23/1963</td>                                                    
                        <td>No</td>                                                    
                    </tr>
        </table>
        <div id="searchButtonDiv">
            <input type="hidden" id="SelectedPerson" name="SelectedPerson" value="" />
            <input type="submit" id="submit" class="SKButton" value="Compare" />
  <input type="button" class="SKButton" value="Back to Detail" title="Return to detail page" onclick="location.href='/webapps/Eligibility/NewApplicant/Detail/718'" />

        </div>
</form>
</div>

Example of rendered page

以下是在任何其他浏览器中呈现相同页面的方式:

Page as it should render:

知道为什么会这样做吗?

EDITTED添加更多代码。我在渲染源中注意到的一件事是重复使用ID,这显然应该是类。使用MVC Html助手设置ID,所以我正在研究如何阻止它做这个并改为一个类。

2 个答案:

答案 0 :(得分:3)

在那里必须有一些有趣的HTML。也许是一个未封闭的标签,或类似的东西,大多数浏览器都会原谅它。

我会说尽可能多地删除页面上的HTML,一次一点,直到它看起来很正常 - 这将找到你的罪魁祸首。

答案 1 :(得分:0)

发现问题,它不喜欢内部标签的2个输入,但不喜欢任何类型的,等等。我把它们放在第一个内部,一切都很好。

违规部分:

<tr class="row2">
                        <input id="item_PersonID" name="item.PersonID" type="hidden" value="163" />
                        <input id="NewPersonModel_ApplicantID" name="NewPersonModel.ApplicantID" type="hidden" value="718" />
                        <td class="resultsRadio"><input id="SelectedResult" name="SelectedResult" type="radio" value="163" /></td>
                        <td>steven</td>                        
                        <td></td>                        
                        <td>Terpin</td>                        
                        <td>04/14/1956</td>                                                    
                        <td>Yes</td>                                                    
                    </tr>

现在更正为:

                      <tr class="row2">
                        <td class="resultsRadio"><input id="SelectedResult" name="SelectedResult" type="radio" value="54477" /><input id="item_PersonID" name="item.PersonID" type="hidden" value="54477" /><input id="NewPersonModel_ApplicantID" name="NewPersonModel.ApplicantID" type="hidden" value="718" /></td>
                        <td>Steven</td>                        
                        <td></td>                        
                        <td>Atkinson</td>                        
                        <td>09/23/1963</td>                                                    
                        <td>No</td>                                                    
                    </tr>

谢谢大家的建议。