善待自己,珍惜今天,恩泽他人,享受生活

不放弃任何解决困难的机会,人的一生就是解决困难的过程。 当我们走完一生才能说没有问题要解决了。 面对工作、生活上的压力,面对来自家庭、朋友、同事、上司等的困惑。 要排除万难,否则我们就会被万难排除!

博客园 首页 新随笔 联系 订阅 管理

原文网址:http://blog.csdn.net/cuixiping/article/details/4227283 

以下代码在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

posted on 2013-11-08 15:52  笨笨丁  阅读(481)  评论(0编辑  收藏  举报