Html “首选方式”；“装饰”；盒子/按钮

我需要在网页上制作按钮和框，以满足客户的设计规范。有许多按钮和框具有圆形边缘和阴影等，不幸的是，我必须支持旧的蹩脚浏览器

我见过很多处理这些问题的方法。因为它的大小会有所不同（项目的高度和宽度必须与内容相适应），所以我不能使用固定的图形。我看到的方法有：

1） 使用包含9个单元格的表格。在4个角单元格和4个边单元格中的每个单元格上使用背景图像

2） 使用4个创造性的嵌套div。使用单个背景图像，在高度和宽度上比任何框都大，使用css将它们放置在角落中。大概是这样的：

<div class="boxDecorationBL">
 <div class="boxDecorationTL">
  <div class="boxDecorationTR">
  </div>
 </div>
 <div class="boxDecorationBR">
  <div class="content">
  Loren ipsum dolor amet!
  </div>
 </div>
</div>

在我看来，两者都很难看（我希望我可以只使用一个div，而不是将标记与那种垃圾混在一起），我担心后者无法正确处理alpha通道图像，因为它们彼此重叠

开明的开发人员还有其他更好的方法吗

---

（我已经考虑过一些解决方案，比如用css3来实现——在这种情况下，我所需要的一切都可以在没有图像的情况下完成——然后使用javascript来适应旧浏览器，方法是提取元素并用更复杂的结构（如上面的结构）来替换它们。我喜欢这样，因为标记保持更清晰。）

为现代Borwser和使用旧浏览器的人制作一个好的图形，只显示一条信息，如“请使用另一个现代浏览器”（用php检查浏览器很容易），或者只为旧浏览器使用另一个css，这将为你节省大量时间

，而我很幸运，不必尝试，作为一个业余爱好者，而不是专业人士，CSS 3 Pie2似乎可以在Internet Explorer中实现许多CSS 3效果，尽管不是没有一些问题3。然而，它应该减少实现明显要求的跨浏览器像素完美所需的过度工作量

值得注意的是，如果您能够包含CSS3 Pie，那么可能值得考虑html5shim4，以便在您的设计和布局中使用html5元素

类似地，Rahpaël5可以用于SVG图形的任何需求，但这似乎超出了您的问题范围

最后，作为附录，我听到了一些关于现代化的好消息，根据他们的主页，这些消息是：

…一个小而简单的JavaScript库，可以帮助您利用新兴的web技术（CSS3、HTML 5），同时对可能还不支持这些新技术的旧浏览器保持良好的控制水平

---

然而，我的倾向正如我在评论中所指出的：影响现代浏览器（IE9和IE8，尽可能，Firefox、Chrome、Safari、Opera…）的外观，然后指出支持IE并不是一个很好的解决方案，但你可以展示支持更新/现代浏览器是多么容易，然后对支持前几代IE（当然还有其他一些）的时间/成本给出一个报价。是的……可能与一些客户有关。：）可悲的是，我生活和工作在现实世界中，这种方法会让我瞬间被炒鱿鱼我接受这一点并不是因为它真的回答了我的问题（对不起，我不想让第三方图书馆来做这类事情），但你确实花了一些时间在你的答案中，了解CssPie很有趣，尽管我认为这是过分的。

boxDecorationBL {
background: transparent url(boxdecoration.gif) no-repeat bottom left;
}