Question

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

我已经看到很多方法来处理这些问题。由于它的大小会有所不同（物品的高度和宽度必须符合内容），我不能使用固定的图形。我见过的方法是：

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>

然后在css中这样的东西：

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

我认为两者都很难看（我希望我可以使用单个div而不是用这种垃圾来混淆标记），我担心后者无法正确使用alpha通道图像，因为它们相互叠加。

还有其他更好的方式可以让开发人员使用吗？

（我已经考虑过使用css3这样做的解决方案 - 在这种情况下，我需要的所有内容都可以在没有图像的情况下完成 - 然后使用javascript通过提取元素并用更复杂的结构替换它来容纳旧浏览器，例如上面的那些之一。我喜欢这样，因为标记保持清洁。）

Answer 1

使用现代borwsers的良好图形，并使用旧浏览器的人只显示“请使用另一个现代浏览器”（很容易用php检查浏览器），或只是使用旧浏览器的另一个CSS，这将为您节省大量时间

Answer 2

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

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

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

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

...一个小而简单的JavaScript库，可帮助您利用新兴的Web技术（CSS3，HTML 5），同时仍然保持对可能尚不支持这些新技术的旧浏览器的精细控制。

然而，我的倾向是在我的评论中指出的：影响现代浏览器的外观（IE9和8，尽可能地，Firefox，Chrome，Safari，Opera ......）然后指出支持IE＆lt; 8需要更多的工作和更多的时间。

制作一个近似且合理的报价，代表您的时间成本，以及您的客户/雇主的时间成本。一旦你给他们报价，问他们是否愿意接受基本的跨浏览器差异，或者他们是否愿意支付额外的时间。

<小时/> 脚注：

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

做“装饰”盒子/按钮的首选方式

2 个答案: