1

私は ASP を使用してDetailsViewおり、アイテム ヘッダーがモードによって異なるようにしたいと考えていますDetailsView。

2 つの画像があります。それぞれの画像は幅 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)のみに適用されるため、はそのまま残されますが、Chrome と IE はそれを個々の要素に適用するため、各列に背景画像が表示されます。<tr><td><td>

4

2 に答える 2

0

とった！@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;
}
于 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 に答える