在没有空div的情况下进行叠加

Question

我从this question了解了如何进行叠加。但是，接受的答案使用空div，Chris Coyier认为“非语义”，因为空div纯粹是文体，而不是语义。

如何在没有空div的情况下进行叠加？

Answer 1

使用您发布的示例，您可以使用:after代替空元素。当然，您必须记住ie7及更低版本不支持:after。在这种情况下，您可以使用javascript仅为ie7和更低版本添加空元素。

示例：http://jsfiddle.net/dppJw/2/

Answer 2

语义/风格的区别是一个很好的理想，当然还有一些需要努力的东西，但不是你可以永远达到100％的东西，而且非常好。在网络开发中，在某种程度上成为一个理想主义者是好的，但是试图完全坚持理想只会导致挫折和不兼容 - 你可以使用：之后，但它不会在ie7中工作，ie7仍然有一个很大的市场分享。您可以告诉ie7用户升级或不使用您的网站，但这并不总是一种选择。

一个空div是一种完美合理的叠加方式，并且我并不知道如何做到这一点。我假设您正在使用叠加层来制作模态对话框或其他类似对象 - 如果您真的想要，您可以将对话框放在叠加div中并使用z-ordering来确保对话框保持在上面。或者您可以使用jQuery动态插入div，如您链接到的问题中所述：

$('div.parent').append('<div class="child" />');