1

我正在使用 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>'s 保持原样，但 Chrome 和 IE 将其应用于每个单独<td>的元素，因此每列都有背景图像。

4

2 回答 2

0

Got it! @Leniel helped me get in the right direction. Based on the html that was being generated (seen below, for brevity), I had to do a little more manual css work:

Generated code:

<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>

resulting css (works on Firefix, Chrome, and 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;
}
于 2013-05-22T14:22:39.787 回答
0

我认为您可以解决区分标题行 <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;
}
于 2013-05-21T22:07:28.187 回答