Question

我努力为HTML中的正文内容制作边框。我用过：

-moz-border-image: url(/images/border.png) 20 repeat;
 -webkit-border-image: url(/images/border.png) 20 repeat;
 -o-border-image: url(/images/border.png) 20 repeat;
 border-image: url(/images/border.png) 20 repeat; 
 behavior: url(/css/PIE.htc);

...但是因为它不适用于资源管理器甚至某些其他浏览器的旧版本，所以我决定采用旧方法制作它。但是，我不知道该怎么做。我们在旧网页上使用了表格：

<BODY leftmargin=0" topmargin=0" marginwidth=0" marginheight=0" class="content">
<TABLE align="center" width="880" cellpadding="0" cellspacing="0" border="0">
    <TR>
        <TD><IMG src="/images/b-01-tl.jpg" alt="" width="20" height="20" border="0"><BR>
        </TD>
        <TD background="../images/b-01-mt.jpg" width="100%" valign="bottom">
        </TD>
        <TD><IMG src="/images/b-01-tr.jpg" alt="" width="20" height="20" border="0"><BR>
        </TD>
    </TR>
    <TR>
        <TD background="../images/b-01-ml.jpg"><BR>
        </TD>
        <TD bgcolor="#000000" class="bg-w0">

..但现在我用div和HTML5创建了页面。任何人都可以了解如何围绕内容实现新的边界。我们有8张边框图片 - 左上角，上边线，右上角，右边线，右下角，底线，左下角和左下角。我知道可以用div做到这一点，但是我没有找到任何教程如何做到这一点。等待任何帮助:)如果您需要边框图片，请写信给我，我会将其上传

Answer 1

所以你想要以老式的方式做到这一点＆＃34;呃，因为缺乏支持，边境图像让你失望了？嗯，这里是老式的方式，或多或少：

<body>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tbody>
        <tr valign="top">
            <td class="upper-left" align="left"><img src="/image/blank.gif" alt="" height="20" width="20"></td>
            <td class="upper-center" width="100%"><img src="/image/blank.gif" alt=""height="20" width="20"></td>
            <td class="upper-right" align="right"><img src="/image/blank.gif" alt="" height="20" width="20"></td>
        </tr>    
        <tr valign="top">
            <td class="middle-left"><img src="/image/blank.gif" alt="" height="20" width="20"></td>
            <td width="100%">
                <!-- content below -->

                <!-- content above -->
            </td>
            <td class="middle-right"><img src="/image/blank.gif" alt="" height="20" width="20"></td>
        </tr>        
        <tr valign="top">
            <td class="lower-left" align="left"><img src="/image/blank.gif" alt="" height="20" width="20"></td>
            <td class="lower-center" width="100%"><img src="/image/blank.gif" alt=""height="20" width="20"></td>
            <td class="lower-right" align="right"><img src="/image/blank.gif" alt="" height="20" width="20"></td>
        </tr>        
    </tbody> 
</table>
</body>

和CSS：

<style type="text/css">
body { padding: 0; margin: 0; }
table tbody tr td { background-repeat: repeat; background-position: 0 0; }

.upper-left {background-image: url(/images/b-01-tl.jpg);}
.upper-center {background-image: url(/images/b-01-mt.jpg);}
.upper-right {background-image: url(/images/b-01-tr.jpg);}

.middle-left {background-image: url(/images/b-01-ml.jpg);}
.middle-right {background-image: url(/images/b-01-ml.jpg);}

.lower-left {background-image: url(/images/b-01-bl.jpg);}
.lower-center {background-image: url(/images/b-01-mb.jpg);}
.lower-right {background-image: url(/images/b-01-bl.jpg);}
</style>

所以在桌面上，我们希望我们的边框图像彼此完美对齐，这就是我们需要cellspacing="0" cellpadding="0" border="0"的原因 - 你可能会确保填充为0并且边界 - 这些天崩溃将崩溃。这种表可以像你需要的那样有弹性 - 它可以全宽或者像（在这个例子中）60像素一样窄。请记住，width属性并不需要＆＃34; px＆＃34;作为价值的一部分。所以100％是100％，但60px只有60。

在我们的中间栏中，我们为每个width="100%"设置了<td>，以确保最后一列不会意外地变得太宽，我们强制要求保持正确的宽度 - 这就是为什么我们也为细胞使用空白的GIF，这样我们就可以看到背景并获得合适的尺寸。在某些情况下，我们可能会使用 ，但这些大小可能无法预测 - 如果您希望这些边框只有2像素高，那就太冒险了。有一段时间人们使用的是实际的Netscape <spacer>标签，但这种方法从未奏效过。

align =＆＃34; left＆＃34;和align =＆＃34;对＆＃34;那是出于习惯，真的。如果您不是在左右<img>标签中使用空白GIF，而是使用了实际图片，那么，您可以这样做。

在这个例子中，我实际上是使用CSS来应用背景，而且，我不能想到过去10年中制作的浏览器不会理解这一点，而且它也是如此。稍微容易维护。我从不喜欢使用background属性，我打赌将来某天某些浏览器会取消对它的支持（如果它们还没有）。这种解决方案以这种方式向后看，向前看。我在当天做了很多这样的标记。

通常当我们像这样做边框时，我们还会包含一些与边框相匹配的背景颜色 - 我们会使用bgcolor属性来执行此操作，您可以将其放在{<tr>上1}}指定一次，或整个表，然后覆盖您需要的单元格。减少标记总是更好，否则你在文档中搜索和替换会很好。遗憾的是，旧的迪斯尼乐园网站上没有这些例子，但http://web.archive.org/web/19980709083315/http://namco.com/有很多使用桌子和间隔GIF，呃，激励你。

Answer 2

你的代码错了，你错过了''

-moz-border-image: url('/images/border.png') 20 repeat;
 -webkit-border-image: url('/images/border.png') 20 repeat;
 -o-border-image: url('/images/border.png') 20 repeat;
 border-image: url('/images/border.png') 20 repeat; 
 behavior: url('/css/PIE.htc');

身体内容CSS，HTML的边框

2 个答案: