0
我想将一系列图像用作页面边框，而我的表格是矩形的。每张图片都是10px×10px。我有顶部，底部，侧面和角落的图像。除了侧面图像以外，所有图像均正常工作，％变量不起作用。 ls是左侧，我也有rs，右侧，我的顶部底部和角落图片工作正常。这是我的一小段代码片段：在CSS中指定图像高度px /％（级联样式表）
我的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%;
}
我的问题是，我可以设置在像素图像高度，但我不能以％为单位设置图像高度。我研究了这一点，并且有很多信息，但还不足以以我的方式看到错误。有人可以帮助我，我会非常appreaciate它。
在此先感谢。
Chris
P.S.每张图片保持10px10px不变。
嗨，我的古茹吉，试过了，它没有做任何改变。 –
嗨， 确保以下内容 您的HTML元素类型设置为 <！DOCTYPE HTML PUBLIC“ - // W3C // DTD HTML 4.01 // EN”“http://www.w3.org/TR/html4/strict .dtd“> html，body { height：100％; } ＃容器{ 最小高度：100％; } * html #container { height：100％; }
对不起，仍然没有工作纪 –