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


    原文网址: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;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;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;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

  • 相关阅读:
    【c++】重载操作符
    关于Repository模式
    UML建模系列文章总结
    windows批量创建用户
    数据库数据导入导出系列之五 C#实现动态生成Word(转)
    C#.bat文件清理工程目录
    ASP.NET用HttpListener实现文件断点续传
    LINQ to JavaScript
    依赖注入框架Autofac的简单使用
    spring boot日期转换
  • 原文地址:https://www.cnblogs.com/dwfbenben/p/3414427.html
Copyright © 2020-2023  润新知