處理CSS形狀和IE Doctype

Question

我一直在研究一個涉及CSS Shapes的jQuery插件。我遇到的問題是，如果沒有聲明DOCTYPE，CSS形狀在IE8中不起作用。這將是我的第一個jQuery插件。

我的問題：jQuery開發人員如何解決這個問題？我應該在文檔中解釋一下這個插件需要使用DOCTYPE還是應該編寫單獨的CSS，以獨特模式工作？

Answer 1

沒有人故意這幾天遺漏了有效的文檔類型 - 這會導致Quirks Mode。

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

你故意想怪癖模式 - 無文檔類型。

請不要這樣做。如果沒有人更關心Windows IE 6了（已經沒有 人們關心Netscape 4.x和IE 5），那麼會爲你，你的同事或未來的 未來的繼任者帶來困擾。設計怪癖模式 是一個壞主意。相信我。

網站沒有文檔類型的唯一可能的有效原因是，如果它是一個遺留網站，它將需要太多的努力來解決它在標準模式下工作。

你的插件根本不需要在怪癖模式下工作。

您甚至不必在文檔中提及它。預計事情將會破裂。例如，如果頁面處於怪癖模式，則new CSS3 stuff in IE9都不起作用。

Answer 2

對於所有網站，Doctype應視爲強制性的。沒有人會導致IE進入怪癖模式。這是一件壞事。

現在這種情況已經很長時間了（自IE6發佈以來），所以任何仍未使用Doctype的人都不應該被允許爲了自己的安全而編寫HTML！ ;-)因此，我不認爲你應該擔心你的代碼看起來沒有文檔類型。

但是，我想指出你繪製的CSS形狀，當然非常聰明，應該被認爲是黑客。在瀏覽器中實現任意形狀有幾種比這更好的方法。

此外，請注意，您鏈接的頁面上的大部分形狀在IE8或更早版本中將不起作用。 （圓形和橢圓形使用CSS border-radius，其他許多使用transform，IE8不支持其中的任何一種，其中很多都使用:before和:after CSS選擇器，它們在IE8中，但不在IE7中）。即使在HTML + CSS可以實現這些結果的地方，它當然也不是爲這種事情設計的。事實上，即使在Firefox 3.6中，我在您鏈接的頁面中看到一些渲染故障。

如果要使用代碼在頁面上繪製圖形，最好使用適當的繪圖庫，而不是試圖破解HTML + CSS來完成您的想法。

我會推薦一個庫，如Raphael。該庫可以使用矢量圖形語言SVG在瀏覽器上繪製任意形狀。它甚至可以在舊版本的IE中使用（在這個版本中，它可以回溯到類似的語言VML），所以你幾乎可以完成跨瀏覽器的支持。它還支持動畫和其他效果，這對於當前使用的CSS形狀來說是完全不可能的。