ASP MVC Web アプリに取り組んでいます。検索結果を表示する動的に入力されたテーブルがあります。Chrome と FF では結果は良好に見えますが、IE7 ではヘッダー行の上に行が追加されます。レンダリングされた「ページ ソース」に表示される追加のソース コードはありません。
次の画像でわかるように、多数の行が追加されています (コンテンツなし)。(MVCで)書かれたhtmlは次のとおりです。
<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>
同じページが他のブラウザでどのようにレンダリングされるかを次に示します。
なぜこれを行うのでしょうか?
さらにコードを追加するために編集されました。レンダリングされたソースで気付いたことの 1 つは、ID が繰り返し使用されていることです。これは明らかにクラスである必要があります。MVC Htmlヘルパーを使用するとIDが設定されるため、それを停止してクラスに変更する方法を検討しています。