html - "decorated"框/按钮的首选方式

Question

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

我见过很多处理这些问题的方法。由于它的大小会有所不同(元素的高度和宽度必须适合内容)，所以我不能使用固定的图形。我见过的方法是:

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

2) 使用 4 个创造性的嵌套 div。使用单个背景图像，比任何框的高度和宽度都大，使用 css 将它们定位在 Angular 落。像这样:

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

然后在 css 中这样写:

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

在我看来两者都很丑陋(我希望我可以只使用一个 div 而不是用那种垃圾弄乱标记)，我担心后者不能正确处理 alpha channel 图像，因为它们相互叠加。

开明的开发人员是否使用其他更好的方法？

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

Answer 1

虽然这是我很幸运不必尝试的事情，但作为业余爱好者而不是专业人士¹，CSS 3 Pie² 似乎可以启用许多Internet Explorer 中的 CSS 3 效果，尽管并非没有问题³。然而，它应该减少实现显然需要的跨浏览器像素完美所需的大量工作。

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

同样，Rahpaël⁵ 可用于满足 SVG 图形的任何要求，但这似乎超出了您的问题范围。

最后，作为附录，我听说了一些关于 Modernizr⁶ 的好消息，根据他们的主页，它是:

...a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

然而，我的倾向如评论中所述:影响现代浏览器(IE9 和 8，尽可能，Firefox、Chrome、Safari、Opera...)的外观，然后指出支持IE <8 需要更多的工作和更多的时间。

做出一个近似的、合理的报价，代表你的时间成本，以及你的客户/雇主的时间成本。给他们报价后，询问他们是否愿意接受基本的跨浏览器差异，或者他们是否愿意为额外的时间付费。

---

脚注:

1. 或者可能不走运，因为我没有工作做我很喜欢做的事情...
2. > CSS 3 Pie .
3. > Questions tagged with [tag:internet-explorer] and [tag:css3] here on Stack Overflow .
4. > html5shim .
5. > Rahpaël JS .
6. > Modernizr .