编辑与只读模式的不同 FieldHeaderStyle DetailsView

Question

我正在使用 ASP DetailsView，并且希望项目标题根据 DetailsView 所处的模式而有所不同。

我有两张图片 - 每一张都是 500 像素宽和 30 像素高。右边的 300px 是白色的，而左边的 200px 是绿色或灰色的，这取决于表单将处于何种模式（灰色表示只读，绿色表示编辑）。我希望彩色区域成为字段标题的背景，图像的白色部分位于实际绑定数据的后面。

使用皮肤和一些简单的 CSS，这非常适用于 Firefox（21.0 版）：

<asp:DetailsView SkinID="DetailsViewSkin" runat="server" CssClass="DetailsView"
  RowStyle-CssClass="DetailsViewRow"
  EditRowStyle-CssClass="DetailsViewRowEdit"
  FieldHeaderStyle-CssClass="DetailsViewHeader"/>

.DetailsView
{
    width: 500px;
}
.DetailsViewRow
{
    background: url('../Images/KL/tableRowGrayjpg') no-repeat #fff;
}
.DetailsViewHeader
{
    width: 200px;
    height:30px;
}
.DetailsViewRowEdit
{
    background: url('../Images/tableRowGreen.jpg') no-repeat #fff;
}

彩色区域出现在标题后面，其余区域覆盖图像的白色部分。但是，对于 IE（版本 10）和 Chrome（版本 26.0.1410.64），背景图像同时出现在标题的 <td> 和值的 <td> 中。

有人知道这是可能的还是一些跨浏​​览器的技巧？谢谢！

编辑

这是正在生成的 html 代码（为了更清楚一点）。

<table id="dvPerson" class="DetailsView" cellspacing="0" border="1" style="border-collapse:collapse;" rules="all">
  <tbody>
    <tr class="DetailsViewRow">  <!-- DetailsViewRowEdit, when in edit mode -->
      <td class="DetailsViewHeader"></td>
      <td> … </td>
    </tr>
  </tbody>
</table>

Firefox 仅将 DetailsViewRow（带有图像的 css）应用于 <tr> 元素，因此 <td> 保持原样，但 Chrome 和 IE 将其应用于每个单独的 <td> 元素，因此每列都有背景图片。

Answer 1

知道了！ @Leniel 帮助我找到了正确的方向。基于生成的 html（见下文，为简洁起见），我不得不做更多的手动 css 工作：

生成的代码：

<table id="dvPerson" class="DetailsView" cellspacing="0" border="1" rules="all">
  <tbody>
    <tr class="DetailsViewRow">  <!-- DetailsViewRowEdit, when in edit mode -->
      <td class="DetailsViewHeader"></td>
      <td> … </td>
    </tr>
  </tbody>
</table>

生成的 css（适用于 Firefix、Chrome 和 IE）

.DetailsView
{
    width: 500px;
}
.DetailsViewHeader
{
    width: 170px;
    height:25px;
}
tr.DetailsViewRow td.DetailsViewHeader
{
    background: url('../Images/KL/tableRowGray.jpg') no-repeat #fff;
}
tr.DetailsViewRowEdit td.DetailsViewHeader
{
    background: url('../Images/KL/tableRowGreen.jpg') no-repeat #fff;
}

Answer 2

我认为你可以解决这个区分数据行的 header row <th> 和 <td> 的问题。

tr.DetailsViewRow
{
    background: url('../Images/KL/tableRowGrayjpg') no-repeat #fff;
}

tr.DetailsViewRowEdit
{
    background: url('../Images/tableRowGreen.jpg') no-repeat #fff;
}

td.DetailsViewHeader
{
   width: 200px;
   height:30px;
   background: none;
}