CSS圆角快速完成:这是一种糟糕的技术吗？

Question

这是我一直在玩的快速而肮脏的圆角技术.

<!-- assuming the div isn't statically positioned -->
<div>
    <img src="box_TL.png" style="position:absolute;top:0;left:0;"/>
    <img src="box_TR.png" style="position:absolute;top:0;right:0;"/>

    <!-- other content -->

    <img src="box_BL.png" style="position:absolute;bottom:0;left:0;"/>
    <img src="box_BR.png" style="position:absolute;bottom:0;right:0;"/>
</div>

是的它很难看,但它很快,角落很流畅,它避免了嵌套的div并且不需要javascript.角落图像和内容顺序没有区别,但我认为以这种方式订购角落和内容可能更直观.

问题:这种技术有多糟糕？它可以通过还是我应该完全抛弃它？

Answer 1

我会使用jQuery Corner Plugin.它非常快,适用于所有现代浏览器,也适用于IE6.

Answer 2

它是可怕的.您的标记应该是内容,并且您的布局应该是样式.没有混杂.你应该去:

<div class="whatitis">
   bla blah ... content here
</div>

和风格:

.whatitis {
    background: whatever;
    border: whatever;
    border-radius: 1em;
    -moz-border-radius: 1em
    -webkit-border-radius: 1em;
}

是的,当然,有些浏览器不会出现圆角.但是如果你破解了一个解决方案,即使在不支持它的浏览器中也能提供适当的圆形玉米器,你将拥有一个复杂的解决方案,并且很可能你的网站在其他一些浏览器中无法正常工作.因此,您应该问自己:更重要的是,该网站在某些浏览器X中是否可以正常运行,或者您在其他浏览器Y中获得了圆角？

另外:使用另一个答案(或其他一些预先打包的解决方案)中提到的jQuery插件可能是可以接受的.只要它不要求任何额外的<div>,<img>或其他标记.