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会将其应用于每个人{ {1}}元素，以便每列都有背景图片。

Answer 1

我认为您可以解决这个问题，区分数据行的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;
}

Answer 2

知道了！ @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;
}

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

2 个答案: