我需要在网页上制作按钮和框以满足客户的设计规范。有很多按钮和盒子有圆角和阴影等,不幸的是我必须支持旧的蹩脚浏览器。
我已经看到很多方法来处理这些问题。由于它的大小会有所不同(物品的高度和宽度必须符合内容),我不能使用固定的图形。我见过的方法是:
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通过提取元素并用更复杂的结构替换它来容纳旧浏览器,例如上面的那些之一。我喜欢这样,因为标记保持清洁。)
答案 0 :(得分:0)
使用现代borwsers的良好图形,并使用旧浏览器的人只显示“请使用另一个现代浏览器”(很容易用php检查浏览器),或只是使用旧浏览器的另一个CSS,这将为您节省大量时间
答案 1 :(得分:0)
虽然这是我有幸不必尝试的东西,但作为业余爱好者而不是专业 1 ,似乎CSS 3 Pie 2 可以启用许多Internet Explorer中的CSS 3效果,虽然没有一些问题 3 。但是,它应该减少实现显然需要的跨浏览器像素完美所需的过多工作量。
值得注意的是,如果你能够包含CSS3 Pie,可能值得考虑html5shim 4 ,以便在你的设计和布局中使用html5元素。
同样,Rahpaël 5 可以用于SVG图形的任何要求,但这似乎超出了你的问题的范围。
最后,作为附录,我听到了关于Modernizr 6 的一些好消息,根据他们的主页,它是:
...一个小而简单的JavaScript库,可帮助您利用新兴的Web技术(CSS3,HTML 5),同时仍然保持对可能尚不支持这些新技术的旧浏览器的精细控制。
然而,我的倾向是在我的评论中指出的:影响现代浏览器的外观(IE9和8,尽可能地,Firefox,Chrome,Safari,Opera ......)然后指出支持IE&lt; 8需要更多的工作和更多的时间。
制作一个近似且合理的报价,代表您的时间成本,以及您的客户/雇主的时间成本。一旦你给他们报价,问他们是否愿意接受基本的跨浏览器差异,或者他们是否愿意支付额外的时间。
<小时/> 脚注: