我想使用一系列图像作为页面边框，我的表格是矩形的。每个图像为 10 像素 x 10 像素。我有顶部、底部、侧面和角落图像。除侧面图像外，所有图像都可以正常工作，% 变量不起作用。ls 是左侧，我也有 rs，右侧，我的顶部底部和角落图像工作正常。这是我的代码片段：
我的 ASP 页面代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title>Home Page</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div class="container">
<!-- Page Table Set Format -->
<table cellpadding="0" cellspacing="0" class="MainTable">
<tr>
<td class="LeftPageIndent" rowspan="5">
</td>
<td class="HeadSpace" colspan="3">
</td>
<td class="RightPageIndent" rowspan="5">
</td>
</tr>
<tr>
<td class="tlc">
<img src="Images/tlc.jpg" alt="top left corner" />
</td>
<td class="tp">
<img src="Images/tp.jpg" alt="top" class="BorderTop" />
</td>
<td class="trc">
<img src="Images/trc.jpg" alt="top right corner" />
</td>
</tr>
<tr>
<td>
<img src="Images/ls.jpg" alt="left side" class="LSideBdrImage" />
</td>
<td class="pageContent">
<!-- Page Form inside Main Content START -->
<form id="Form1" runat="server">
<table class="ContentTable" cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td>
<p align="center">
<img src="Images/Logo.jpg" alt="Logo" width="341" height="63" border="0" /></p>
</td>
</tr>
<tr>
<td>
<hr class="hrPageSeperator" color="#FF9900" />
</td>
</tr>
<tr>
<td>
<div class="page">
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
</td>
</tr>
<tr>
<td>
<hr class="hrPageSeperator" color="#FF9900" />
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home" />
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About" />
</Items>
</asp:Menu>
</div>
<hr class="hrPageSeperator" color="#FF9900" />
</td>
</tr>
</table>
</form>
<!-- Page Form inside Main Content END -->
</td>
<td>
<img src="Images/rs.jpg" alt="right side" class="RSideBdrImage" />
</td>
</tr>
<tr>
<td class="blc">
<img src="Images/blc.jpg" alt="bottom left corner" />
</td>
<td class="btm">
<img src="Images/btm.jpg" alt="bottom" class="BorderBottom" />
</td>
<td class="brc">
<img src="Images/brc.jpg" alt="bottom right corner" />
</td>
</tr>
<tr>
<td class="FootSpace" colspan="3">
</td>
</tr>
</table>
<!-- Page Table Set Format -->
</div>
</body>
</html>
我的 CSS 代码：
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #000000;
font-size: .80em;
font-family: "Helvetica Neue" , "Lucida Grande" , "Segoe UI" , Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
height: 100%;
}
#container
{
min-height: 100%;
}
* html #container
{
height: 100%;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* Page Border Setup...
----------------------------------------------------------*/
.MainTable
{
width:100%;
height:100%;
}
.HeadSpace
{
height:4px;
}
.LeftPageIndent
{
width: 12%;
}
.tlc
{
width:10px;
height:10px;
border:0px;
}
.tp
{
height:10px;
border:0px;
}
.trc
{
width:10px;
height:10px;
border:0px;
}
.ContentTable
{
width:100%;
height:100%;
border:0px;
}
.blc
{
width:10px;
height:10px;
border:0px;
}
.btm
{
height:10px;
border:0px;
}
.brc
{
width:10px;
height:10px;
border:0px;
}
.RightPageIndent
{
width: 12%;
}
.FootSpace
{
height:2px;
}
/* Boarder Image Setup...
-----------------------------------------------*/
.BorderTop
{
width: 100%;
height: 10px;
border: "0";
}
.LSideBdrImage
{
width: 10px;
height: 100%;
border: "0";
}
.RSideBdrImage
{
width: 10px;
height: 100%;
border: "0";
}
.BorderBottom
{
width: 100%;
height: 10px;
border: "0";
}
/* HEADINGS
----------------------------------------------------------*/
.hrPageSeperator
{
color:#FF9900;
}
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 100%;
background-color: #000000;
margin: 1px auto 0px auto; /* border: 1px solid #496077; */
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 0px;
min-height: 100%;
width: 100%;
}
我的问题是，我可以以 px 为单位设置图像高度，但不能以 % 为单位设置图像高度。我已经对此进行了研究，并且有很多信息，但不足以以我的方式查看错误。有人可以帮助我吗，我会非常感谢它。
提前致谢。
克里斯
PS 每个图像保持 10px x 10px 并且不会改变。