私はアーティストのウェブサイトを作成しています。そこでは、彼女の絵をカテゴリに応じて 4 つの別々のテーブルに整理する必要があります。それに応じて整理されたすべての絵画をリストするXMLドキュメントがあります（これは単なる短縮版です）：
<CATALOG>
<CITYSCAPES>
<PAINTING>
<CATEGORY>Cityscapes</CATEGORY>
<TITLE>Alley in Florence</TITLE>
<DIMENSIONS>15 X 20 in.</DIMENSIONS>
<PRICE>400 $</PRICE>
<file type="gif">images/thumbnails/cityscapes/alley in florence.gif</file>
</PAINTING>
<PAINTING>
<CATEGORY>Cityscapes</CATEGORY>
<TITLE>Christmas in New York</TITLE>
<DIMENSIONS>12 X 14 in.</DIMENSIONS>
<PRICE>250 $</PRICE>
<file type="gif">images/thumbnails/cityscapes/christmas in new york.gif</file>
</PAINTING>
<PAINTING>
<CATEGORY>Cityscapes</CATEGORY>
<TITLE>New York, New York</TITLE>
<DIMENSIONS>21 X 29 in.</DIMENSIONS>
<PRICE>495 $</PRICE>
<file type="gif">images/thumbnails/cityscapes/new york new york!.gif</file>
</PAINTING>
<PAINTING>
<CATEGORY>Cityscapes</CATEGORY>
<TITLE>30th Street Station</TITLE>
<DIMENSIONS>10 X 11 in.</DIMENSIONS>
<PRICE>SOLD</PRICE>
<file type="gif">images/thumbnails/cityscapes/philly 1.gif</file>
</PAINTING>
</CITYSCAPES>
<FLORA>
<PAINTING>
<CATEGORY>Flora</CATEGORY>
<TITLE>Plumeria</TITLE>
<DIMENSIONS>14 X 20 in.</DIMENSIONS>
<PRICE></PRICE>
<file type="gif">images/thumbnails/flora/plumeria.gif</file>
</PAINTING>
<PAINTING>
<CATEGORY>Flora</CATEGORY>
<TITLE>Tropical in Red</TITLE>
<DIMENSIONS>14 X 20 in.</DIMENSIONS>
<PRICE>SOLD</PRICE>
<file type="gif">images/thumbnails/flora/red leaf.gif</file>
</PAINTING>
<PAINTING>
<CATEGORY>Flora</CATEGORY>
<TITLE>Sunflower</TITLE>
<DIMENSIONS>14 X 20 in.</DIMENSIONS>
<PRICE></PRICE>
<file type="gif">images/thumbnails/flora/sunflower.gif</file>
</PAINTING>
</FLORA>
</CATALOG>
4 つのカテゴリは、Cityscapes、Flora、Still Life、および Fauna (このコードでは最後の 2 つを省略しています) です。そのため、画像にアクセスする場合、構造は CATALOG/CITYSCAPE/PAINTING OR CATALOG/FLORA/PAINTING になります。 .
画像を表示する XSLT スタイルシートがあります。1 行に 4 つの画像があります。
<html>
<body>
<table style="margin: 0 auto;" cellspacing="30">
<xsl:for-each select="CATALOG/CITYSCAPE/PAINTING[position() mod 4 = 1]">
<xsl:if test="CATEGORY='Cityscapes'">
<tr>
<xsl:for-each select=" . | following-sibling::*[position() < 4]">
<td valign="bottom" align="center">
<img src = "{file}"></img>
<p><xsl:value-of select="TITLE"/></p>
<p><xsl:value-of select="DIMENSIONS"/></p>
<p><xsl:value-of select="PRICE"/></p>
</td>
</xsl:for-each>
</tr>
</xsl:if>
</xsl:for-each>
</table>
<table style="margin: 0 auto;" cellspacing="30" border="1">
<xsl:for-each select="CATALOG/FLORA/PAINTING[position() mod 4 = 1]">
<tr>
<xsl:for-each select=" . | following-sibling::*[position() < 4]">
<td valign="bottom" align="center">
<img src = "{file}" width="120" height="100%"></img>
<p><xsl:value-of select="TITLE"/></p>
<p><xsl:value-of select="DIMENSIONS"/></p>
<p><xsl:value-of select="PRICE"/></p>
</td>
</xsl:for-each>
</tr>
</xsl:for-each>
</table>
<table style="margin: 0 auto;" cellspacing="30" border="1">
<xsl:for-each select="CATALOG/STILL/PAINTING[position() mod 4 = 1]">
<tr>
<xsl:for-each select=" . | following-sibling::*[position() < 4]">
<td valign="bottom" align="center">
<img src = "{file}" width="120" height="100%"></img>
<p><xsl:value-of select="TITLE"/></p>
<p><xsl:value-of select="DIMENSIONS"/></p>
<p><xsl:value-of select="PRICE"/></p>
</td>
</xsl:for-each>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
カテゴリごとに個別のテーブルを作成しました。テーブルのコードは、都市景観の画像を表示するときに Chrome で問題なく動作しますが、次の 3 つのカテゴリの画像を表示できません。ただし、絵画のタイトル、寸法、価格のすべてのテキストは明確に示されています。私はこの問題に対する答えを探していましたが、それは私の XML ドキュメントの構造にあると感じています。for-eachループでカテゴリ別に画像をフィルタリングするなど、これを修正するいくつかの方法を試しました