处理CSS形状和IE Doctype

Question

我一直在研究一个涉及CSS Shapes的jQuery插件。我遇到的问题是，如果没有声明DOCTYPE，CSS形状在IE8中不起作用。这将是我的第一个jQuery插件。

我的问题：jQuery开发人员如何解决这个问题？我是否应该在文档中解释这个插件需要DOCTYPE才能工作，还是应该编写在Quirks模式下工作的单独的CSS？

Answer 1

这些天没有故意省略有效的doctype - 导致Quirks Mode。

http://hsivonen.iki.fi/doctype/

  

你真的想要Quirks模式 - 没有doctype。

     

请不要这样做。故意为Quirks模式设计   过来困扰着你，你的同事或你的继任者   未来 - 当没有人甚至关心Windows IE 6时（已经没有了）   一个关心Netscape 4.x和IE 5）。设计Quirks模式   是个坏主意。相信我。

网站没有doctype的唯一可能的正当理由是，如果它是遗留网站，需要花费太多精力才能将其修复为在标准模式下工作。

您的插件无需在Quirks模式下工作。

您甚至不必在文档中提及它。预计事情会破裂。例如，如果页面处于Quirks模式，则new CSS3 stuff in IE9都不起作用。

Answer 2

Doctype应被视为所有网站的强制性要求。没有一个会导致IE进入怪癖模式。这是一件坏事。

现在情况已经很久了（自IE6发布以来），所以任何仍然不使用Doctype的人都不应该为了自己的安全而写HTML！ ;-)因此，我认为您不应该担心代码在没有doctype的情况下的外观。

但是，我想指出你绘制的CSS形状虽然非常聪明，但应该被视为黑客。在浏览器中实现任意形状有几种更好的方法。

此外，请注意，您链接的页面上的大多数形状在IE8或更早版本中不起作用。 （圆形和椭圆形使用CSS border-radius，其他许多使用transform，IE8中都不支持:before，其中相当一部分使用:after和{{1}} CSS选择器，在IE8中，但不是IE7）。即使HTML + CSS可以实现这些结果，它肯定不是为这种事情而设计的。实际上，即使在Firefox 3.6中，我也会在您链接的页面中看到一些渲染故障。

如果您想使用代码在页面上绘制形状，最好使用合适的绘图库，而不是尝试破解HTML + CSS来实现您的想法。

我会推荐像Raphael这样的库。该库可以使用矢量图形语言SVG在浏览器上绘制任意形状。它甚至可以在旧版本的IE中使用（它可以回归到类似的VML语言），因此您几乎可以获得完整的跨浏览器支持。它还支持动画和其他效果，这对于您当前使用的CSS形状来说是完全不可能的。