CSS的text-rendering属性

<html xmlns="http://www.w3.org/1999/xhtml"><head><script src="https://pagead2.googlesyndication.com/pub-config/r20160913/ca-pub-8990951720398508.js"></script><script src="https://hm.baidu.com/hm.js?6bcd52f51e9b3dce32bec4a3997715ac"></script>  

    <script type="text/javascript" src="http://c.csdnimg.cn/pubfooter/js/tracking.js" charset="utf-8"></script>  

    <script type="text/javascript">
        var protocol = window.location.protocol;
        document.write('<script type="text/javascript" src="' + protocol + '//csdnimg.cn/pubfooter/js/repoAddr2.js?v=' + Math.random() + '"></' + 'script>');
    </script><script type="text/javascript" src="http://csdnimg.cn/pubfooter/js/repoAddr2.js?v=0.12369386799972082"></script>

  
 <meta http-equiv="Cache-Control" content="no-siteapp"><link rel="alternate" media="handheld" href="#">

    <title>CSS 属性text-rendering的介绍和使用 - freshlover的专栏
        - 博客频道 - CSDN.NET</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="CSS关于文本渲染的属性text-rendering告诉渲染引擎工作时如何优化显示文本。 浏览器会在渲染速度、易读性(清晰度)和几何精度方面做一个权衡。属性text-rendering正是一个SVG属性,目前尚没有任何的CSS标准对其进行定 义。不过Gecko(for Firefox)和WebKit核心的浏览器已经允许你在 Windows/Mac/Linux系统的HTML/XML内容中应用该属性。对于某些小于20px的字体来说,当你把该属性设为optimizeLegibility时,包含 诸如ff">
    <script src="http://static.blog.csdn.net/scripts/jquery.js" type="text/javascript"></script>
      <script type="text/javascript" src="http://static.blog.csdn.net/scripts/jquery-version.js"></script>
    <script type="text/javascript" src="http://static.blog.csdn.net/scripts/ad.js?v=1.1"></script>
        <!--new top-->
       
        <link rel="stylesheet" href="http://c.csdnimg.cn/public/common/toolbar/css/index.css">
        <!--new top-->
    
      <!-- ad begin -->
         <script language="javascript" type="text/javascript" src="http://ads.csdn.net/js/tracking.js"></script>
    <!-- ad end-->

    <link rel="Stylesheet" type="text/css" href="http://static.blog.csdn.net/skin/default/css/style.css?v=1.1">
    <link id="RSSLink" title="RSS" type="application/rss+xml" rel="alternate" href="/freshlover/rss/list">
    <link rel="shortcut icon" href="http://c.csdnimg.cn/public/favicon.ico">
    <link type="text/css" rel="stylesheet" href="http://static.blog.csdn.net/scripts/SyntaxHighlighter/styles/default.css">
 


