月度归档:2015年04月

CSS技巧

1.设置表格中单元格边框样式
    1.1.可以通人过将表格的背景色设为想要的颜色,再将单元格的背景设为白色来达到想要的效果
    1.2.直接设置(设置单元格单边框)
        table {border-collapse:collapse;} //相邻单元格的边框合并为一个
        td {border:#999999 solid 1px;}

2.图像按钮
    2.1.凸起按钮
        a:link img {border-style: outset;}

3.首字下沉
    <p><span>T</span>his is  test.</p>
    span {
        float:left;
        font-size:20px;
        line-height:20px;
        width:20px;
    }

4.页面部局,水平居中
    body { text-align:center; }  
    #wrap { text-align:left;  
        margin:0 auto;  
    }  
    其中#wrap为一个div
      
5.让flash置于DIV层之下的方法,让flash不挡住飘浮层或下拉菜单
    让Flash不档住浮动对象或层的关键参数:wmode=opaque
    方法:
        针对IE 在<object></object>内加上参数<param name="wmode" value="opaque" />
        针对FF 在<embed />内加上参数wmode="opaque"    
    FLASH帮助
        wmode 属性/参数值Window | Opaque | Transparent
        模板变量:$WM
        说明
        (可选)允许使用 Internet Explorer 4.0 中的透明 Flash 内容、绝对定位和分层显示功能。此标记/属性仅在带有 Flash Player ActiveX 控件的 Windows 中有效。
        "Window"在 Web 页上用影片自己的矩形窗口来播放应用程序。"Window"表明此 Flash 应用程序与 HTML 层没有任何交互,并且始终位于最顶层。
        "Opaque" 使应用程序隐藏页面上位于它后面的所有内容。
        "Transparent"使 HTML 页的背景可以透过应用程序的所有透明部分显示出来,并且可能会降低动画性能。
        "Opaque windowless"和"Transparent windowless"都可与 HTML 层交互,从而允许 SWF 文件上方的层遮蔽应用程序。这两种选项之间的差异在于"Transparent"允许透明,因此,如果 SWF 文件的某一部分是透明的,则 SWF 文件下方的 HTML 层可以透过该部分显示出来,而"opaque"则不会显示。
        如果忽略此属性,默认值为 Window。仅适用于 object。

Css Hack

书写顺序,一般是将识别能力强的浏览器的CSS写在后面

CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对IE浏览器。

