您的位置:首页 > Web前端 > HTML

解决VML遭遇IE8和XHTML DOCTYPE时不能运行的问题

2009-05-31 09:42 393 查看
以下代码在IE运行正常

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html xmlns:v="urn:schemas-microsoft-com:vml">

<head><title>VML</title>

<style> v/:* { behavior: url(#default#VML); } </style>

</head>

<body>

<v:rect id=myrect filled="false" stroked="false" rotation="45"

   style="position:relative;width:165px;height:55px;border:none;rotation:45;">

   <v:imagedata src="http://www.csdn.net/Images/logo_csdn.gif"/>

</v:rect>

</body>

</html>

 

如果将DOCTYPE换成XHTML的(如下)则不能运行:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head><title>VML</title>

<style> v/:* { behavior: url(#default#VML); } </style>

</head>

<body>

<v:rect id=myrect filled="false" stroked="false" rotation="45"

   style="position:relative;width:165px;height:55px;border:none;rotation:45;">

   <v:imagedata src="http://www.csdn.net/Images/logo_csdn.gif"/>

</v:rect>

</body>

</html>

 

经多方查证,得知故障原因为XHTML环境下v/:*
在样式表语法中是非法的,因而被IE8忽略而导致无法渲染VML(说明:IE7下的XHTML仍然能够识别v/:*
),而如下代码则可以正确渲染VML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

<head><title>VML</title>

<?import namespace="v" implementation="#default#VML" ?>

<style> v/:rect,v/:rect,v/:imagedata { display:inline-block } </style>

</head>

<body>

<v:rect id=myrect filled="false" stroked="false" rotation="45"

   style="position:relative;width:165px;height:55px;border:none;rotation:45;">

   <v:imagedata src="http://www.csdn.net/Images/logo_csdn.gif"/>

</v:rect>

</body>

</html>

 

秘诀就是:

<?import namespace="v" implementation="#default#VML" ?>

<style> v/:rect,v/:rect,v/:imagedata { display:inline-block } </style>

(1)通过import来引入命名空间

(2)将所有用到的vml元素分开写入样式{ display:inline-block }

 

参考网址:
https://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=333905
 

 

 
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  xhtml ie behavior html import url