<script src="http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=414002"></script><link rel="stylesheet" type="text/css" href="http://csdnimg.cn/jobreco/job_reco.css"><style type="text/css">.MathJax_Hover_Frame {border-radius: .25em; -webkit-border-radius: .25em; -moz-border-radius: .25em; -khtml-border-radius: .25em; box-shadow: 0px 0px 15px #83A; -webkit-box-shadow: 0px 0px 15px #83A; -moz-box-shadow: 0px 0px 15px #83A; -khtml-box-shadow: 0px 0px 15px #83A; border: 1px solid #A6D ! important; display: inline-block; position: absolute}
.MathJax_Hover_Arrow {position: absolute; width: 15px; height: 11px; cursor: pointer}
</style><style type="text/css">#MathJax_About {position: fixed; left: 50%; width: auto; text-align: center; border: 3px outset; padding: 1em 2em; background-color: #DDDDDD; color: black; cursor: default; font-family: message-box; font-size: 120%; font-style: normal; text-indent: 0; text-transform: none; line-height: normal; letter-spacing: normal; word-spacing: normal; word-wrap: normal; white-space: nowrap; float: none; z-index: 201; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; box-shadow: 0px 10px 20px #808080; -webkit-box-shadow: 0px 10px 20px #808080; -moz-box-shadow: 0px 10px 20px #808080; -khtml-box-shadow: 0px 10px 20px #808080; filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')}
.MathJax_Menu {position: absolute; background-color: white; color: black; width: auto; padding: 2px; border: 1px solid #CCCCCC; margin: 0; cursor: default; font: menu; text-align: left; text-indent: 0; text-transform: none; line-height: normal; letter-spacing: normal; word-spacing: normal; word-wrap: normal; white-space: nowrap; float: none; z-index: 201; box-shadow: 0px 10px 20px #808080; -webkit-box-shadow: 0px 10px 20px #808080; -moz-box-shadow: 0px 10px 20px #808080; -khtml-box-shadow: 0px 10px 20px #808080; filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')}
.MathJax_MenuItem {padding: 2px 2em; background: transparent}
.MathJax_MenuArrow {position: absolute; right: .5em; color: #666666}
.MathJax_MenuActive .MathJax_MenuArrow {color: white}
.MathJax_MenuArrow.RTL {left: .5em; right: auto}
.MathJax_MenuCheck {position: absolute; left: .7em}
.MathJax_MenuCheck.RTL {right: .7em; left: auto}
.MathJax_MenuRadioCheck {position: absolute; left: 1em}
.MathJax_MenuRadioCheck.RTL {right: 1em; left: auto}
.MathJax_MenuLabel {padding: 2px 2em 4px 1.33em; font-style: italic}
.MathJax_MenuRule {border-top: 1px solid #CCCCCC; margin: 4px 1px 0px}
.MathJax_MenuDisabled {color: GrayText}
.MathJax_MenuActive {background-color: Highlight; color: HighlightText}
.MathJax_Menu_Close {position: absolute; width: 31px; height: 31px; top: -15px; left: -15px}
</style><style type="text/css">#MathJax_Zoom {position: absolute; background-color: #F0F0F0; overflow: auto; display: block; z-index: 301; padding: .5em; border: 1px solid black; margin: 0; font-weight: normal; font-style: normal; text-align: left; text-indent: 0; text-transform: none; line-height: normal; letter-spacing: normal; word-spacing: normal; word-wrap: normal; white-space: nowrap; float: none; box-shadow: 5px 5px 15px #AAAAAA; -webkit-box-shadow: 5px 5px 15px #AAAAAA; -moz-box-shadow: 5px 5px 15px #AAAAAA; -khtml-box-shadow: 5px 5px 15px #AAAAAA; filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='gray', Positive='true')}
#MathJax_ZoomOverlay {position: absolute; left: 0; top: 0; z-index: 300; display: inline-block; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; background-color: white; opacity: 0; filter: alpha(opacity=0)}
#MathJax_ZoomFrame {position: relative; display: inline-block; height: 0; width: 0}
#MathJax_ZoomEventTrap {position: absolute; left: 0; top: 0; z-index: 302; display: inline-block; border: 0; padding: 0; margin: 0; background-color: white; opacity: 0; filter: alpha(opacity=0)}
</style><style type="text/css">.MathJax_Preview {color: #888}
#MathJax_Message {position: fixed; left: 1em; bottom: 1.5em; background-color: #E6E6E6; border: 1px solid #959595; margin: 0px; padding: 2px 8px; z-index: 102; color: black; font-size: 80%; width: auto; white-space: nowrap}
#MathJax_MSIE_Frame {position: absolute; top: 0; left: 0; width: 0px; z-index: 101; border: 0px; margin: 0px; padding: 0px}
.MathJax_Error {color: #CC0000; font-style: italic}
</style><link href="http://bdimg.share.baidu.com/static/css/bdsstyle.css?cdnversion=20131219" rel="stylesheet" type="text/css"><link rel="stylesheet" type="text/css" href="http://csdnimg.cn/rabbit/notev2/css/style.css?4d63d1f"><script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script><link rel="stylesheet" type="text/css" href="//csdnimg.cn/public/common/tag-suggest-pop/css/style.css?dd7cc7c"><link type="text/css" rel="stylesheet" href="http://passport.csdn.net/content/loginbox/style.css?r=1490413626533"><script src="http://ads.csdn.net/get_ads.php?ip=null&zones=149%7C205%7C71%7C72%7C190&iframe=false%7Cfalse%7Cfalse%7Cfalse%7Cfalse&prefix=revive-0-&loc=http%3A%2F%2Fblog.csdn.net%2Ffreshlover%2Farticle%2Fdetails%2F9853363&function (val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] === val) {
            return true;
        }
    }
    return false;
}" type="text/javascript"></script><script src="http://bdimg.share.baidu.com/static/js/logger.js?cdnversion=414004"></script><link rel="stylesheet" href="http://bdimg.share.baidu.com/static/api/css/share_style0_16.css?v=6aba13f0.css"></head>
<body><div id="BAIDU_DUP_fp_wrapper" style="position: absolute; left: -1px; bottom: -1px; z-index: 0; width: 0px; height: 0px; overflow: hidden; visibility: hidden; display: none;"><iframe id="BAIDU_DUP_fp_iframe" src="https://pos.baidu.com/wh/o.htm?ltr=" style="width: 0px; height: 0px; visibility: hidden; display: none;"></iframe></div><div id="MathJax_Message" style="display: none;"></div><iframe frameborder="0" style="display: none;"></iframe>


    <!-- 广告位开始 -->
        <ins data-revive-zoneid="149" data-revive-id="8c38e720de1c90a6f6ff52f3f89c4d57" id="revive-0-0"></ins>
    <!-- 广告位结束 -->

    
   
      <!--new top-->
    <script id="toolbar-tpl-scriptId" fixed="true" prod="blog" skin="black" src="http://c.csdnimg.cn/public/common/toolbar/js/html.js" type="text/javascript"></script><div class="csdn-toolbar csdn-toolbar-skin-black ">        <div class="container row center-block ">          <div class="col-md-3 pull-left logo clearfix"><a href="http://www.csdn.net?ref=toolbar" title="CSDN首页" target="_blank" class="icon"></a><a title="频道首页" href="http://blog.csdn.net?ref=toolbar_logo" class="img blog-icon"></a></div>          <div class="pull-right login-wrap ">            <ul class="btns">              <li class="loginlink"><a href="https://passport.csdn.net/account/login?ref=toolbar" target="_top">登录 </a>|<a target="_top" href="http://passport.csdn.net/account/mobileregister?ref=toolbar&action=mobileRegister"> 注册</a></li>              <li class="search">                <div class="icon on-search-icon">                  <div class="wrap">                    <div class="curr-icon-wrap">                      <div class="curr-icon"></div>                    </div>                    <form action="http://so.csdn.net/search" method="get" target="_blank">                      <input type="hidden" value="toolbar" name="ref" accesskey="2">                      <div class="border">                        <input placeholder="搜索" type="text" value="" name="q" accesskey="2"><span class="icon-enter-sm"></span>                      </div>                    </form>                  </div>                </div>              </li>              <li class="favor">                <div class="icon on-favor-icon">                  <div class="wrap">                    <div class="curr-icon-wrap">                      <div class="curr-icon"></div>                    </div>                    <div style="display:none;" class="favor-success"><span class="msg">收藏成功</span>                      <div class="btns"><span class="btn btn-primary ok">确定</span></div>                    </div>                    <div style="display:none;" class="favor-failed"><span class="icon-danger-lg"></span><span class="msg">收藏失败,请重新收藏</span>                      <div class="btns"><span class="btn btn-primary ok">确定</span></div>                    </div>                    <form role="form" class="form-horizontal favor-form">                      <div class="form-group">                        <div class="clearfix">                          <label for="input-title" class="col-sm-2 control-label"><span class="red_txt">*</span>标题</label>                          <div class="col-sm-10">                            <input id="inputTitle" type="text" placeholder="" class="title form-control">                          </div>                        </div>                        <div class="alert alert-danger"><strong></strong>标题不能为空</div>                      </div>                      <div class="form-group" style="display:none;">                        <label for="input-url" class="col-sm-2 control-label">网址</label>                        <div class="col-sm-10">                          <input id="input-url" type="text" placeholder="" class="url form-control">                        </div>                      </div>                      <div class="form-group">                        <label for="input-tag" class="col-sm-2 tag control-label">标签</label>                        <div class="col-sm-10">                          <input id="input-tag" type="text" class="form-control tag">                        </div>                      </div>                      <div class="form-group">                        <label for="input-description" class="description col-sm-2 control-label">位置</label>                        <div class="col-sm-10">                          <div class="my_lib_box">                            个人主页 - <a href="http://my.csdn.net/" target="_blank">我的知识</a>                          </div>                          <div class="checkbox">                            <div class="pull-left">                              <label>                                <input type="checkbox" name="share" class="save_lib_map" checked="checked">同时保存至:                              </label>                            </div>                            <div class="pull-left">                              <div class="dropdown">                                <button id="toolbar_sele_map" type="button">                                  选择知识图谱                                  <i class="fa fa-chevron-down"></i>                                </button>                                <div class="top_arr"></div>                                <div class="outside">                                  <ul class="dropdown-menu" id="toolbar_Design_knowledge"><li>Web前端</li></ul>                                </div>                              </div>                            </div>                            <div class="pull-left new_txt">                              <a href="http://lib.csdn.net/my/create/structure" target="_blank">新建?</a>                            </div>                          </div>                        </div>                      </div>                      <div class="form-group">                        <div class="col-sm-offset-2 col-sm-10 ft">                          <div class="col-sm-4 pull-left" style="display:none">                            <div class="checkbox">                              <label>                                <input type="checkbox" name="share" checked="checked" class="share">公开                              </label>                            </div>                          </div>                          <div class="col-sm-8 pull-right favor-btns">                            <button type="button" class="cancel btn btn-default">取消</button>                            <button type="submit" class="submit btn btn-primary">收藏</button>                          </div>                        </div>                      </div>                    </form>                  </div>                </div>              </li>              <li class="notify">                <div style="display:none" class="number"></div>                <div style="" class="icon-hasnotes-sm"></div>                <div id="header_notice_num"><div class="icon-hasnotes" style=""></div></div>                <div class="icon on-notify-icon">                  <div class="wrap">                    <div class="curr-icon-wrap">                      <div class="curr-icon"></div>                    </div>                    <div id="note1" class="csdn_note" style="left: -212px; top: 3869px; display: none;">                      <div class="box"><div class="notifications notice_list_con curr">  <div class="menu_title">    <span class="title"><a href="http://msg.csdn.net/letters" target="_blank" class="read_all">查看所有私信</a><a href="http://msg.csdn.net" target="_blank" class="go_all">查看所有通知</a></span>  </div>  <div class="loading"></div>  <div class="empty">暂没有新通知</div>  <div class="notice_content" style="overflow-y: auto; max-height: 270px;"></div></div><div class="notifications detail_con" style="display: none">  <div class="menu_title">    <span class="title">      <a class="go_back" href="javascript:void 0;">返回通知列表</a>      <a class="notifications_page_none nextnote" href="javascript:void 0;">下一条</a>      <a class="notifications_page prvnote" href="javascript:void 0;">上一条</a>    </span>  </div>  <div class="notice_content" style="overflow-y: scroll; height: 250px;"></div></div><div class="error"></div></div>                    <iframe src="about:block" frameborder="0" allowtransparency="true" style="z-index:-1;position:absolute;top:0;left:0;width:100%;height:100%;background:transparent"></iframe></div>                  </div>                </div>              </li>              <li class="ugc">                <div class="icon on-ugc-icon">                  <div class="wrap clearfix">                    <div class="curr-icon-wrap">                      <div class="curr-icon"></div>                    </div>                    <dl>                      <dt><a href="http://geek.csdn.net/news/expert?ref=toolbar" target="_blank" class="p-news clearfix" style="display:none;"><em class="icon"></em><span>分享资讯</span></a></dt>                      <dt style="border: none;"><a href="http://u.download.csdn.net/upload?ref=toolbar" target="_blank" class="p-doc clearfix"><em class="icon"></em><span>传PPT/文档</span></a></dt>                      <dt><a href="http://bbs.csdn.net/topics/new?ref=toolbar" target="_blank" class="p-ask clearfix"><em class="icon"></em><span>提问题</span></a></dt>                      <dt><a href="http://write.blog.csdn.net/postedit?ref=toolbar" target="_blank" class="p-blog clearfix"><em class="icon"></em><span>写博客</span></a></dt>                      <dt><a href="http://u.download.csdn.net/upload?ref=toolbar" target="_blank" class="p-src clearfix"><em class="icon"></em><span>传资源</span></a></dt>                      <dt><a href="https://code.csdn.net/projects/new?ref=toolbar" target="_blank" class="c-obj clearfix"><em class="icon"></em><span>创建项目</span></a></dt>                      <dt><a href="https://code.csdn.net/snippets/new?ref=toolbar" target="_blank" class="c-code clearfix"><em class="icon"></em><span>创建代码片</span></a></dt>                    </dl>                  </div>                </div>              </li>              <li class="profile">                <div class="icon on-profile-icon"><img src="http://avatar.csdn.net/F/4/3/2_u013411250.jpg" class="curr-icon-img">                  <div class="wrap clearfix">                    <div class="curr-icon-wrap">                      <div class="curr-icon"></div>                    </div>                    <div class="bd">                      <dl class="clearfix">                        <dt class="pull-left img"><a target="_blank" href="http://my.csdn.net?ref=toolbar" class="avatar"><img src="http://avatar.csdn.net/F/4/3/2_u013411250.jpg"></a></dt>                        <dd class="info" style="border: none;"><a target="_blank" href="http://my.csdn.net?ref=toolbar" class="nickname">Jolin_21</a><span class="dec"><a class="fill-dec" href="//my.csdn.net" target="_blank">编辑自我介绍,让更多人了解你<span class="write-icon"></span></a></span></dd>                      </dl>                    </div>                    <div class="ft clearfix"><a target="_blank" href="http://my.csdn.net/my/account/changepwd?ref=toolbar" class="pull-left"><span class="icon-cog"></span>帐号设置</a><a href="https://passport.csdn.net/account/logout?ref=toolbar" target="_top" class="pull-left" style="margin-left:132px; width:18px; height:27px; white-space:nowrap; overflow:hidden;"><span class="icon-signout"></span><span class="out">退出</span></a></div>                  </div>                </div>              </li>              <li class="apps">                <div id="chasnew123" class="hasnew" style="display: none;"></div>                <div id="cappsarea123" class="icon on-apps-icon">                  <div class="wrap clearfix">                    <div class="curr-icon-wrap">                      <div class="curr-icon"></div>                    </div>                  <div class="detail">                    <dl>                      <dt>                        <h5>社区</h5>                      </dt>                      <dd> <a href="http://blog.csdn.net?ref=toolbar" target="_blank">博客</a></dd>                      <dd> <a href="http://bbs.csdn.net?ref=toolbar" target="_blank">论坛</a></dd>                      <dd> <a href="http://download.csdn.net?ref=toolbar" target="_blank">下载</a></dd>                      <dd> <a href="http://lib.csdn.net?ref=toolbar" target="_blank">知识库</a></dd>                      <dd><a href="http://ask.csdn.net?ref=toolbar" target="_blank">技术问答</a></dd>                      <dd><a href="http://geek.csdn.net?ref=toolbar" target="_blank">极客头条</a></dd>                      <dd style="display:none"> <a href="http://hero.csdn.net?ref=toolbar" target="_blank">英雄会</a></dd>                    </dl>                  </div>                  <div class="detail">                    <dl>                      <dt>                        <h5>服务</h5>                      </dt>                      <dd style="display:none"> <a href="http://job.csdn.net?ref=toolbar" target="_blank">JOB<img src="http://c.csdnimg.cn/public/common/toolbar/images/new.gif" style="display: none; margin-top: -26px; width: 23px;"></a></dd>                      <dd> <a href="http://edu.csdn.net?ref=toolbar" target="_blank">学院<img src="http://c.csdnimg.cn/public/common/toolbar/images/new.gif" style="display: none; margin-top: -26px; width: 23px;"></a></dd>                      <dd> <a href="https://code.csdn.net?ref=toolbar" target="_blank">CODE</a></dd>                      <dd> <a href="http://huiyi.csdn.net/?ref=toolbar" target="_blank">活动</a></dd>                      <dd> <a href="http://www.csto.com?ref=toolbar" target="_blank">CSTO</a></dd>                      <dd> <a href="http://mall.csdn.net?ref=toolbar" target="_blank">C币兑换<img src="http://c.csdnimg.cn/public/common/toolbar/images/new.gif" style="display: none; margin-top: -26px; width: 23px;"></a></dd>                    </dl>                  </div>                  <div class="detail last">                    <dl>                      <dt>                        <h5>俱乐部</h5>                      </dt>                      <dd> <a href="http://cto.csdn.net?ref=toolbar" target="_blank">CTO俱乐部</a></dd>                      <dd> <a href="http://student.csdn.net?ref=toolbar" target="_blank">高校俱乐部</a></dd>                    </dl>                  </div>                </div>              </div>            </li>            </ul>          </div>        </div>    </div>
     <!--new top-->
    <div id="container">
        <div id="header">
    <div class="header">
        <div id="blog_title">
            <h2>
                <a href="http://blog.csdn.net/freshlover">freshlover的专栏</a></h2>
            <h3></h3>
            <div class="clear">
            </div>
        </div>
        <div class="clear">
        </div>
        
     
    </div>
</div>
<div id="navigator">
    <div class="navigator_bg">
    </div>
    <div class="navigator">
        <ul>           
                <li id="btnContents"><a href="http://blog.csdn.net/freshlover?viewmode=contents"><span οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_mulu'])">
                    <img src="http://static.blog.csdn.net/images/ico_list.gif">目录视图</span></a></li>
                <li id="btnView"><a href="http://blog.csdn.net/freshlover?viewmode=list"><span οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_zhaiyao'])">
                    <img src="http://static.blog.csdn.net/images/ico_summary.gif">摘要视图</span></a></li>
                <li id="btnRss"><a href="http://blog.csdn.net/freshlover/rss/list"><span οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_RSS'])">
                    <img src="http://static.blog.csdn.net/images/ico_rss.gif">订阅</span></a></li>                
            

            </ul>
    </div>
</div>
<script type="text/javascript">
    var username = "freshlover";
    var _blogger = username;
    var blog_address = "http://blog.csdn.net/freshlover";
    var static_host = "http://static.blog.csdn.net";
    var currentUserName = "";  
</script>

        <div id="body">
            <div id="main">
                <div class="main">
                        <div class="ad_class">
<div class="notice tracking-ad" data-mod="popu_3"> 


<a href="http://blog.csdn.net/blogdevteam/article/details/65629853" target="_blank">
<font color="blue">【CSDN 日报】| 2.17-3.17 上榜作者排行出炉 </font></a>

    

<a href="http://blog.csdn.net/blogdevteam/article/details/60961185" target="_blank">
<font color="red">同步博客至 CSDN ,让更多开发者看到你的文章
</font></a>
    

<a href="http://edu.csdn.net/huiyiCourse/series_detail/29?ref=blog&loc=r0" target="_blank">
<font color="blue">看微博技术大咖解析互联网应用架构实战
</font></a>
</div>                        </div>
                        



  
<link href="http://static.blog.csdn.net/css/comment1.css" type="text/css" rel="stylesheet">
<link href="http://static.blog.csdn.net/css/style1.css" type="text/css" rel="stylesheet">
<script language="JavaScript" type="text/javascript" src="http://download.csdn.net/js/jquery.cookie.js"></script>
<script type="text/javascript" src="http://c.csdnimg.cn/rabbit/search-service/main.js"></script>
<link rel="stylesheet" href="http://static.blog.csdn.net/public/res-min/markdown_views.css?v=1.0">
<link rel="stylesheet" href="http://static.blog.csdn.net/css/category.css?v=1.0">
<script type="text/javascript" src="http://static.blog.csdn.net/public/res/bower-libs/MathJax/MathJax.js?config=TeX-AMS_HTML"></script>
<script type="text/javascript" src="http://static.blog.csdn.net/scripts/web-storage-cache.min.js"></script>
<script type="text/javascript" src="http://static.blog.csdn.net/scripts/replace.min.js"></script>




  <script type="text/ecmascript">
      window.quickReplyflag = true;
           
            var isBole = false;
            
      
      var fasrc="http://my.csdn.net/my/favorite/miniadd?t=CSS+%e5%b1%9e%e6%80%a7text-rendering%e7%9a%84%e4%bb%8b%e7%bb%8d%e5%92%8c%e4%bd%bf%e7%94%a8&u=http://blog.csdn.net/freshlover/article/details/9853363"

    </script>
<div id="article_details" class="details">
    <div class="article_title">   
         <span class="ico ico_type_Original"></span>


    <h1>
        <span class="link_title"><a href="/freshlover/article/details/9853363">
        CSS 属性text-rendering的介绍和使用            
        </a></span>
    </h1>
</div>

   

        <div class="article_manage clearfix">
        <div class="article_l">
            <span class="link_categories">
            标签:
              <a href="http://www.csdn.net/tag/text-rendering" target="_blank" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">text-rendering</a><a href="http://www.csdn.net/tag/%e6%96%87%e6%9c%ac%e6%b8%b2%e6%9f%93" target="_blank" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">文本渲染</a>
            </span>
        </div>
        <div class="article_r">
            <span class="link_postdate">2013-08-09 13:20</span>
            <span class="link_view" title="阅读次数">10210人阅读</span>
            <span class="link_comments" title="评论次数"> <a href="#comments" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_pinglun'])">评论</a>(0)</span>
            <span class="link_collect tracking-ad" data-mod="popu_171"> <a href="javascript:void(0);" οnclick="javascript:collectArticle('CSS+%e5%b1%9e%e6%80%a7text-rendering%e7%9a%84%e4%bb%8b%e7%bb%8d%e5%92%8c%e4%bd%bf%e7%94%a8','9853363');return false;" title="收藏" target="_blank">收藏</a></span>
             <span class="link_report"> <a href="#report" οnclick="javascript:report(9853363,2);return false;" title="举报">举报</a></span>

        </div>
    </div>
    <div class="embody" style="display:none" id="embody">
        <span class="embody_t">本文章已收录于:</span>
        <div class="embody_c" id="lib" value="{"err":0,"msg":"ok","data":[]}"></div>
    </div>
    <style type="text/css">        
            .embody{
                padding:10px 10px 10px;
                margin:0 -20px;
                border-bottom:solid 1px #ededed;                
            }
            .embody_b{
                margin:0 ;
                padding:10px 0;
            }
            .embody .embody_t,.embody .embody_c{
                display: inline-block;
                margin-right:10px;
            }
            .embody_t{
                font-size: 12px;
                color:#999;
            }
            .embody_c{
                font-size: 12px;
            }
            .embody_c img,.embody_c em{
                display: inline-block;
                vertical-align: middle;               
            }
             .embody_c img{               
                width:30px;
                height:30px;
            }
            .embody_c em{
                margin: 0 20px 0 10px;
                color:#333;
                font-style: normal;
            }
    </style>
    <script type="text/javascript">
        $(function () {
            try
            {
                var lib = eval("("+$("#lib").attr("value")+")");
                var html = "";
                if (lib.err == 0) {
                    $.each(lib.data, function (i) {
                        var obj = lib.data[i];
                        //html += '<img src="' + obj.logo + '"/>' + obj.name + "  ";
                        html += ' <a href="' + obj.url + '" target="_blank">';
                        html += ' <img src="' + obj.logo + '">';
                        html += ' <em><b>' + obj.name + '</b></em>';
                        html += ' </a>';
                    });
                    if (html != "") {
                        setTimeout(function () {
                            $("#lib").html(html);                      
                            $("#embody").show();
                        }, 100);
                    }
                }      
            } catch (err)
            { }
            
        });
    </script>
      <div class="category clearfix">
        <div class="category_l">
           <img src="http://static.blog.csdn.net/images/category_icon.jpg">
            <span>分类:</span>
        </div>
        <div class="category_r">
                    <label οnclick="GetCategoryArticles('1370873','freshlover','top','9853363');">
                        <span οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_fenlei']);">前端开发<em>(43)</em></span>
                      <img class="arrow-down" src="http://static.blog.csdn.net/images/arrow_triangle _down.jpg" style="display:inline;">
                      <img class="arrow-up" src="http://static.blog.csdn.net/images/arrow_triangle_up.jpg" style="display:none;">
                        <div class="subItem">
                            <div class="subItem_t"><a href="http://blog.csdn.net/freshlover/article/category/1370873" target="_blank">作者同类文章</a><i class="J_close">X</i></div>
                            <ul class="subItem_l" id="top_1370873">                            
                            </ul>
                        </div>
                    </label>                    
        </div>
    </div>
    <script type="text/javascript" src="http://static.blog.csdn.net/scripts/category.js"></script>  
        <div class="bog_copyright">         
            <p class="copyright_p">版权声明:本文为博主原创文章,未经博主允许不得转载。</p>
        </div>

  

  
  
     

<div id="article_content" class="article_content">

<span style="font-size:14px"><strong>摘要:</strong><br>
<br>
CSS关于文本渲染的属性<strong>text-rendering告诉渲染引擎工作时如何优化显示文本。 浏览器会在渲染速度、易读性(清晰度)和几何精度方面做一个权衡。</strong><br>
<br>
我们知道,SVG-可缩放矢量图形(Scalable Vector Graphics)是由W3C制定的, 基于<br>
可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG严格遵从 XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率 无关的矢量图形格式。IE 9、Firefox、Opera、Chrome 以及 Safari 支持内联  SVG。IE 8或更早版本,可通过安装Adobe SVG Viewer以支持SVG。<br>
<br>
而属性text-rendering正<strong>是一个SVG属性,目前尚没有任何的CSS标准对其进行定 义</strong>。<br>
<br>
不过<strong>Gecko(for Firefox)和WebKit核心的浏览器已经允许你在 Windows/Mac/Linux系统的HTML/XML内容中应用该属性。</strong><br>
<br>
对于某些小于20px的字体来说,当你把该属性设为optimizeLegibility时,包含 诸如ff、fl、fi这种连字的文本会产生一个非常明显的效果,比如Microsoft's  Calibri, Candara, Constantia, Corbel和DejaVu类字体。如果你对连字不太理 解,可以参考维基百科的<a target="_blank" href="http://en.wikipedia.org/wiki/Typographic_ligature">解释</a>
 http://en.wikipedia.org/wiki/Typographic_ligature<br>
<br>
<u>默认值:auto<br>
适用于:文本元素<br>
继承性:yes<br>
媒介类型(Media Types):可视型(公认的媒介类型包括哪些?参见W3C文档 http://www.w3.org/TR/CSS2/media.html)<br>
</u><br>
<strong>语法:</strong><br>
<br>
格式:text-rendering: auto | optimizeSpeed | optimizeLegibility |  geometricPrecision |  inherit<br>
<br>
<strong>值:<br>
<br>
auto:</strong><br>
当绘制文本时,浏览器会进行智能识别,何时应该从速度、清晰度和几何精度方 面进行优化。关于各浏览器对该属性解释的差别,参见下面的兼容性表格。<br>
<br>
<strong>optimizeSpeed:</strong><br>
当绘制文本时,浏览器会着重渲染速度,而不是清晰度和几何精度。该属性值不 能用于字距调整和连字。<span style="font-size:14px">Gecko默认开启该属性,Firefox 是默认20px以下<span style="font-size:14px">开启该属性</span>。</span><br>
<br>
<strong>optimizeLegibility:</strong><br>
当绘制文本时,浏览器会侧重文本的可读性(清晰度),而不是渲染速度和几何 精度。该属性值可以用于字距调整和连字。<br>
<span style="font-size:14px">使</span>用CSS 3的@font-face来渲染文字的情况越来越多,易读性开始被关注<span style="font-size:14px">和重视</span>。尤其是小号的文字。由于目前还没有CSS属性控制显示在线字体的微妙细节,Safari 5,Chrome和Webkit系列浏览器支持text-rendering启用kerning 和 ligatures。<br>
Gecko 和WebKit 浏览器处理这个属性的方式很不一样。前者默认启用这个特性, 而后者,你需要将其设置为optimizeLegibility。Firefox<span style="font-size:14px">默认20px以上字体文本会开启该属性。</span><br>
<strong>geometricPrecision:</strong><br>
当绘制文本时,浏览器会着重几何精度,而不是清晰度和渲染速度。字体的某些 方面,比如字间距并不是按照线性比例进行渲染的,因此该属性可以使得设置为 这些字体的文本看起来很整洁。<br>
<br>
在SVG中,当文本被放大或缩小,浏览器会计算文本的最终尺寸(即指定字体大小 和应用比例),然后按照计算出来的尺寸,从系统的字体库中请求一种合适的字 体。但是,如果你要求的字体大小,比如9px字号的140%的比例,产生的字号12.6 在字体库中并不存在,所以此时浏览器会将字号舍为12px。这导致了文本的阶梯 缩放。<br>
<br>
不过,当渲染引擎完全支持几何精度属性时,你可以利用几何精度属性流畅地缩 放文本。对于比较大的缩放因子,你可能看不到特别完美的渲染效果,但显示字 号将会是你所期待的大小,既不会向上也不向下四舍五入Windows/Linux支持的字 号大小。<br>
<br>
如果定义为geometricPrecision,Webkit精确应用定义的属性值,Gecko则将 geometricPrecision解释为optimizeLegibility,其表现与设置为 optimizeLegibility的表现是一样的.<br>
<br>
<strong>实例</strong><br>
<br>
</span>
<p><span style="font-size:14px">/* 对body应用optimizeLegibility保证整个html文档的易读性,但可能出现文字连写的效果,对元素应用class='foo'可以避免出现文字连写现象 */</span></p>
<p><span style="font-size:14px"><br>
</span></p>
<span style="font-size:14px"></span><div class="dp-highlighter bg_css"><div class="bar"><div class="tools"><b>[css]</b> <a href="#" class="ViewSource" title="view plain" οnclick="dp.sh.Toolbar.Command('ViewSource',this);return false;">view plain</a><span data-mod="popu_168"> <a href="#" class="CopyToClipboard" title="copy" οnclick="dp.sh.Toolbar.Command('CopyToClipboard',this);return false;">copy</a><div style="position: absolute; left: 555px; top: 2332px; width: 18px; height: 18px; z-index: 99;"><embed id="ZeroClipboardMovie_1" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="18" height="18" name="ZeroClipboardMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=18&height=18" wmode="transparent"></div></span><span data-mod="popu_169"> <a href="#" class="PrintSource" title="print" οnclick="dp.sh.Toolbar.Command('PrintSource',this);return false;">print</a></span><a href="#" class="About" title="?" οnclick="dp.sh.Toolbar.Command('About',this);return false;">?</a></div></div><ol start="1" class="dp-css"><li class="alt"><span><span>body  { text-rendering: optimizeLegibility; }  </span></span></li><li class=""><span>.foo  { text-rendering: optimizeSpeed; }  </span></li></ol><div class="save_code tracking-ad" data-mod="popu_249" style="display: none;"><a href="javascript:;" target="_blank"><img src="http://static.blog.csdn.net/images/save_snippets_01.png"></a></div></div><pre name="code" class="css" style="display: none;">body  { text-rendering: optimizeLegibility; }
.foo  { text-rendering: optimizeSpeed; }</pre><br>
<table class="standard-table         ">
<tbody>
<tr>
<th>CSS 代码</th>
<th>字间距Kerning</th>
<th>连字效果Ligatures</th>
</tr>
<tr style="font:19.9px 'DejaVu Serif',Constantia">
<td style="font:medium monospace">font: 19.9px 'DejaVu Serif',Constantia;</td>
<td>LYoWAT</td>
<td>ff fi fl ffl</td>
</tr>
<tr style="font:20px 'DejaVu Serif',Constantia">
<td style="font:medium monospace">font: 20px 'DejaVu Serif',Constantia;</td>
<td>LYoWAT</td>
<td>ff fi fl ffl</td>
</tr>
<tr style="font:3em 'DejaVu Serif',Constantia">
<td style="font:medium monospace">font: 3em 'DejaVu Serif',Constantia;<br>
text-rendering: optimizeSpeed;</td>
<td>LYoWAT</td>
<td>ff fi fl ffl</td>
</tr>
<tr style="font:3em 'Dejavu Serif',Constantia">
<td style="font:medium monospace">font: 3em 'Dejavu Serif',Constantia;<br>
text-rendering: optimizeLegibility;</td>
<td>LYoWAT</td>
<td>ff fi fl ffl</td>
</tr>
</tbody>
</table>
<span style="font-size:14px"><strong><br>
Gecko核心浏览器注意事项:</strong><br>
<br>
属性值设为auto时有个20px的渲染阈值,这个阈值可以通过更改偏好设置browser.display.auto_quality_min_font_size这一项。(对于Firefox,首先在浏览器键入about:config回车即可进入,更多更改配置选项的方法参见<a target="_blank" href="http://kb.mozillazine.org/Editing_configuration">这里</a>http://kb.mozillazine.org/Editing_configuration),如果你想了解更多有关mozilla
 preference-<a target="_blank" href="http://kb.mozillazine.org/Browser.display.auto_quality_min_font_size"> browser.display.auto_quality_min_font_size</a>的介绍可以查看官方文档http://kb.mozillazine.org/Browser.display.auto_quality_min_font_size。<br>
<br>
optimizeSpeed选项在Gecko2.0(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)上无效。因为文本渲染的标准代码已经足够快,没有比它更快的代码路径。这是一个bug。参见<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=595688">bug 595688</a> .https://bugzilla.mozilla.org/show_bug.cgi?id=595688<br>
<br>
<strong>浏览器兼容表:</strong><br>
</span>
<p></p>
<table class="compat-table        ">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support for Windows and Linux</td>
<td>
<p>4.0 but the implementation known bugs on Windows and <a href="http://lib.csdn.net/base/linux" class="replace_word" title="Linux知识库" target="_blank" style="color:#df3434; font-weight:bold;">Linux</a> which can break <a target="_blank" class="external" href="http://crbug.com/114719" title="http://crbug.com/114719">font substitition</a>,<a target="_blank" class="external" href="http://crbug.com/51973" title="http://crbug.com/51973">small-caps</a>,<a target="_blank" class="external" href="http://crbug.com/55458" title="http://crbug.com/55458">letter-spacing</a> or
 cause <a target="_blank" class="external" href="http://crbug.com/149548" title="http://crbug.com/149548">
text to overlap</a></p>
</td>
<td><strong>3.0</strong> (1.9)</td>
<td><span style="color:#ff0000">Not supported</span></td>
<td><span style="color:#ff0000">Not supported</span></td>
<td>5.0 (532.5)</td>
</tr>
<tr>
<td>Basic support for other operating systems</td>
<td><span style="color:#ff0000">Not supported</span></td>
<td><span style="color:#ff0000">Not supported</span></td>
<td><span style="color:#ff0000">Not supported</span></td>
<td><span style="color:#ff0000">Not supported</span></td>
<td><span style="color:#ff0000">Not supported</span></td>
</tr>
<tr>
<td><code>auto</code></td>
<td>Chrome treats this as <code>optimizeSpeed</code>.<br>
Work is continuing on<a target="_blank" class="external" href="https://bugs.webkit.org/show_bug.cgi?id=41363" rel="external" title="">WebKit bug 41363</a></td>
<td>If the font size is 20 px or higher, Gecko browsers use <code>optimizeLegibility</code>; for smaller text, they use<code>optimizeSpeed</code>.</td>
<td><span style="color:#ff0000">Not supported</span></td>
<td><span style="color:#ff0000">Not supported</span></td>
<td>Safari treats this as <code>optimizeSpeed</code>.<br>
Work is continuing on<a target="_blank" class="external" href="https://bugs.webkit.org/show_bug.cgi?id=41363" rel="external" title="">WebKit bug 41363</a></td>
</tr>
<tr>
<td><code>geometricPrecision</code></td>
<td>13 supports true geometric precision, without rounding up or down to the nearest supported font size in the operating system.<br>
Introduced in WebKit 535.1   <a target="_blank" class="external" href="https://bugs.webkit.org/show_bug.cgi?id=60317" rel="external" title="">
WebKit bug 60317</a></td>
<td>Gecko treats the value the same as <code>optimizeLegibility</code>.</td>
<td> <span style="color:#ff0000">Not supported</span></td>
<td> <span style="color:#ff0000">Not supported</span></td>
<td> </td>
</tr>
</tbody>
</table>
<p><strong><br>
</strong></p>
<p><strong><span style="font-size:14px">存在的问题:</span></strong></p>
<span style="font-size:14px">混合使用optimizeLegibility和font-variant: small-caps会导致small-caps渲染失败。最糟糕的情况是文本不显示在Web页面上,在低配置的移动设备上可能导致页面无法正常加载。(问题bug<a target="_blank" href="http://code.google.com/p/chromium/issues/detail?id=51973">原文</a>http://code.google.com/p/chromium/issues/detail?id=51973)<br>
对Safari 5,使用ex作为 margin, padding, border-width ,outline-width的度量单位,同时使用optimizeLegibility会导致浏览器崩溃。不过本人测试Safari 5.1.7(7534.57.2)中文版貌似已经修复了崩溃的问题。(<a target="_blank" href="http://quorning.net/safari_crash.htm">测试页面</a>地址http://quorning.net/safari_crash.htm)</span>
   
</div>




<!-- Baidu Button BEGIN -->




<div class="bdsharebuttonbox tracking-ad bdshare-button-style0-16" style="float: right;" data-mod="popu_172" data-bd-bind="1490413627660">
<a href="#" class="bds_more" data-cmd="more" style="background-position:0 0 !important; background-image: url(http://bdimg.share.baidu.com/static/api/img/share/icons_0_16.png?v=d754dcc0.png) !important" target="_blank"></a>
<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间" style="background-position:0 -52px !important" target="_blank"></a>
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博" style="background-position:0 -104px !important" target="_blank"></a>
<a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博" style="background-position:0 -260px !important" target="_blank"></a>
<a href="#" class="bds_renren" data-cmd="renren" title="分享到人人网" style="background-position:0 -208px !important" target="_blank"></a>
<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信" style="background-position:0 -1612px !important" target="_blank"></a>
</div>
<script>window._bd_share_config = { "common": { "bdSnsKey": {}, "bdText": "", "bdMini": "1", "bdMiniList": false, "bdPic": "", "bdStyle": "0", "bdSize": "16" }, "share": {} }; with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];</script>
<!-- Baidu Button END -->

   <link rel="stylesheet" href="http://static.blog.csdn.net/css/blog_detail.css">

    
<!--172.16.140.11-->

<!-- Baidu Button BEGIN -->
<script type="text/javascript" id="bdshare_js" data="type=tools&uid=1536434" src="http://bdimg.share.baidu.com/static/js/bds_s_v2.js?cdnversion=414004"></script>

<script type="text/javascript">
    document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)
</script>
<!-- Baidu Button END -->

 


        <div id="digg" articleid="9853363">
            <dl id="btnDigg" class="digg digg_disable" οnclick="btndigga();">
               
                 <dt>顶</dt>
                <dd>1</dd>
            </dl>
           
              
            <dl id="btnBury" class="digg digg_disable" οnclick="btnburya();">
              
                  <dt>踩</dt>
                <dd>0</dd>               
            </dl>
            
        </div>
     <div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);" target="_blank"> </a>   </div>
    <div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);" target="_blank"> </a></div>
    <script type="text/javascript">
                function btndigga() {
                    $(".tracking-ad[data-mod='popu_222'] a").click();
                }
                function btnburya() {
                    $(".tracking-ad[data-mod='popu_223'] a").click();
                }
            </script>

   <ul class="article_next_prev">
                <li class="prev_article"><span οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_shangyipian']);location.href='/freshlover/article/details/9840181';">上一篇</span><a href="/freshlover/article/details/9840181" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_shangyipian'])">nginx配置方法</a></li>
                <li class="next_article"><span οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_xiayipian']);location.href='/freshlover/article/details/10178091';">下一篇</span><a href="/freshlover/article/details/10178091" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_xiayipian'])">JavaScript跨域总结与解决办法</a></li>
    </ul>

    <div style="clear:both; height:10px;"></div>


        <div class="similar_article" style="">
                <h4>我的同类文章</h4>
                <div class="similar_c" style="margin:20px 0px 0px 0px">
                    <div class="similar_c_t">
                                <label class="similar_cur">
                                    <span style="cursor:pointer" οnclick="GetCategoryArticles('1370873','freshlover','foot','9853363');">前端开发<em>(43)</em></span>
                                </label>
                    </div>
                   
                    <div class="similar_wrap tracking-ad" data-mod="popu_141" style="max-height:195px;">
                        <a href="http://blog.csdn.net" style="display:none" target="_blank">http://blog.csdn.net</a>
                        <ul class="similar_list fl"><li><em>•</em><a href="http://blog.csdn.net/freshlover/article/details/44454991" id="foot_aritcle_44454991undefined8657384540317041" target="_blank" title="信不信由你!iPhone6屏幕宽度不一定是375px,iPhone6 Plus屏幕宽度不一定是414px">信不信由你!iPhone6屏幕宽度不一定是375px,iPhone6 Plus屏幕宽度不一定是414px</a><span>2015-03-19</span><label><i>阅读</i><b>23653</b></label></li> <li><em>•</em><a href="http://blog.csdn.net/freshlover/article/details/44223467" id="foot_aritcle_44223467undefined48949368423736095" target="_blank" title="Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法">Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法</a><span>2015-03-12</span><label><i>阅读</i><b>33374</b></label></li> <li><em>•</em><a href="http://blog.csdn.net/freshlover/article/details/42528643" id="foot_aritcle_42528643undefined005959698620864762" target="_blank" title="移动端Web开发调试之Chrome远程调试(Remote Debugging)">移动端Web开发调试之Chrome远程调试(Remote Debugging)</a><span>2015-01-08</span><label><i>阅读</i><b>96038</b></label></li> <li><em>•</em><a href="http://blog.csdn.net/freshlover/article/details/38301787" id="foot_aritcle_38301787undefined09734880476471486" target="_blank" title="百度分享新浪微博无法分享图片的解决方法">百度分享新浪微博无法分享图片的解决方法</a><span>2014-07-30</span><label><i>阅读</i><b>7220</b></label></li> <li><em>•</em><a href="http://blog.csdn.net/freshlover/article/details/25322839" id="foot_aritcle_25322839undefined23533140939216124" target="_blank" title="最齐全的网站元数据meta标签的含义和用法">最齐全的网站元数据meta标签的含义和用法</a><span>2014-05-08</span><label><i>阅读</i><b>15088</b></label></li> <li><em>•</em><a href="http://blog.csdn.net/freshlover/article/details/17244031" id="foot_aritcle_17244031undefined69735275307704" target="_blank" title="【精心推荐】20款优秀 jQuery Accordion(手风琴)特效插件">【精心推荐】20款优秀 jQuery Accordion(手风琴)特效插件</a><span>2013-12-10</span><label><i>阅读</i><b>5242</b></label></li> </ul>

                        <ul class="similar_list fr"><li><em>•</em><a href="http://blog.csdn.net/freshlover/article/details/44261229" id="foot_aritcle_44261229undefined9702329594765684" target="_blank" title="Sublime Text 无法使用Package Control或插件安装失败的解决方法">Sublime Text 无法使用Package Control或插件安装失败的解决方法</a><span>2015-03-14</span><label><i>阅读</i><b>170417</b></label></li> <li><em>•</em><a href="http://blog.csdn.net/freshlover/article/details/42640253" id="foot_aritcle_42640253undefined9449536262310618" target="_blank" title="移动端Web开发调试之Weinre调试教程">移动端Web开发调试之Weinre调试教程</a><span>2015-01-12</span><label><i>阅读</i><b>26047</b></label></li> <li><em>•</em><a href="http://blog.csdn.net/freshlover/article/details/40827207" id="foot_aritcle_40827207undefined0723057978939301" target="_blank" title="[整理]JavaScript跨域解决方法大全">[整理]JavaScript跨域解决方法大全</a><span>2014-11-05</span><label><i>阅读</i><b>6493</b></label></li> <li><em>•</em><a href="http://blog.csdn.net/freshlover/article/details/29592407" id="foot_aritcle_29592407undefined26352282913365865" target="_blank" title="Sublime Text2两款漂亮的主题皮肤安装与切换使用方法">Sublime Text2两款漂亮的主题皮肤安装与切换使用方法</a><span>2014-06-09</span><label><i>阅读</i><b>80625</b></label></li> <li><em>•</em><a href="http://blog.csdn.net/freshlover/article/details/17426893" id="foot_aritcle_17426893undefined8049760736479139" target="_blank" title="Responsive Design响应式网站设计心得笔记">Responsive Design响应式网站设计心得笔记</a><span>2013-12-19</span><label><i>阅读</i><b>5705</b></label></li> </ul>
                    <a href="http://blog.csdn.net/freshlover/article/category/1370873" class="MoreArticle">更多文章</a></div>
                </div>
            </div>    
    <script type="text/javascript">
        $(function () {
            GetCategoryArticles('1370873', 'freshlover','foot','9853363');
        });
    </script>
      