1.类内部Hack:比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不能认识。等等
        IE6:
            能识别:*、_

        IE7:    
            能识别:*、!important、
            不能识别:_
            
        Firefox:
            能识别:!important
            不能识别:*、_

         IE6能识别*,某些情况下不能识别 !important,
         ———————————————————————————————–
         IE6支持重定义中的!important,例如:
         .yuanxin {color:#e00!important;}
         .yuanxin {color:#000;}
         你将会发现定义了样式class="yuanxin"时,在IE下,字体显示为红色(#e00)。

         但不支持同一定义中的!important。例如:
         .yuanxin {color:#e00!important;color:#000}
         此时在IE6下不支持,你将会发现定义了样式class="yuanxin"时,字体显示为黑色(#000)。

         不包括如下这种形式的同一定义中的!important。
         #pageOver{height:expression(document.documentElement.offsetHeight)!important;
         height:100%;}此种形式的定义,IE6中是可以解释到important的。 

        IE8 最新css hack:
         "\9" 例:"border:1px \9;".这里的"\9"可以区别所有IE和FireFox.
         "\0" IE8识别,IE6、IE7不能.
         "*" IE6、IE7可以识别.IE8、FireFox不能.
         "_" IE6可以识别"_",IE7、IE8、FireFox不能.     

2.选择器Hack:比如 IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。等等

3.HTML头部引用(if IE)Hack:针对所有IE:<!–[if IE]>,针对IE6及以下版本:         1.<!–[if IE]>
            根据条件判断,这是Internet Explorer<br />
           < ![endif]–>
        2.<!–[if IE 5]>
            根据条件判断,这是Internet Explorer 5<br />
           < ![endif]–>
            其中5,还可以是5.0,5.5,6等等
        3. <!–[if gte IE 5]>
            根据条件判断,这是Internet Explorer 5 或者更高<br />
                    < ![endif]–>
        4.<!–[if lt IE 6]>
            根据条件判断,这是版小于6的Internet Explorer<br />
           < ![endif]–>
        5.<!–[if lte IE 5.5]>
            根据条件判断,这是Internet Explorer 5.5或更低<br />
          < ![endif]–>

 

实例:
    1.区别IE6与IE7:
     background:green !important;background:blue; 
    2.区别FF,IE7,IE6:
     background:orange;*background:green;_background:blue;
     background:orange;*background:green !important;*background:blue; 

    3.区别FF,IE7,IE6
        #demo {width:100px;} /*被FIREFOX,IE6,IE7执行.*/
     * html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */
     *+html #demo {width:130px;} /*会被IE7执行*/

微信内置浏览器WebApp开发,踩坑

最近花6天时间完成了一个七夕的小活动,是一个简单的WebApp。由于我前期对面向微信的Web开发评估不足,导致开发过程十分艰难。写这篇文章总结下,惊醒自己未来不要再犯这样的错误。

问题:

1、 有些比较老旧的手机不支持多个触点,可能是硬件不支持,也可能是软件问题。这并不是微信的坑,对于这个问题其实我是早就遇到过的,心里有底,也就不算问题了。

2、 手机上传图片会变横,比如:竖着拍照上传,图片不是竖的,而变成横的。这个也不是微信的问题,是因为我以前还没在手机上做过图片上传,所以第一次遇见。

解决方案:解析图片的EXIF信息,使用其中的orientation字段,根据方向调整图片。参考:https://www.imququ.com/post/how-to-auto-rotate-photo-in-js.html

3、 Android版微信上传图片不支持拍照,只能从图库中选择,参考:http://mp.weixin.qq.com/qa/index.php?qa=12686&qa_1=%E5%AE%89%E5%8D%93%E7%89%88%E5%BE%AE%E4%BF%A1%E5%86%85%E5%B5%8C%E6%B5%8F%E8%A7%88%E5%99%A8%E5%93%8D%E5%BA%94input-file%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6%E4%B8%8D%E8%83%BD%E7%9B%B4%E6%8E%A5%E8%B0%83%E7%94%A8%E6%8B%8D%E7%85%A7%E6%88%96%E5%BD%95%E5%83%8F%E5%8A%9F%E8%83%BD-%E8%80%8Ciphone%E7%89%88%E6%89%8B%E6%9C%BA-%E6%98%AF%E5%8F%AF%E4%BB%A5%E7%9A%84

4、 一些Android手机,比如三星Note3,从SD卡中选择图片上传,会提示“请选择SD卡中的图片”。我理解这个SD卡是指外接SD卡,直接从手机内置存储中选择图片是可以上传成功。

5、 Android4.4下<input type="file">由于系统WebView的openFileChooser接口更改,导致无法选择文件,从而导致无法上传文件。现在,大多数浏览器都修复了此BUG,但当前版本5.3的微信内置WebView并未修复。参考:https://code.google.com/p/android/issues/detail?id=62220

目前Android4.4版本系统占比上升非常快,从目前监控数据来看,1个月内上升了2%,当前Android4.4总占比超过5%,希望微信能尽快修复此BUG。

目前最新进展:Android 4.4.3+ 以上的版本已经修复了这个BUG。

6、 微信5分钟自动清空一次缓存。如果访问的网页5分钟没有任何动作的话,就会自动清空缓存,我测试的缓存包括:localStoragesessionStorage。未测试ApplicationCacheWebSQL,暂时未知。

通过后期和同僚交流,得知微信不会主动清空缓存。可能是因为Android设置setDomStorageEnabled开启缓存,但没有设置存储目录,导致缓存被存储到临时目录中,临时目录就有被自动清除的可能。参考:http://stackoverflow.com/questions/2961460/my-android-html-application-is-losing-values-stored-in-localstorage-when-it-shut/5418555

可以确认cookie不会被主动清除。如果将微信进程杀死,过期时间为session状态的cookie会被清除。如果用户主动退出微信登入,所有cookie都会被清除。

得到一些新的反馈:1、有小部分安卓机器cookie/localstorage都失效,目前微信那边没有好的解决方案;2、一般来说cookie + localstorage就能解决大部分问题。我现在使用了cookie + localstorage双备份的策略。

在微信下,一切本地存储的方式都是不靠谱的,唯一靠谱的是微信开发API,使用微信的用户OpenID来跟踪用户。

转自:http://www.cnblogs.com/mmmjiang13/p/4141557.html

XDEBUG远程调试原理分析

xdebug可以控制PHP程序的执行,这意味着xdebug可以在任何时候暂停或者恢复正在运行的PHP程序。当PHP程序被暂停的时候,xdebug可以获取到程序的相关信息,比如变量的值等。xdebug也可以修改一个变量的值,然后再恢复暂停的程序,让其继续运行。

 

xdebug配合IDE进行可视化调试的过程(类似于VisualStudio单步调试)被称为“远程调试”,是因为调试时有一个Server(xdebug)和一个Client(IDE),所以在调试的时候,被调试的PHP程序和调试PHP程序的IDE可以不在同一台电脑上。

 

xdebug在进行远程调试的时候扮演一个Server的角色,它会在一个指定的端口(默认是9000)等待IDE的连接。目前有2种通信的协议,GDB和DBGp,其中DBGp是DBG的取代协议。IDE在执行调试的时候,给xdebug发送需要执行的命令,xdebug接受到命令后执行,然后将执行的情况和获得的PHP程序运行信息返回给IDE。现在很多IDE都实现了与xdebug通信的协议,比如Eclipse PDT。

 

Xdebug远程调试有2种方式:

1 req:在PHP程序开始执行的时候,xdebug与IDE建立连接。

  • jit:在PHP程序执行到断点处或者遇到Error的时候,xdebug才与IDE建立连接。

 

开启xdebug远程调试需要通过GET, POST或是cookie的方式传入一个XDEBUG_SESSION_START变量,XDEBUG_SESSION_START变量的值代表一个session的名称。通过这种形式,xdebug可以分辨出不同的session。如果要结束一个session可以通过同样的形式传入一个XDEBUG_SESSION_STOP。

转自:http://www.cnblogs.com/gpcuster/archive/2009/05/29/1491836.html

php使用Xdebug进行调试

个人认为,对有有经验的程序员,使用echo、print_r()、print_f()、var_dump()等函数足以调试php代码,如果你不喜欢这样的话,xdebug就是一个非常好的php调试工具。

下面来说说安装教程:

1.首先下载相应的php_xdebug.dll,下载地址:

http://www.xdebug.org/download.php

2.将下载文件复制到你的php下的ext目录里。

3.编辑php.ini文件,加入下面信息:

[Xdebug]

zend_extension=D:\xampp\php\ext\php_xdebug.dll   (Win)

xdebug.profiler_enable=on

xdebug.trace_output_dir="../Projects/xdebug"

xdebug.profiler_output_dir="../Projects/xdebug"

后面的目录“../Projects/xdebug”为你想要放置Xdebug输出的数据文件的目录,可自由设置。

 

参数参考设置:

  ;自动打开“监测函数调用过程”的功模。该功能可以在你指定的目录中将函数调用的监测信息以文件的形式输出。此配置项的默认值为off。

      xdebug.auto_trace=on

     ;开启异常跟踪

    xdebug.show_exception_trace = On

  ;打开收集“函数参数”的功能。将函数调用的参数值列入函数过程调用的监测信息中。此配置项的默认值为off。

      xdebug.collect_params=on

  ;打开收集“函数返回值”的功能。将函数的返回值列入函数过程调用的监测信息中。此配置项的默认值为off。

      xdebug.collect_return=on

      ;收集变量
      xdebug.collect_vars = On

   ;函数迭代的深度 

      xdebug.max_nesting_level=100 

      ;设定函数调用监测信息的输出文件的路径。

  xdebug.trace_output_dir="d:\Temp"

 

  ;打开效能监测器。

      xdebug.profiler_enable=on

      ;设定效能监测信息输出文件的路径。

  xdebug.profiler_output_dir="d:\Temp"

       

      ;显示默认的错误信息

       xdebug.default_enable=on

  ;是否调试

  xdebug.remote_enable=on

      ;开启远程调试自动启动
      xdebug.remote_autostart = On

  xdebug.remote_host=localhost

  ;调试端口

      xdebug.remote_port=9000

  ;选择协议:GDB、dbgp

       xdebug.remote_handler=dbgp

      ;调试模式
   ;Xdebug远程调试有2种方式:
    ;    req:在PHP程序开始执行的时候,xdebug与IDE建立连接。
    ;    jit:在PHP程序执行到断点处或者遇到Error的时候,xdebug才与IDE建立连接。
    xdebug.remote_mode=req

 

至此,安装完成,可以通过<?php phpinfo();?>查看:
转自:http://www.phpddt.com/php/xdebug.html