</div>

    <div>
            <div class="J_adv" data-view="true" data-mod="ad_popu_205" data-mtp="43" data-order="114" data-con="ad_content_1900" style="width: 728px; height: 90px;"><script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-8990951720398508" data-ad-slot="8267689356/3776917242" data-adsbygoogle-status="done"><ins id="aswift_0_expand" style="display:inline-table;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px;background-color:transparent"><ins id="aswift_0_anchor" style="display:block;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px;background-color:transparent"><iframe width="728" height="90" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" οnlοad="var i=this.id,s=window.google_iframe_oncopy,H=s&&s.handlers,h=H&&H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_0" name="aswift_0" style="left:0;position:absolute;top:0;"></iframe></ins></ins></ins><script>(adsbygoogle=window.adsbygoogle || []).push({});</script></div> 
     </div>

<div id="suggest">

</div>
         <script language="javascript" type="text/javascript">     
             $(function(){
                 $.get("/freshlover/svc/GetSuggestContent/9853363",function(data){
                     $("#suggest").html(data);
                 });     
             });             
         </script>  


<style>
.blog-ass-articl dd {
color: #369;
width: 99%; /*修改行*/
float: left;
overflow: hidden;
font: normal normal 12px/23px "SimSun";
height: 23px;
margin: 0;
padding: 0 0 0 10px;
margin-right: 30px;
background: url(http://static.blog.csdn.net/skin/default/images/blog-dot-red3.gif) no-repeat 0 10px;
}
</style>

 <link rel="stylesheet" href="http://static.blog.csdn.net/css/replace.css">

<div id="relate" data-mod="popu_218" class="tracking-ad" style="display: block;">
        <div class="relate_t">
            <h3><span>参考知识库</span></h3>
        </div>
        <div class="relate_c"><dl class="relate_list"><dt><a target="_blank" href="http://lib.csdn.net/base/dotnet"><img src="http://img.knowledge.csdn.net/upload/base/1470876331285_285.jpg" alt="img"></a></dt><dd><h4><a target="_blank" href="http://lib.csdn.net/base/dotnet">.NET知识库</a></h4><p><label><span>3500</span><em>关注</em><i>|</i><span>827</span><em>收录</em></label></p></dd></dl><dl class="relate_list"><dt><a target="_blank" href="http://lib.csdn.net/base/linux"><img src="http://img.knowledge.csdn.net/upload/base/1468390230134_134.jpg" alt="img"></a></dt><dd><h4><a target="_blank" href="http://lib.csdn.net/base/linux">Linux知识库</a></h4><p><label><span>11007</span><em>关注</em><i>|</i><span>3803</span><em>收录</em></label></p></dd></dl><dl class="relate_list"><dt><a target="_blank" href="http://lib.csdn.net/base/softwaretest"><img src="http://img.knowledge.csdn.net/upload/base/1467193268346_346.jpg" alt="img"></a></dt><dd><h4><a target="_blank" href="http://lib.csdn.net/base/softwaretest">软件测试知识库</a></h4><p><label><span>4157</span><em>关注</em><i>|</i><span>310</span><em>收录</em></label></p></dd></dl></div>
</div>
 

<dl class="blog-ass-articl" id="res-relatived"> 
    <div class="embody embody_b" id="libkeyparent" style="display:none">
            <span class="embody_t">更多资料请参考:</span>
            <div class="embody_c" id="libkey"></div>
    </div>


     <dt><span>猜你在找</span></dt>    


   


    <div id="adCollege" style="width: 42%;float: left;"> 
        <script src="http://csdnimg.cn/jobreco/job_reco.js" type="text/javascript"></script> 
        <script type="text/javascript">
            csdn.position.showEdu({
                sourceType: "blog",
                searchType: "detail",
                searchKey: "9853363",
                username: "",
                recordcount: "5",
                containerId: "adCollege" //容器DIV的id。 
            });
            
            setEduLoc();

            function setEduLoc() {               
                var edus = $("#adCollege div dd a");
                if (edus.length == 0) {
                    setTimeout(function () {
                        setEduLoc();
                    }, 500);
                }
                else {
                    var eduLoc = "?ref=blog&loc=0";
                    $.each(edus, function (index,item) {
                        var href = $(this).attr("href") + eduLoc;
                        $(this).attr("href", href);
                    });
                }
            }

        </script> 
    <div class="tracking-ad" data-mod="popu_84"><dd style="background:url(http://static.blog.csdn.net/skin/default/images/blog-dot-red3.gif) no-repeat 0 10px; white-space: nowrap;"><a href="http://edu.csdn.net/course/detail/913?ref=blog&loc=0" title="零基础实战HTML、XHTML、CSS3应用开发" strategy="v4:content" target="_blank">零基础实战HTML、XHTML、CSS3应用开发</a></dd><dd style="background:url(http://static.blog.csdn.net/skin/default/images/blog-dot-red3.gif) no-repeat 0 10px; white-space: nowrap;"><a href="http://edu.csdn.net/course/detail/4234?ref=blog&loc=0" title="Windows Server 2012 RMS 文档安全管理" strategy="v4:content" target="_blank">Windows Server 2012 RMS 文档安全管理</a></dd><dd style="background:url(http://static.blog.csdn.net/skin/default/images/blog-dot-red3.gif) no-repeat 0 10px; white-space: nowrap;"><a href="http://edu.csdn.net/course/detail/2409?ref=blog&loc=0" title="linux网络编程实践-linux应用编程和网络编程第9部分" strategy="v4:content" target="_blank">linux网络编程实践-linux应用编程和网络编程第9部分</a></dd><dd style="background:url(http://static.blog.csdn.net/skin/default/images/blog-dot-red3.gif) no-repeat 0 10px; white-space: nowrap;"><a href="http://edu.csdn.net/course/detail/379?ref=blog&loc=0" title="Windows Server 2012 AD RMS 文档安全管理" strategy="v4:content" target="_blank">Windows Server 2012 AD RMS 文档安全管理</a></dd><dd style="background:url(http://static.blog.csdn.net/skin/default/images/blog-dot-red3.gif) no-repeat 0 10px; white-space: nowrap;"><a href="http://edu.csdn.net/course/detail/1851?ref=blog&loc=0" title="名师精讲CSS3" strategy="v4:content" target="_blank">名师精讲CSS3</a></dd></div></div>  

    
     <div id="res" data-mod="popu_36" class="tracking-ad" style="width: 42%; float: left; margin-right: 30px; display: none;"><dd style="background:url(http://static.blog.csdn.net/skin/default/images/blog-dot-red3.gif) no-repeat 0 10px;"><a href="http://blog.csdn.net/zsyRain/article/details/50426105" title="CSS 属性 - before && after" strategy="SearchAlgorithm" target="_blank">CSS 属性 - before && after</a></dd><dd style="background:url(http://static.blog.csdn.net/skin/default/images/blog-dot-red3.gif) no-repeat 0 10px;"><a href="http://blog.csdn.net/u011225629/article/details/51280191" title="CSS 属性1" strategy="SearchAlgorithm" target="_blank">CSS 属性1</a></dd></div>
   
</dl>


<script type="text/javascript">
    $(function () {
        setTimeout(function () {
            var searchtitletags = 'CSS 属性text-rendering的介绍和使用' + ',' + $("#tags").html();
            searchService({
                index: 'blog',
                query: searchtitletags,
                from: 5,
                size: 5,
                appendTo: '#res',
                url: 'recommend',
                his: 2,
                client: "blog_cf_enhance",
                tmpl: '<dd style="background:url(http://static.blog.csdn.net/skin/default/images/blog-dot-red3.gif) no-repeat 0 10px;"><a href="#{ url }" title="#{ title }" strategy="#{ strategy }">#{ title }</a></dd>'
            });
        }, 500);
    });    

 </script>  


    <div id="ad_cen">        
<div class="J_adv" data-view="true" data-mod="ad_popu_71" data-mtp="43" data-order="114" data-con="ad_content_671" style="width: 728px; height: 90px;"><script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-8990951720398508" data-ad-slot="8267689356/3115746762" data-adsbygoogle-status="done"><ins id="aswift_1_expand" style="display:inline-table;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px;background-color:transparent"><ins id="aswift_1_anchor" style="display:block;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px;background-color:transparent"><iframe width="728" height="90" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" οnlοad="var i=this.id,s=window.google_iframe_oncopy,H=s&&s.handlers,h=H&&H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_1" name="aswift_1" style="left:0;position:absolute;top:0;"></iframe></ins></ins></ins><script>(adsbygoogle=window.adsbygoogle || []).push({});</script></div>    </div>  

    <!-- 广告位开始 -->
    <div class="J_adv" data-view="true" data-mod="ad_popu_72" data-mtp="62" data-order="40" data-con="ad_content_2072"><script id="popuLayer_js_q" src="http://ads.csdn.net/js/popuLayer.js" defer="" type="text/javascript"></script><div id="layerd" style="position: fixed; bottom: 0px; right: 0px; line-height: 0px; z-index: 1000; width: 300px; height: 278px;"><div class="J_close layer_close" style="display:;background-color:#efefef;padding:0px;color:#333;font:12px/24px Helvetica,Tahoma,Arial,sans-serif;text-align:right;">关闭</div><!-- 广告占位容器 --><div id="cpro_u2895327"><iframe id="iframeu2895327_0" src="http://pos.baidu.com/ccfm?rdid=2895327&dc=3&di=u2895327&dri=0&dis=0&dai=1&ps=384x1049&dcb=___adblockplus&dtm=HTML_POST&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1490413627481&ti=CSS%20%E5%B1%9E%E6%80%A7text-rendering%E7%9A%84%E4%BB%8B%E7%BB%8D%E5%92%8C%E4%BD%BF%E7%94%A8%20-%20freshlover%E7%9A%84%E4%B8%93%E6%A0%8F%20-%20%E5%8D%9A%E5%AE%A2%E9%A2%91%E9%81%93%20-%20CSDN.NET&ari=2&dbv=2&drs=3&pcs=1349x638&pss=1349x6021&cfv=0&cpl=5&chi=3&cce=true&cec=UTF-8&tlm=1490413627&rw=638&ltu=http%3A%2F%2Fblog.csdn.net%2Ffreshlover%2Farticle%2Fdetails%2F9853363&ecd=1&uc=1366x728&pis=-1x-1&ccd=24&cja=false&cmi=7&col=zh-CN&cdo=-1&sr=1366x768&tcn=1490413627&qn=290fb69db291001b&tt=1490413627411.75.76.77" width="300" height="250" align="center,center" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" style="border:0;vertical-align:bottom;margin:0;width:300px;height:250px" allowtransparency="true"></iframe></div></div><script>  document.getElementById('popuLayer_js_q').οnlοad=function(){      var styObjd=styObj={width:'300px','height':parseInt(250)+28};window.CSDN.Layer.PopuLayer('#layerd',{storageName:'layerd',styleObj:styObjd,total:50,expoire:1000*60});  }</script><!-- 投放代码 --><script type="text/javascript">   /*服务器频道首页置顶Banner960*90,创建于2014-7-3*/    (window.cproArray = window.cproArray || []).push({        id: 'u2895327'      });  </script>  <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script></div>
    <!-- 广告位结束 -->

<div class="comment_class">
    <div id="comment_title" class="panel_head">
        <span class="see_comment">查看评论</span><a name="comments"></a></div>
    <div id="comment_list"><br>  暂无评论<br><br><div class="clear"></div></div>
    <div id="comment_bar">
    </div>
    <div id="comment_form"><a name="commentbox"></a><a name="reply"></a><a name="quote"></a><form action="/freshlover/comment/submit?id=9853363" method="post" οnsubmit="return subform(this);"><div class="commentform"><div class="panel_head">发表评论</div><ul><li class="left">用 户 名:</li><li class="right"></li></ul><ul><li class="left">评论内容:</li><li class="right" style="position:relative;"><div id="ubbtools"><a href="#insertcode" code="code"><img src="http://static.blog.csdn.net/images/ubb/code.gif" border="0" alt="插入代码" title="插入代码"></a></div><div id="lang_list" style="position: absolute; top: 28px; left: 0px; display: none;"><a class="long_name" href="#html">HTML/XML</a><a class="long_name" href="#objc">objective-c</a><a class="zhong_name" href="#delphi">Delphi</a><a class="zhong_name" href="#ruby">Ruby</a><a href="#php">PHP</a><a class="duan_name" href="#csharp">C#</a><a style=" border-right: none;" class="duan_name" href="#cpp">C++</a><a style=" border-bottom:none;" class="long_name" href="#javascript">JavaScript</a><a style=" border-bottom:none;" class="long_name" href="#vb">Visual Basic</a><a style=" border-bottom:none;" class="zhong_name" href="#python">Python</a><a style=" border-bottom:none;" class="zhong_name" href="#java">Java</a><a style="border-bottom:none;" class="duan_name" href="#css">CSS</a><a style="border-bottom:none;" class="duan_name" href="#sql">SQL</a><a style="border:none;" class="duan_name" href="#plain">其它</a></div><textarea class="comment_content" name="comment_content" id="comment_content" style="width: 400px; height: 200px;"></textarea></li></ul><ul><input type="hidden" id="comment_replyId" name="comment_replyId"><input type="hidden" id="comment_userId" name="comment_userId" value="521203"><input type="hidden" id="commentId" name="commentId" value=""><input type="submit" class="comment_btn" value="提交">  <span id="tip_comment" style="color: Red; display: none;"></span></ul></div></form></div>
    <div class="announce">
        * 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场<a name="reply"></a><a name="quote"></a></div>
</div>

<script type="text/javascript">
    var fileName = '9853363';
    var commentscount = 0;
    var islock = false
</script>
<script type="text/javascript" src="http://static.blog.csdn.net/scripts/comment.js"></script>
    <div id="ad_bot">
    </div>
<div id="report_dialog">
</div>

<div id="d-top" style="bottom:60px;">

        <a id="quick-reply" class="btn btn-top q-reply" title="快速回复" style="display:none;">
            <img src="http://static.blog.csdn.net/images/blog-icon-reply.png" alt="快速回复">
        </a>    
    <a id="d-top-a" class="btn btn-top backtop" style="display: none;" title="返回顶部" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_huidaodingbu'])">         
         <img src="http://static.blog.csdn.net/images/top.png" alt="TOP">
    </a>
</div>
<script type="text/javascript">
    $(function ()
    {
        $("#ad_frm_0").height("90px");
        
        setTimeout(function(){
            $("#ad_frm_2").height("200px");
        },1000);    
    });
  
</script>
<style type="text/css">
    .tag_list
    {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #D7CBC1;
        color: #000000;
        font-size: 12px;
        line-height: 20px;
        list-style: none outside none;
        margin: 10px 2% 0 1%;
        padding: 1px;
    }
    .tag_list h5
    {
        background: none repeat scroll 0 0 #E0DBD3;
        color: #47381C;
        font-size: 12px;
        height: 24px;
        line-height: 24px;
        padding: 0 5px;
        margin: 0;
    }
    .tag_list h5 a
    {
        color: #47381C;
    }
    .classify
    {
        margin: 10px 0;
        padding: 4px 12px 8px;
    }
    .classify a
    {
        margin-right: 20px;
        white-space: nowrap;
    }
</style>


<div class="tag_list" style="">

    <h5>
        <a href="http://www.csdn.net/tag/" target="_blank">核心技术类目</a></h5>
    <div class="classify">
<a title="全部主题" href="http://www.csdn.net/tag" target="_blank" οnclick="LogClickCount(this,336);">全部主题</a>
<a title="Hadoop" href="http://g.csdn.net/5272865" target="_blank" οnclick="LogClickCount(this,336);">Hadoop</a>
<a title="AWS" href="http://g.csdn.net/5272866" target="_blank" οnclick="LogClickCount(this,336);">AWS</a>
<a title="移动游戏" href="http://g.csdn.net/5272870" target="_blank" οnclick="LogClickCount(this,336);">移动游戏</a>
<a title="Java" href="http://g.csdn.net/5272871" target="_blank" οnclick="LogClickCount(this,336);">Java</a>
<a title="Android" href="http://g.csdn.net/5272872" target="_blank" οnclick="LogClickCount(this,336);">Android</a>
<a title="iOS" href="http://g.csdn.net/5272873" target="_blank" οnclick="LogClickCount(this,336);">iOS</a>
<a title="Swift" href="http://g.csdn.net/5272868" target="_blank" οnclick="LogClickCount(this,336);">Swift</a>
<a title="智能硬件" href="http://g.csdn.net/5272869" target="_blank" οnclick="LogClickCount(this,336);">智能硬件</a>
<a title="Docker" href="http://g.csdn.net/5272867" target="_blank" οnclick="LogClickCount(this,336);">Docker</a>
<a title="OpenStack" href="http://g.csdn.net/5272925" target="_blank" οnclick="LogClickCount(this,336);">OpenStack</a>
<a title="VPN" href="http://www.csdn.net/tag/vpn" target="_blank" οnclick="LogClickCount(this,336);">VPN</a>
<a title="Spark" href="http://g.csdn.net/5272924" target="_blank" οnclick="LogClickCount(this,336);">Spark</a>
<a title="ERP" href="http://www.csdn.net/tag/erp" target="_blank" οnclick="LogClickCount(this,336);">ERP</a>
<a title="IE10" href="http://www.csdn.net/tag/ie10" target="_blank" οnclick="LogClickCount(this,336);">IE10</a>
<a title="Eclipse" href="http://www.csdn.net/tag/eclipse" target="_blank" οnclick="LogClickCount(this,336);">Eclipse</a>
<a title="CRM" href="http://www.csdn.net/tag/crm" target="_blank" οnclick="LogClickCount(this,336);">CRM</a>
<a title="JavaScript" href="http://www.csdn.net/tag/javascript" target="_blank" οnclick="LogClickCount(this,336);">JavaScript</a>
<a title="数据库" href="http://www.csdn.net/tag/数据库" target="_blank" οnclick="LogClickCount(this,336);">数据库</a>
<a title="Ubuntu" href="http://www.csdn.net/tag/ubuntu" target="_blank" οnclick="LogClickCount(this,336);">Ubuntu</a>
<a title="NFC" href="http://www.csdn.net/tag/nfc" target="_blank" οnclick="LogClickCount(this,336);">NFC</a>
<a title="WAP" href="http://www.csdn.net/tag/wap" target="_blank" οnclick="LogClickCount(this,336);">WAP</a>
<a title="jQuery" href="http://www.csdn.net/tag/jquery" target="_blank" οnclick="LogClickCount(this,336);">jQuery</a>
<a title="BI" href="http://www.csdn.net/tag/bi" target="_blank" οnclick="LogClickCount(this,336);">BI</a>
<a title="HTML5" href="http://www.csdn.net/tag/html5" target="_blank" οnclick="LogClickCount(this,336);">HTML5</a>
<a title="Spring" href="http://www.csdn.net/tag/spring" target="_blank" οnclick="LogClickCount(this,336);">Spring</a>
<a title="Apache" href="http://www.csdn.net/tag/apache" target="_blank" οnclick="LogClickCount(this,336);">Apache</a>
<a title=".NET" href="http://www.csdn.net/tag/.net" target="_blank" οnclick="LogClickCount(this,336);">.NET</a>
<a title="API" href="http://www.csdn.net/tag/api" target="_blank" οnclick="LogClickCount(this,336);">API</a>
<a title="HTML" href="http://www.csdn.net/tag/html" target="_blank" οnclick="LogClickCount(this,336);">HTML</a>
<a title="SDK" href="http://www.csdn.net/tag/sdk" target="_blank" οnclick="LogClickCount(this,336);">SDK</a>
<a title="IIS" href="http://www.csdn.net/tag/iis" target="_blank" οnclick="LogClickCount(this,336);">IIS</a>
<a title="Fedora" href="http://www.csdn.net/tag/fedora" target="_blank" οnclick="LogClickCount(this,336);">Fedora</a>
<a title="XML" href="http://www.csdn.net/tag/xml" target="_blank" οnclick="LogClickCount(this,336);">XML</a>
<a title="LBS" href="http://www.csdn.net/tag/lbs" target="_blank" οnclick="LogClickCount(this,336);">LBS</a>
<a title="Unity" href="http://www.csdn.net/tag/unity" target="_blank" οnclick="LogClickCount(this,336);">Unity</a>
<a title="Splashtop" href="http://www.csdn.net/tag/splashtop" target="_blank" οnclick="LogClickCount(this,336);">Splashtop</a>
<a title="UML" href="http://www.csdn.net/tag/uml" target="_blank" οnclick="LogClickCount(this,336);">UML</a>
<a title="components" href="http://www.csdn.net/tag/components" target="_blank" οnclick="LogClickCount(this,336);">components</a>
<a title="Windows Mobile" href="http://www.csdn.net/tag/windowsmobile" target="_blank" οnclick="LogClickCount(this,336);">Windows Mobile</a>
<a title="Rails" href="http://www.csdn.net/tag/rails" target="_blank" οnclick="LogClickCount(this,336);">Rails</a>
<a title="QEMU" href="http://www.csdn.net/tag/qemu" target="_blank" οnclick="LogClickCount(this,336);">QEMU</a>
<a title="KDE" href="http://www.csdn.net/tag/kde" target="_blank" οnclick="LogClickCount(this,336);">KDE</a>
<a title="Cassandra" href="http://www.csdn.net/tag/cassandra" target="_blank" οnclick="LogClickCount(this,336);">Cassandra</a>
<a title="CloudStack" href="http://www.csdn.net/tag/cloudstack" target="_blank" οnclick="LogClickCount(this,336);">CloudStack</a>
<a title="FTC" href="http://www.csdn.net/tag/ftc" target="_blank" οnclick="LogClickCount(this,336);">FTC</a>
<a title="coremail" href="http://www.csdn.net/tag/coremail" target="_blank" οnclick="LogClickCount(this,336);">coremail</a>
<a title="OPhone " href="http://www.csdn.net/tag/ophone " target="_blank" οnclick="LogClickCount(this,336);">OPhone </a>
<a title="CouchBase" href="http://www.csdn.net/tag/couchbase" target="_blank" οnclick="LogClickCount(this,336);">CouchBase</a>
<a title="云计算" href="http://www.csdn.net/tag/云计算" target="_blank" οnclick="LogClickCount(this,336);">云计算</a>
<a title="iOS6" href="http://www.csdn.net/tag/iOS6" target="_blank" οnclick="LogClickCount(this,336);">iOS6</a>
<a title="Rackspace " href="http://www.csdn.net/tag/rackspace " target="_blank" οnclick="LogClickCount(this,336);">Rackspace </a>
<a title="Web App" href="http://www.csdn.net/tag/webapp" target="_blank" οnclick="LogClickCount(this,336);">Web App</a>
<a title="SpringSide" href="http://www.csdn.net/tag/springside" target="_blank" οnclick="LogClickCount(this,336);">SpringSide</a>
<a title="Maemo" href="http://www.csdn.net/tag/maemo" target="_blank" οnclick="LogClickCount(this,336);">Maemo</a>
<a title="Compuware" href="http://www.csdn.net/tag/compuware" target="_blank" οnclick="LogClickCount(this,336);">Compuware</a>
<a title="大数据" href="http://www.csdn.net/tag/大数据" target="_blank" οnclick="LogClickCount(this,336);">大数据</a>
<a title="aptech" href="http://www.csdn.net/tag/aptech" target="_blank" οnclick="LogClickCount(this,336);">aptech</a>
<a title="Perl" href="http://www.csdn.net/tag/perl" target="_blank" οnclick="LogClickCount(this,336);">Perl</a>
<a title="Tornado" href="http://www.csdn.net/tag/tornado" target="_blank" οnclick="LogClickCount(this,336);">Tornado</a>
<a title="Ruby" href="http://www.csdn.net/tag/ruby" target="_blank" οnclick="LogClickCount(this,336);">Ruby</a>
<a title="Hibernate" href="http://www.csdn.net/tag/hibernate" target="_blank" οnclick="LogClickCount(this,336);">Hibernate</a>
<a title="ThinkPHP" href="http://www.csdn.net/tag/thinkphp" target="_blank" οnclick="LogClickCount(this,336);">ThinkPHP</a>
<a title="HBase" href="http://www.csdn.net/tag/hbase" target="_blank" οnclick="LogClickCount(this,336);">HBase</a>
<a title="Pure" href="http://www.csdn.net/tag/pure" target="_blank" οnclick="LogClickCount(this,336);">Pure</a>
<a title="Solr" href="http://www.csdn.net/tag/solr" target="_blank" οnclick="LogClickCount(this,336);">Solr</a>
<a title="Angular" href="http://www.csdn.net/tag/angular" target="_blank" οnclick="LogClickCount(this,336);">Angular</a>
<a title="Cloud Foundry" href="http://www.csdn.net/tag/cloudfoundry" target="_blank" οnclick="LogClickCount(this,336);">Cloud Foundry</a>
<a title="Redis" href="http://www.csdn.net/tag/redis" target="_blank" οnclick="LogClickCount(this,336);">Redis</a>
<a title="Scala" href="http://www.csdn.net/tag/scala" target="_blank" οnclick="LogClickCount(this,336);">Scala</a>
<a title="Django" href="http://www.csdn.net/tag/django" target="_blank" οnclick="LogClickCount(this,336);">Django</a>
<a title="Bootstrap" href="http://www.csdn.net/tag/bootstrap" target="_blank" οnclick="LogClickCount(this,336);">Bootstrap</a>
    </div>

</div>
  <script language="javascript" type="text/javascript">     
      $(function(){
              setTimeout(function(){
                  $.get("/freshlover/svc/GetTagContent",function(data){
                      $(".tag_list").html(data).show();
                  });     
              });
          },500);                       
 </script> 


<div id="pop_win" style="display:none ;position: absolute; z-index: 10000; border: 1px solid rgb(220, 220, 220); top: 222.5px; left: 630px; opacity: 1; background: none 0px 0px repeat scroll rgb(255, 255, 255);">
    
</div>
<div id="popup_mask"></div>
<style>
    #popup_mask
    {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #000;
        z-index: 9999;
        left: 0px;
        top: 0px;
        opacity: 0.3;
        filter: alpha(opacity=30);
        display: none;
    }

</style>




<script type="text/javascript">
    $(function(){
        setTimeout(function(){
            $(".comment_body:contains('回复')").each(function(index,item){
                var u=$(this).text().split(':')[0].toString().replace("回复","")
                var thisComment=$(this);
                if(u)
                {
                    $.getJSON("https://passport.csdn.net/get/nick?callback=?", {users: u}, function(a) {
                        if(a!=null&&a.data!=null&&a.data.length>0)
                        {
                            nick=a.data[0].n; 
                            if(u!=nick)
                            {
                                thisComment.text(thisComment.text().replace(u,nick));  
                            }
                        }       
                    });  
                }
            });         

        },200);  

        setTimeout(function(){
            $(".math").each(function(index,value){$(this).find("span").last().css("color","#fff"); })
        },5000);

        setTimeout(function(){
            $(".math").each(function(index,value){$(this).find("span").last().css("color","#fff"); })
        },10000);

        setTimeout(function(){
            $(".math").each(function(index,value){$(this).find("span").last().css("color","#fff"); })
        },15000);
        
        setTimeout(function(){
            $("a img[src='http://js.tongji.linezing.com/stats.gif']").parent().css({"position":"absolute","left":"50%"});
        },300);
    });

    function loginbox(){
        var $logpop=$("#pop_win");
        $logpop.html('<iframe src="https://passport.csdn.net/account/loginbox?service=http://static.blog.csdn.net/callback.htm" frameborder="0" height="600" width="400" scrolling="no"></iframe>');

        $('#popup_mask').css({
            opacity: 0.5,
            width: $( document ).width() + 'px',
            height:  $( document ).height() + 'px'
        });
        $('#popup_mask').css("display","block");
 
        $logpop.css( {
            top: ($( window ).height() - $logpop.height())/ 2  + $( window 
       ).scrollTop() + 'px',
            left:($( window ).width() - $logpop.width())/ 2
        } );
 
        setTimeout( function () {
            $logpop.show();
            $logpop.css( {
                opacity: 1
            } );
        }, 200 );
 
        $('#popup_mask').unbind("click");
        $('#popup_mask').bind("click", function(){
            $('#popup_mask').hide();
            var $clopop = $("#pop_win");
            $("#common_ask_div_sc").css("display","none");
            $clopop.css( {
                opacity: 0
            } );
            setTimeout( function () {
                $clopop.hide();
            }, 350 );
            return false;
        });
    }   

</script>
 <script language="javascript" type="text/javascript" src="http://ads.csdn.net/js/async_new.js"></script>      




                        <div class="clear">
                        </div>
                    </div>                   
                
            </div>
                   
           <div id="side">
               
    <div class="side">
<div id="panel_Profile" class="panel">
<ul class="panel_head"><span>个人资料</span></ul>
<ul class="panel_body profile">
<div id="blog_userface">
    <a href="http://my.csdn.net/freshlover" target="_blank">
    <img src="http://avatar.csdn.net/6/4/0/1_freshlover.jpg" title="访问我的空间" style="max-width:90%">
    </a>
    <br>
    <span><a href="http://my.csdn.net/freshlover" class="user_name" target="_blank">清枫草塘</a></span>
</div>
<div class="interact">

    <a href="javascript:void(0);" class="attented" id="span_add_follow" title="[加关注]"></a>

 <a href="javascript:void(0);" class="letter" title="[发私信]" οnclick="window.open('http://msg.csdn.net/letters/model?receiver=freshlover','_blank','height=350,width=700');_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_sixin'])"></a>  
</div>
<div id="blog_medal">
                <div id="bms_box">
               </div>
</div>
<ul id="blog_rank">
    <li>访问:<span>2466293次</span></li>
    <li>积分:<span>10666</span> </li>    
    <li>等级: <span style="position:relative;display:inline-block;z-index:1">
            <img src="http://c.csdnimg.cn/jifen/images/xunzhang/jianzhang/blog7.png" alt="" style="vertical-align: middle;" id="leveImg">
            <div id="smallTittle" style=" position: absolute;  left: -24px;  top: 25px;  text-align: center;  width: 101px;  height: 32px;  background-color: #fff;  line-height: 32px;  border: 2px #DDDDDD solid;  box-shadow: 0px 2px 2px rgba (0,0,0,0.1);  display: none;   z-index: 999;">
            <div style="left: 42%;  top: -8px;  position: absolute;  width: 0;  height: 0;  border-left: 10px solid transparent;  border-right: 10px solid transparent;  border-bottom: 8px solid #EAEAEA;"></div>
            积分:10666 </div>
        </span>  </li>
    <li>排名:<span>第1243名</span></li>
</ul>
<ul id="blog_statistics">
    <li>原创:<span>120篇</span></li>
    <li>转载:<span>45篇</span></li>
    <li>译文:<span>2篇</span></li>
    <li>评论:<span>155条</span></li>
</ul>
</ul>
</div>


<div class="panel" id="panel_Search">
    <ul class="panel_head"><span>文章搜索</span></ul>
    <ul class="panel_body">
        <form id="frmSearch" action="http://so.csdn.net/search" class="form_search" target="_blank">
        <span><input id="inputSearch" type="text" class="blogsearch" title="请输入关键字"></span>
        <input id="btnSubmit" type="button" value="搜索" title="search in blog">
        <input type="hidden" name="q" id="inputQ">
        <input type="hidden" name="t" value="blog">
        <a id="btnSearchBlog" target="_blank"></a>
        </form>
    </ul>
</div>

<script type="text/javascript">
    $(function () {
        $("#btnSubmit").click(function () {           
            search();
        });

        $("#frmSearch").submit(function () {
            search();
            return false;
        });

        function search()
        {
            var url = "http://so.csdn.net/so/search/s.do?q=" + encodeURIComponent($("#inputSearch").val()) + "&u=" + username + "&t=blog";
            window.location.href = url;
        }   
    });
</script><div id="panel_Category" class="panel">
<ul class="panel_head"><span>文章分类</span></ul>
<ul class="panel_body">    
                 <li>
                    <a href="/freshlover/article/category/893177" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">CSS笔记</a><span>(15)</span>
                </li>
                 <li>
                    <a href="/freshlover/article/category/1109090" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">CSS笔记</a><span>(10)</span>
                </li>
                 <li>
                    <a href="/freshlover/article/category/1121918" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">HTML5</a><span>(3)</span>
                </li>
                 <li>
                    <a href="/freshlover/article/category/1128467" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">javascript</a><span>(10)</span>
                </li>
                 <li>
                    <a href="/freshlover/article/category/1337435" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">PHP语言</a><span>(46)</span>
                </li>
                 <li>
                    <a href="/freshlover/article/category/1339376" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">C语言</a><span>(2)</span>
                </li>
                 <li>
                    <a href="/freshlover/article/category/1370873" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">前端开发</a><span>(44)</span>
                </li>
                 <li>
                    <a href="/freshlover/article/category/1373110" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">Oracle相关</a><span>(7)</span>
                </li>
                 <li>
                    <a href="/freshlover/article/category/1410224" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">挨踢新闻</a><span>(2)</span>
                </li>
                 <li>
                    <a href="/freshlover/article/category/1410248" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">SEO优化</a><span>(1)</span>
                </li>
                 <li>
                    <a href="/freshlover/article/category/1410255" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">jQuery技术</a><span>(4)</span>
                </li>
                 <li>
                    <a href="/freshlover/article/category/1420990" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">操作系统</a><span>(1)</span>
                </li>
                 <li>
                    <a href="/freshlover/article/category/1426905" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">架构设计</a><span>(1)</span>
                </li>
                 <li>
                    <a href="/freshlover/article/category/1430048" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">数据库技术</a><span>(3)</span>
                </li>
                 <li>
                    <a href="/freshlover/article/category/1430762" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">Nginx</a><span>(2)</span>
                </li>
                 <li>
                    <a href="/freshlover/article/category/1675555" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">UI设计</a><span>(1)</span>
                </li>
                 <li>
                    <a href="/freshlover/article/category/1684895" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">nodejs</a><span>(1)</span>
                </li>
                 <li>
                    <a href="/freshlover/article/category/5594115" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">Linux服务器</a><span>(1)</span>
                </li>
                 <li>
                    <a href="/freshlover/article/category/5775681" οnclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_wenzhangfenlei']); ">docker</a><span>(2)</span>
                </li>
</ul>
</div><div id="panel_Archive" class="panel">
<ul class="panel_head"><span>文章存档</span></ul>
<ul class="panel_body">
<div id="archive_list"><li><a href="/freshlover/article/month/2016/02">2016年02月</a><span>(1)</span></li><li><a href="/freshlover/article/month/2015/12">2015年12月</a><span>(1)</span></li><li><a href="/freshlover/article/month/2015/08">2015年08月</a><span>(1)</span></li><li><a href="/freshlover/article/month/2015/07">2015年07月</a><span>(1)</span></li><li><a href="/freshlover/article/month/2015/06">2015年06月</a><span>(1)</span></li><span class="hidelist" style="display:none;"><li><a href="/freshlover/article/month/2015/03">2015年03月</a><span>(3)</span></li><li><a href="/freshlover/article/month/2015/02">2015年02月</a><span>(1)</span></li><li><a href="/freshlover/article/month/2015/01">2015年01月</a><span>(2)</span></li><li><a href="/freshlover/article/month/2014/11">2014年11月</a><span>(1)</span></li><li><a href="/freshlover/article/month/2014/10">2014年10月</a><span>(1)</span></li><li><a href="/freshlover/article/month/2014/09">2014年09月</a><span>(1)</span></li><li><a href="/freshlover/article/month/2014/08">2014年08月</a><span>(1)</span></li><li><a href="/freshlover/article/month/2014/07">2014年07月</a><span>(1)</span></li><li><a href="/freshlover/article/month/2014/06">2014年06月</a><span>(1)</span></li><li><a href="/freshlover/article/month/2014/05">2014年05月</a><span>(1)</span></li><li><a href="/freshlover/article/month/2014/02">2014年02月</a><span>(3)</span></li><li><a href="/freshlover/article/month/2014/01">2014年01月</a><span>(2)</span></li><li><a href="/freshlover/article/month/2013/12">2013年12月</a><span>(6)</span></li><li><a href="/freshlover/article/month/2013/10">2013年10月</a><span>(6)</span></li><li><a href="/freshlover/article/month/2013/09">2013年09月</a><span>(6)</span></li><li><a href="/freshlover/article/month/2013/08">2013年08月</a><span>(12)</span></li><li><a href="/freshlover/article/month/2013/07">2013年07月</a><span>(7)</span></li><li><a href="/freshlover/article/month/2013/06">2013年06月</a><span>(5)</span></li><li><a href="/freshlover/article/month/2013/05">2013年05月</a><span>(13)</span></li><li><a href="/freshlover/article/month/2013/04">2013年04月</a><span>(10)</span></li><li><a href="/freshlover/article/month/2013/03">2013年03月</a><span>(12)</span></li><li><a href="/freshlover/article/month/2013/02">2013年02月</a><span>(22)</span></li><li><a href="/freshlover/article/month/2013/01">2013年01月</a><span>(5)</span></li><li><a href="/freshlover/article/month/2012/10">2012年10月</a><span>(1)</span></li><li><a href="/freshlover/article/month/2012/05">2012年05月</a><span>(13)</span></li><li><a href="/freshlover/article/month/2012/04">2012年04月</a><span>(5)</span></li><li><a href="/freshlover/article/month/2012/03">2012年03月</a><span>(6)</span></li><li><a href="/freshlover/article/month/2012/01">2012年01月</a><span>(5)</span></li><li><a href="/freshlover/article/month/2011/12">2011年12月</a><span>(3)</span></li><li><a href="/freshlover/article/month/2011/09">2011年09月</a><span>(2)</span></li><li><a href="/freshlover/article/month/2009/08">2009年08月</a><span>(1)</span></li><li><a href="/freshlover/article/month/2009/07">2009年07月</a><span>(3)</span></li><li><a href="/freshlover/article/month/2007/03">2007年03月</a><span>(1)</span></li></span><div id="archive_list_button" class="list_closed">展开</div></div>
</ul>
</div>
<div id="hotarticls" class="panel">
<ul class="panel_head">
    <span>       
阅读排行    </span>
</ul>

<ul class="panel_body itemlist">
<li>
<a href="/freshlover/article/details/7610269" title="CSS3阴影 box-shadow的使用和技巧总结">CSS3阴影 box-shadow的使用和技巧总结</a><span>(449500)</span>
</li>
<li>
<a href="/freshlover/article/details/11579669" title="盘点8种CSS实现垂直居中水平居中的绝对定位居中技术">盘点8种CSS实现垂直居中水平居中的绝对定位居中技术</a><span>(217627)</span>
</li>
<li>
<a href="/freshlover/article/details/44261229" title="Sublime Text 无法使用Package Control或插件安装失败的解决方法">Sublime Text 无法使用Package Control或插件安装失败的解决方法</a><span>(170891)</span>
</li>
<li>
<a href="/freshlover/article/details/12132801" title="史上最全的CSS hack方式一览">史上最全的CSS hack方式一览</a><span>(121916)</span>
</li>
<li>
<a href="/freshlover/article/details/42528643" title="移动端Web开发调试之Chrome远程调试(Remote Debugging)">移动端Web开发调试之Chrome远程调试(Remote Debugging)</a><span>(96264)</span>
</li>
<li>
<a href="/freshlover/article/details/7535785" title="html5结合flash实现视频文件在所有主流浏览器兼容播放">html5结合flash实现视频文件在所有主流浏览器兼容播放</a><span>(85612)</span>
</li>
<li>
<a href="/freshlover/article/details/17143341" title="CSS透明opacity和IE各版本透明度滤镜filter的最准确用法">CSS透明opacity和IE各版本透明度滤镜filter的最准确用法</a><span>(83572)</span>
</li>
<li>
<a href="/freshlover/article/details/29592407" title="Sublime Text2两款漂亮的主题皮肤安装与切换使用方法">Sublime Text2两款漂亮的主题皮肤安装与切换使用方法</a><span>(80767)</span>
</li>
<li>
<a href="/freshlover/article/details/8603804" title="PHP的session存放路径及其配置session.save_path">PHP的session存放路径及其配置session.save_path</a><span>(59406)</span>
</li>
<li>
<a href="/freshlover/article/details/12691031" title="Windows系统下nodejs安装及配置">Windows系统下nodejs安装及配置</a><span>(54715)</span>
</li>
</ul>
</div>
<div id="hotarticls2" class="panel">
<ul class="panel_head"><span>评论排行</span></ul>
<ul class="panel_body itemlist">
<li>
<a href="/freshlover/article/details/44261229" title="Sublime Text 无法使用Package Control或插件安装失败的解决方法">Sublime Text 无法使用Package Control或插件安装失败的解决方法</a><span>(33)</span>
</li>
<li>
<a href="/freshlover/article/details/7610269" title="CSS3阴影 box-shadow的使用和技巧总结">CSS3阴影 box-shadow的使用和技巧总结</a><span>(12)</span>
</li>
<li>
<a href="/freshlover/article/details/42528643" title="移动端Web开发调试之Chrome远程调试(Remote Debugging)">移动端Web开发调试之Chrome远程调试(Remote Debugging)</a><span>(9)</span>
</li>
<li>
<a href="/freshlover/article/details/11579669" title="盘点8种CSS实现垂直居中水平居中的绝对定位居中技术">盘点8种CSS实现垂直居中水平居中的绝对定位居中技术</a><span>(9)</span>
</li>
<li>
<a href="/freshlover/article/details/42640253" title="移动端Web开发调试之Weinre调试教程">移动端Web开发调试之Weinre调试教程</a><span>(8)</span>
</li>
<li>
<a href="/freshlover/article/details/12132801" title="史上最全的CSS hack方式一览">史上最全的CSS hack方式一览</a><span>(7)</span>
</li>
<li>
<a href="/freshlover/article/details/43735273" title="移动端:active伪类无效的解决方法">移动端:active伪类无效的解决方法</a><span>(7)</span>
</li>
<li>
<a href="/freshlover/article/details/4456062" title="eclipse下JVM terminated. Exit code=-1的解决方法">eclipse下JVM terminated. Exit code=-1的解决方法</a><span>(6)</span>
</li>
<li>
<a href="/freshlover/article/details/12652719" title="mlellipsis.js-实现多行文字溢出隐藏显示省略号">mlellipsis.js-实现多行文字溢出隐藏显示省略号</a><span>(6)</span>
</li>
<li>
<a href="/freshlover/article/details/9720515" title="移动Web开发图片自适应两种常见情况解决方案">移动Web开发图片自适应两种常见情况解决方案</a><span>(5)</span>
</li>
</ul>
</div>
<div id="homepageArticles" class="panel tracking-ad" data-mod="popu_4">
<ul class="panel_head"><span>推荐文章</span></ul>
<ul class="panel_body" id="ad_commend">
<ul>
<li><a href="http://blog.csdn.net/cyq1162/article/details/64919386" target="_blank">* 一个想法照进现实-《IT连》创业项目:关于团队组建</a></li>
<li><a href="http://blog.csdn.net/blogdevteam/article/details/65446094" target="_blank">* CSDN日报20170323——《你首先是一个人,然后你才是程序员》</a></li>
<li><a href="http://blog.csdn.net/carson_ho/article/details/64904691" target="_blank">* 最全面总结 Android WebView与 JS 的交互方式</a></li>
<li><a href="http://blog.csdn.net/yueqian_scut/article/details/62229262" target="_blank">*  蓝牙DA14580开发:固件格式、二次引导和烧写</a></li>
<li><a href="http://blog.csdn.net/carson_ho/article/details/64904635" target="_blank">* 你不知道的 Android WebView 使用漏洞</a></li>


</ul></ul>
</div>


<div id="newcomments" class="panel">
<ul class="panel_head"><span>最新评论</span></ul>
<ul class="panel_body itemlist">
    <li>
   
         <a href="/freshlover/article/details/12132801#comments">史上最全的CSS hack方式一览</a>
    <p style="margin:0px;"><a href="/lmwyc_0606" class="user_name">lmwyc_0606</a>:
首先谢谢分享,然后,demo1应该是除ie6外均为蓝色,对吗?
    </p>
    </li>
    <li>
   
         <a href="/freshlover/article/details/44261229#comments">Sublime Text 无法使用Package Control或插件安装失败的解决方法</a>
    <p style="margin:0px;"><a href="/xiaotan1898" class="user_name">xiaotan1898</a>:
跪求大神,安装了Package Control了,安装插件不得(install package和An...
    </p>
    </li>
    <li>
   
         <a href="/freshlover/article/details/8794670#comments">Highcharts,Highslide常用方法属性介绍</a>
    <p style="margin:0px;"><a href="/ma15732625261" class="user_name">马金兴</a>:
Highcharts很详细,学习了
    </p>
    </li>
    <li>
   
         <a href="/freshlover/article/details/8794670#comments">Sublime Text 无法使用Package Control或插件安装失败的解决方法</a>
    <p style="margin:0px;"><a href="/sinat_30443713" class="user_name">sinat_30443713</a>:
今天也遇到了Package Control:There are no packages availa...
    </p>
    </li>
    <li>
   
         <a href="/freshlover/article/details/12652719#comments">mlellipsis.js-实现多行文字溢出隐藏显示省略号</a>
    <p style="margin:0px;"><a href="/omg_lwf" class="user_name">omg_lwf</a>:
无法访问,也下载不了
    </p>
    </li>
    <li>
   
         <a href="/freshlover/article/details/12652719#comments">Sublime Text 无法使用Package Control或插件安装失败的解决方法</a>
    <p style="margin:0px;"><a href="/mijinhuandu" class="user_name">独一无二的名称</a>:
我的是因为被墙了 开了vpn瞬间就好了
    </p>
    </li>
    <li>
   
         <a href="/freshlover/article/details/42528643#comments">移动端Web开发调试之Chrome远程调试(Remote Debugging)</a>
    <p style="margin:0px;"><a href="/u010166319" class="user_name">wuyu201314</a>:
引一个轻量的小插件也可以https://github.com/wusfen/console.js
    </p>
    </li>
    <li>
   
         <a href="/freshlover/article/details/7605207#comments">IE6 IE7 IE8 css bug兼容性解决方法总结归纳</a>
    <p style="margin:0px;"><a href="/Allenlwk" class="user_name">Allenlwk</a>:
收下我的膝盖
    </p>
    </li>
    <li>
   
         <a href="/freshlover/article/details/7605207#comments">史上最全的CSS hack方式一览</a>
    <p style="margin:0px;"><a href="/wx11408115" class="user_name">WiFi_Uncle</a>:
好详细,每次告诉别人hack知识的时候我总会给这博文,(ps; 我是菜)
    </p>
    </li>
    <li>
   
         <a href="/freshlover/article/details/7605207#comments">Sublime Text 无法使用Package Control或插件安装失败的解决方法</a>
    <p style="margin:0px;"><a href="/oChengCheng123" class="user_name">冒泡的橙汁</a>:
非常感谢,解决了插件安装的问题~
    </p>
    </li>
</ul>
</div>
    </div>
    <div class="clear">
    </div>


                   <!-- 广告位开始 --> 
                    <div class="J_adv" data-view="true" data-mod="ad_popu_190" data-mtp="63" data-order="40" data-con="ad_content_1260" style="width: 200px; height: 200px;"><div id="nav_show_top_stop" style="width: 200px; height: 200px; z-index: 1000; position: fixed; top: 0px;"><div id="cpro_u2734128"><iframe id="iframeu2734128_0" src="http://pos.baidu.com/ccfm?rdid=2734128&dc=3&di=u2734128&dri=0&dis=0&dai=2&ps=3080x194&dcb=___adblockplus&dtm=HTML_POST&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1490413627481&ti=CSS%20%E5%B1%9E%E6%80%A7text-rendering%E7%9A%84%E4%BB%8B%E7%BB%8D%E5%92%8C%E4%BD%BF%E7%94%A8%20-%20freshlover%E7%9A%84%E4%B8%93%E6%A0%8F%20-%20%E5%8D%9A%E5%AE%A2%E9%A2%91%E9%81%93%20-%20CSDN.NET&ari=2&dbv=2&drs=3&pcs=1349x638&pss=1349x6021&cfv=0&cpl=5&chi=3&cce=true&cec=UTF-8&tlm=1490413627&rw=638&ltu=http%3A%2F%2Fblog.csdn.net%2Ffreshlover%2Farticle%2Fdetails%2F9853363&ecd=1&uc=1366x728&pis=-1x-1&ccd=24&cja=false&cmi=7&col=zh-CN&cdo=-1&sr=1366x768&tcn=1490413628&qn=cdeb989564434c71&tt=1490413627411.129.129.133" width="200" height="200" align="center,center" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" style="border:0;vertical-align:bottom;margin:0;width:200px;height:200px" allowtransparency="true"></iframe></div></div><script> var naviga_offsetTop = 0; function naviga_stay_top(){ var scrollTop = jQuery(document).scrollTop(); if( scrollTop > naviga_offsetTop ){jQuery('#nav_show_top_stop').css({'position': 'fixed'});jQuery('#nav_show_top_stop').css({'top': '0px'}); } else {jQuery('#nav_show_top_stop').css({'position': 'fixed'});jQuery('#nav_show_top_stop').css({'top': naviga_offsetTop - scrollTop + 'px'}); } }function onload_function(){naviga_offsetTop = jQuery('#nav_show_top_stop').position().top; jQuery(window).bind('scroll', naviga_stay_top); jQuery(window).bind('mousewheel',naviga_stay_top); jQuery(document).bind('scroll', naviga_stay_top); jQuery(document).bind('mousewheel',naviga_stay_top); }jQuery(document).ready( onload_function ); </script><script type="text/javascript">    (window.cproArray = window.cproArray || []).push({        id: 'u2734128'      });  </script>  <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script></div> 
                    <!-- 广告位结束 -->

           </div>   

            <div class="clear">
            </div>
        </div>

        

<script type="text/javascript" src="http://c.csdnimg.cn/rabbit/cnick/cnick.js"></script>
<script type="text/javascript" src="http://static.blog.csdn.net/scripts/newblog.min.js"></script>


<script type="text/javascript" src="http://medal.blog.csdn.net/showblogmedal.ashx?blogid=188174"></script>
<script type="text/javascript" src="http://static.blog.csdn.net/scripts/JavaScript1.js"></script><link rel="stylesheet" type="text/css" href="//csdnimg.cn/pubfooter/css/pub_footer_2014.css"><div class="pub_fo"><div id="pub_footerall" class="pub_footer_new"><dl><dt></dt> <dd class="foot_sub_menu"><a href="http://www.csdn.net/company/about.html" target="_blank">公司简介</a><span>|</span><a href="http://www.csdn.net/company/recruit.html" target="_blank">招贤纳士</a><span>|</span><a href="http://www.csdn.net/company/marketing.html" target="_blank">广告服务</a><span>|</span><a href="http://www.csdn.net/company/contact.html" target="_blank">联系方式</a><span>|</span><a href="http://www.csdn.net/company/statement.html" target="_blank">版权声明</a><span>|</span><a href="http://www.csdn.net/company/layer.html" target="_blank">法律顾问</a><span>|</span><a href="mailto:webmaster@csdn.net">问题报告</a><span>|</span><a target="_blank" href="http://www.csdn.net/friendlink.html">合作伙伴</a><span>|</span><a href="http://bbs.csdn.net/forums/Service" target="_blank">论坛反馈</a></dd><dd class="foot_contact"><a href="javascript:void(0);" target="_blank" class="qq">网站客服</a><a href="http://wpa.qq.com/msgrd?v=3&uin=2251809102&site=qq&menu=yes" target="_blank" class="qq">杂志客服</a><a href="http://e.weibo.com/csdnsupport/profile" target="_blank" class="weibo">微博客服</a><a href="mailto:webmaster@csdn.net" class="email" title="联系邮箱">webmaster@csdn.net</a><span class="phone" title="服务热线">400-600-2320</span><span class="interval">|</span><span>北京创新乐知信息技术有限公司 版权所有</span><span class="interval">|</span><span>江苏知之为计算机有限公司</span><span class="interval">|</span><span>江苏乐知网络技术有限公司</span></dd><dd class="foot_copyright"><span>京 ICP 证 09002463 号</span><span class="interval">|</span><span>Copyright © 1999-2016, CSDN.NET, All Rights Reserved </span><a href="http://www.hd315.gov.cn/beian/view.asp?bianhao=010202001032100010" target="_blank"><img src="http://c.csdnimg.cn/pubfooter/images/gongshang_logos.gif" alt="GongshangLogo" title=""></a></dd></dl></div></div><div id="note1" class="csdn_note" style="display:none; position:absolute; z-index:9999; width:440px">  <span class="notice_top_arrow"><span class="inner"></span></span>  <div class="box"></div></div><div class="csdn_notice_tip" style="position: absolute; z-index: 9990; width: 170px; left: -72px; top: 3862px; display: block;">  <iframe src="about:blank" frameborder="0" scrolling="no" style="z-index:-1;position:absolute;top:0;left:0;width:100%;height:100%;background:transparent"></iframe>  <div class="tip_text">您有<strong>8</strong>条新通知</div>  <a href="javascript:void 0" class="close2"></a></div><script id="noticeScript" type="text/javascript" btnid="header_notice_num" wrapid="note1" count="5" subcount="5" src="//csdnimg.cn/rabbit/notev2/js/notify.js?9d86d94"></script>

    <script type="text/javascript" src="http://passport.csdn.net/content/loginbox/login.js"></script>
<script type="text/javascript">document.write("<img src=http://counter.csdn.net/pv.aspx?id=24 border=0 width=0 height=0>");</script><img src="http://counter.csdn.net/pv.aspx?id=24" border="0" width="0" height="0">
<script type="text/javascript" src="http://www.csdn.net/ui/scripts/Csdn/counter.js"></script><script type="text/javascript" charset="UTF-8" src="http://message.csdn.net/msg.popup.js"></script>
<script type="text/javascript" src="http://ad.csdn.net/scripts/ad-blog.js"></script>
<script type="text/javascript">
    $(function () {
        function __get_code_toolbar(snippet_id) {
            return $("<span class='tracking-ad' data-mod='popu_167'><a href='https://code.csdn.net/snippets/"
                    + snippet_id
                    + "' target='_blank' title='在CODE上查看代码片'  style='text-indent:0;'><img src='https://code.csdn.net/assets/CODE_ico.png' width=12 height=12 alt='在CODE上查看代码片' style='position:relative;top:1px;left:2px;'/></a></span>"
                    + "<span class='tracking-ad' data-mod='popu_170'><a href='https://code.csdn.net/snippets/"
                    + snippet_id
                    + "/fork' target='_blank' title='派生到我的代码片' style='text-indent:0;'><img src='https://code.csdn.net/assets/ico_fork.svg' width=12 height=12 alt='派生到我的代码片' style='position:relative;top:2px;left:2px;'/></a></span>");
        }
        
        $("[code_snippet_id]").each(function () {
            __s_id = $(this).attr("code_snippet_id");
            if (__s_id != null && __s_id != "" && __s_id != 0 && parseInt(__s_id) > 70020) {
                __code_tool = __get_code_toolbar(__s_id);
                $(this).prev().find(".tools").append(__code_tool);
            }
        });

        $(".bar").show();
    });
</script>





    </div><input type="hidden" id="aa_g_data_ids">
      <!--new top-->
    
    <script id="csdn-toolbar-id" btnid="header_notice_num" wrapid="note1" count="5" subcount="5" type="text/javascript" src="http://c.csdnimg.cn/public/common/toolbar/js/toolbar.js"></script>
     <!--new top-->
   
    <link href="http://c.csdnimg.cn/comm_ask/css/ask_float_block.css" type="text/css" rel="stylesheet">
    <script language="JavaScript" type="text/javascript" src="http://c.csdnimg.cn/comm_ask/js/libs/wmd.js"></script>
    <script language="JavaScript" type="text/javascript" src="http://c.csdnimg.cn/comm_ask/js/libs/showdown.js"></script>
    <script language="JavaScript" type="text/javascript" src="http://c.csdnimg.cn/comm_ask/js/libs/prettify.js"></script>
    <script language="JavaScript" type="text/javascript" src="http://c.csdnimg.cn/comm_ask/js/apps/ask_float_block.js"></script>
   

   

  <div id="a52b5334d" style="width: 1px; height: 1px; display: none;">
                    <script id="adJs52b5334" src="http://ads.csdn.net/js/opt/52b5334.js?t=0.17035157318293637"></script>
                    <script>document.getElementById("adJs52b5334").src = "http://ads.csdn.net/js/opt/52b5334.js?t=" + Math.random();</script>
   </div>

    <link rel="stylesheet" href="http://static.blog.csdn.net/css/blog_code.css">
    <script type="text/javascript" src="http://static.blog.csdn.net/scripts/saveToCode.js"></script>
      <script type="text/javascript" src="//csdnimg.cn/rabbit/tracking-ad/main.js?75eacd8"></script>

     <link rel="stylesheet" href="http://static.blog.csdn.net/css/fa.css">

    <div class="pop_CA_cover" style="display:none"></div>
    <div class="pop pop_CA" style="display:none">
          <div class="CA_header">
            收藏助手
            <span class="cancel_icon" id="fapancle" οnclick="$('.pop_CA').hide();$('.pop_CA_cover').hide();"></span>
          </div>
          <iframe src="" id="fa" frameborder="0" width="100%" height="360" scrolling="no">
    </div>
</body>
</html>   
 </iframe></div><div id="tag-suggest-pop">
  <div class="relative">
    <div class="close"></div>
    <div class="content"></div>
  </div>
</div><link rel="stylesheet" type="text/css" media="screen" href="http://ask.csdn.net/assets/ask_float_fonts_css-6b30a53970eb5c3a2a045e3df585b475.css"><div data-mod="popu_64" class="csdn-tracking-statistics" chg-blk="0"><a id="com-quick-reply" title="快速回复" style="top:275px"></a><a id="com-quick-collect" title="我要收藏" style="top:313px"></a><a id="com-d-top-a" style="top: 351px; display: block;" title="返回顶部" οnclick=""></a> </div><div class="pop_edit ask_second comm_ask_second"><h3>提问</h3><span class="ask_float_span">您的问题将会被发布在“<a class="ask_float_channel" href="//ask.csdn.net" target="_blank" style="cursor:pointer">技术问答</a>”频道</span><a href="#" nodetype="close" class="close">×</a><div class="context"><div class="err_div"><span class="err_ico"></span><span class="err_txt">该问题已存在,请勿重复提问</span></div><div class="input_div"><input id="askInputSecond" type="text" style="font-size:14px;" placeholder="问题标题"></div><div class="cm_box"><div class="cm_dialog"></div> <div class="pop_cm cm_add_link"><input type="text" placeholder="链接内容" id="af_cm_link_txt"><input type="text" placeholder="链接地址" id="af_cm_link_url"><input type="text" placeholder="链接提示" id="af_cm_link_tit"><div class="text-right"><span class="btn btn-default btn-sm" id="add_link_btn">插入链接</span> </div> </div><div class="pop_cm cm_add_img"><div class="nav-tabs"><a class="img_tab active" href="#tab_upload">本地上传</a><a class="img_tab" href="#tab_weburl">网络图片</a></div><div class="tab_panel active" id="tab_upload"><div class="set_img"><iframe src="http://ask.csdn.net/upload.html"></iframe></div></div><div class="tab_panel" id="tab_weburl"><input type="text" placeholder="图片地址" id="af_cm_img_url"><input type="text" placeholder="图片说明" id="af_cm_img_alt"><div class="text-right"><span class="btn btn-default btn-sm" id="add_img_btn">插入图片</span> </div></div> </div></div> <textarea id="editor_all" rows="8" style="display: none;"></textarea><div class="editor-toolbar"><i class="separator">|</i><a class="icon-headline" title="标题一(Ctrl+Alt+1)"></a><a class="icon-heading" title="标题二(Ctrl+Alt+2)"></a><a class="icon-bold" title="粗体(Ctrl+B)"></a><a class="icon-italic" title="斜体(Ctrl+I)"></a><i class="separator">|</i><a class="icon-quote-left" title="引用(Ctrl+’)"></a><a class="icon-code" title="插入代码片(Ctrl+,)"></a><a class="icon-list-ul" title="无序列表(Ctrl+L)"></a><a class="icon-list-ol" title="有序列表(Ctrl+Alt+L)"></a><i class="separator">|</i><a class="icon-link" title="添加链接(Ctrl+K)"></a><a class="icon-picture" title="添加图片(Ctrl+Alt+I)"></a><i class="separator">|</i><a class="icon-reply" title="撤退(Ctrl+Z)"></a><a class="icon-share-alt" title="前进(Ctrl+Shift+Z)"></a><i class="separator">|</i><a class="icon-info" href="http://ask.csdn.net/pages/markdown" target="_blank" title="markdown语法参考"></a><a class="icon-preview" title="预览"></a><i class="separator">|</i></div><div class="CodeMirror cm-s-paper CodeMirror-focused"><div style="overflow: hidden; position: relative; width: 3px; height: 0px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; padding: 0px; width: 1000px; height: 1em; outline: none; font-size: 4px;" tabindex="0"></textarea></div><div class="CodeMirror-hscrollbar"><div style="height: 1px;"></div></div><div class="CodeMirror-vscrollbar"><div style="width: 1px;"></div></div><div class="CodeMirror-scrollbar-filler"></div><div class="CodeMirror-gutter-filler"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="min-width: 33px;"><div style="position: relative;"><div class="CodeMirror-lines"><div style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre> <span style="display: inline-block; width: 1px; margin-right: -1px;"> </span></pre></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code"></div><div class="CodeMirror-cursor" style="visibility: hidden;"> </div><div class="CodeMirror-cursor CodeMirror-secondarycursor" style="visibility: hidden;"> </div></div></div></div></div><div style="position: absolute; height: 30px; width: 1px;"></div><div class="CodeMirror-gutters" style="display: none;"></div></div></div><div class="editor-statusbar"><span class="lines">0</span><span class="words">0</span><span class="cursor">0:0</span></div><div class="div_tags clearfix"><div id="divSearchTags" class="tags_con"><input type="text"></div><input type="hidden" name="txtSearchTags"></div><div id="ask2_tagRecomm_div" class="drt_tagRecomm tracking-ad" data-mod="popu_73"><span class="drt_tit">推荐标签:</span></div></div><div class="success"><div class="left_area"><input id="chk_cb" type="checkbox"><span class="wyxs">我要悬赏</span><input id="cb_num" class="cb_num" readonly="true"><span class="phib_rii"><span> 币</span></span></div><a href="#" nodetype="cancel" class="cancel">取消</a><a href="#" nodetype="ok" class="ok">发布</a></div></div><div id="common_ask_div_sc" class="searchContainer"><div class="sTitle">可能存在类似的问题:</div><div class="sFooter"><a class="sFirstNewAsk">我想提一个新问题</a></div></div><div id="mask_code"></div><div class="gist_edit"><div class="save_snippets clearfix"><div class="tit"><h3>保存代码片</h3><span>整理和分享保存的代码片,请访问<a href="https://code.csdn.net/snippets_manage" target="_blank">代码笔记</a></span></div><div class="con_form"><ul class="gist_edit_list clearfix"><li><span class="red">*</span><span class="txt">标题</span><input id="form_title" class="form-input" placeholder="CSS 属性text-rendering的介绍和使用" type="text"></li><li><span class="red">*</span><span class="txt">描述</span><textarea id="form-textarea" class="form-textarea" placeholder="CSS 属性text-rendering的介绍和使用: http://blog.csdn.net/freshlover/article/details/9853363"></textarea></li><li><span class="red"> </span><span class="txt">标签</span><div id="divSearchTags"><span class="label blog_tag"><span>text-rendering</span><a title="Removing tag" href="javascript:;">x</a></span><span class="label blog_tag"><span>文本渲染</span><a title="Removing tag" href="javascript:;">x</a></span><input id="insertTag" class="insertTag" placeholder="请输入标签,按Enter生成(最多5项)" type="text" value="" name="insertTag" maxlength="21" style="color: rgb(51, 51, 51);"><input id="OrganTag" class="OrganTag" type="hidden" name="OrganTag" value="text-rendering,文本渲染,"><input id="OldOrganTag" class="OldOrganTag" type="hidden" name="OldOrganTag" value=""><input type="hidden" name="txtSearchTags"></div></li></ul></div><div class="bottom-bar"><a href="javascript:;" class="btn-submit btn-cancel">取消</a><span class="tracking-ad" data-mod="popu_250"><a class="btn-submit btn-confirm" href="javascript:;" target="_blank">确定</a></span></div></div></div></body></html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值