稚子的成长博客 | 记录网站开发解决方案｜IT业界动态｜生活随想…

ThinkPHP5中如何加入插件功能

发表于2016 年 1 月 26 日由稚子

最近在使用ThinkPHP5开发应用，之前习惯了一些插件开发，感觉很好且，但基于现在文档不是很完善，所以自己研究了一下基础功能。将TP3.2中的插件功能迁移了过来。

加入插件的方法：

1、在系统的index.php入口中加入如下配置

// 插件目录
define('ADDON_PATH', __DIR__ . '/../addons/');
// 开启系统行为
define('APP_HOOK', true);

// 插件目录

define('ADDON_PATH', __DIR__ . '/../addons/');

// 开启系统行为

define('APP_HOOK', true);

2、在数据库中加入addons插件表和hooks钩子表

CREATE TABLE `addons` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '主键',
  `name` varchar(40) NOT NULL COMMENT '插件名或标识',
  `title` varchar(20) NOT NULL DEFAULT '' COMMENT '中文名',
  `description` text COMMENT '插件描述',
  `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '状态',
  `config` text COMMENT '配置',
  `author` varchar(40) DEFAULT '' COMMENT '作者',
  `version` varchar(20) DEFAULT '' COMMENT '版本号',
  `create_time` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '安装时间',
  `has_adminlist` tinyint(1) unsigned NOT NULL DEFAULT '0' COMMENT '是否有后台列表',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT='插件表';

CREATE TABLE `hooks` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '主键',
  `name` varchar(40) NOT NULL DEFAULT '' COMMENT '钩子名称',
  `description` text NOT NULL COMMENT '描述',
  `type` tinyint(1) unsigned NOT NULL DEFAULT '1' COMMENT '类型',
  `update_time` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '更新时间',
  `addons` varchar(255) NOT NULL DEFAULT '' COMMENT '钩子挂载的插件 ''，''分割',
  `status` tinyint(2) DEFAULT '1',
  PRIMARY KEY (`id`),
  UNIQUE KEY `name` (`name`) USING BTREE
) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

CREATE TABLE `addons` (

`id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '主键',

`name` varchar(40) NOT NULL COMMENT '插件名或标识',

`title` varchar(20) NOT NULL DEFAULT '' COMMENT '中文名',

`description` text COMMENT '插件描述',

`status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '状态',

`config` text COMMENT '配置',

`author` varchar(40) DEFAULT '' COMMENT '作者',

`version` varchar(20) DEFAULT '' COMMENT '版本号',

`create_time` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '安装时间',

`has_adminlist` tinyint(1) unsigned NOT NULL DEFAULT '0' COMMENT '是否有后台列表',

PRIMARY KEY (`id`)

) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT='插件表';

CREATE TABLE `hooks` (

`id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT '主键',

`name` varchar(40) NOT NULL DEFAULT '' COMMENT '钩子名称',

`description` text NOT NULL COMMENT '描述',

`type` tinyint(1) unsigned NOT NULL DEFAULT '1' COMMENT '类型',

`update_time` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '更新时间',

`addons` varchar(255) NOT NULL DEFAULT '' COMMENT '钩子挂载的插件 ''，''分割',

`status` tinyint(2) DEFAULT '1',

PRIMARY KEY (`id`),

UNIQUE KEY `name` (`name`) USING BTREE

) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

3、在ThinkPHP5的根目录中创建addons目录

www  WEB项目目录
├─composer.json         composer定义文件
├─README.md             README文件
├─LICENSE.txt           授权说明文件
├─<strong style="color: red;">addons                插件目录（新增）</strong>
├─application           应用目录
│  ├─common             公共模块目录（可以更改）
│  ├─runtime            应用的运行时目录（可写，可定制）
│  ├─module             模块目录
│  │  └─ ...            更多类库目录
│  ├─common.php         公共函数文件
│  ├─config.php         公共配置文件
│  ├─route.php          路由配置文件
│  └─database.php       数据库配置文件
│
├─public                WEB目录（对外访问目录）
│  ├─index.php          入口文件
│  ├─.htaccess          用于apache的重写
│  └─router.php         快速测试文件（用于PHP内置webserver）
│
├─thinkphp              框架系统目录

www WEB项目目录

├─composer.json composer定义文件

├─README.md README文件

├─LICENSE.txt 授权说明文件

├─<strong style="color: red;">addons 插件目录（新增）</strong>

├─application 应用目录

│ ├─common 公共模块目录（可以更改）

│ ├─runtime 应用的运行时目录（可写，可定制）

│ ├─module 模块目录

│ │ └─ ... 更多类库目录

│ ├─common.php 公共函数文件

│ ├─config.php 公共配置文件

│ ├─route.php 路由配置文件

│ └─database.php 数据库配置文件

│

├─public WEB目录（对外访问目录）

│ ├─index.php 入口文件

│ ├─.htaccess 用于apache的重写

│ └─router.php 快速测试文件（用于PHP内置webserver）

│

├─thinkphp 框架系统目录

4、在application中的common.php公共函数里添加两个公共方法

/**
 * 获取插件类的类名
 * @param strng $name 插件名
 * @param string $ext 扩展名
 */
function get_addon_class($name, $ext = EXT)
{
    // 初始化命名空间及类名
    $class = "addons\\{$name}\\" . ucfirst($name);
    return $class;
}

/**
 * 处理插件钩子
 * @param string $hook   钩子名称
 * @param mixed $params 传入参数
 * @return void
 */
function hook($hook, $params = [])
{
    // 钩子调用
    \think\Hook::listen($hook, $params);
}

/**

* 获取插件类的类名

* @param strng $name 插件名

* @param string $ext 扩展名

function get_addon_class($name, $ext = EXT)

{

// 初始化命名空间及类名

$class = "addons\\{$name}\\" . ucfirst($name);

return $class;

}

/**

* 处理插件钩子

* @param string $hook 钩子名称

* @param mixed $params 传入参数

* @return void

function hook($hook, $params = [])

{

// 钩子调用

\think\Hook::listen($hook, $params);

}

5、在application目录下创建common模块，在common模块中创建behavior行为目录，在公共行为目录中创建Hooks.php钩子行为插件，内容如下：

<?php
// +----------------------------------------------------------------------
// | zzstudio [ WE CAN DO IT JUST THINK IT ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016 http://www.zzstudio.net All rights reserved.
// +----------------------------------------------------------------------
// | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
// +----------------------------------------------------------------------
// | Author: Byron Sampson <xiaobo.sun@gzzstudio.net>
// +----------------------------------------------------------------------
namespace app\common\behavior;

use think\Hook;

class Hooks
{
    public function run(&$param = [])
    {
        if(defined('BIND_MODULE') && BIND_MODULE === 'Install') return;
        // 动态加入命名空间
        \think\Loader::addNamespace('addons', ADDON_PATH);
        // 获取钩子数据
        $data = S('hooks');
        if(!$data){
            $hooks = M('Hooks')->getField('name,addons');
            // 获取钩子的实现插件信息
            foreach ($hooks as $key => $value) {
                if($value){
                    $map['status']  =   1;
                    $names          =   explode(',',$value);
                    $map['name']    =   ['IN', $names];
                    $data = M('Addons')->where($map)->getField('id,name');
                    if($data){
                        $addons = array_intersect($names, $data);
                        Hook::add($key, array_map('get_addon_class', $addons));
                    }
                }
            }
            S('hooks', Hook::get());
        }else{
            Hook::import($data, false);
        }
    }
}

<?php

// +----------------------------------------------------------------------

// | zzstudio [ WE CAN DO IT JUST THINK IT ]

// +----------------------------------------------------------------------

// | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )

// +----------------------------------------------------------------------

// | Author: Byron Sampson <[email protected]>

// +----------------------------------------------------------------------

namespace app\common\behavior;

use think\Hook;

class Hooks

{

public function run(&$param = [])

{

if(defined('BIND_MODULE') && BIND_MODULE === 'Install') return;

// 动态加入命名空间

\think\Loader::addNamespace('addons', ADDON_PATH);

// 获取钩子数据

$data = S('hooks');

if(!$data){

$hooks = M('Hooks')->getField('name,addons');

// 获取钩子的实现插件信息

foreach ($hooks as $key => $value) {

if($value){

$map['status'] = 1;

$names = explode(',',$value);

$map['name'] = ['IN', $names];

$data = M('Addons')->where($map)->getField('id,name');

if($data){

$addons = array_intersect($names, $data);

Hook::add($key, array_map('get_addon_class', $addons));

}

S('hooks', Hook::get());

}else{

Hook::import($data, false);

}

6、在application目录中创建tags.php行为配置文件，并且加入内容

<?php
// 系统行为定义
return [
    'app_init' => [
        'app\\common\\behavior\\Hooks'
    ],
    'action_begin'=> [
    ],
    'app_end'=> [
    ]
];

<?php

// 系统行为定义

return [

'app_init' => [

'app\\common\\behavior\\Hooks'

'action_begin'=> [

'app_end'=> [

]

];

到此为止，插件功能就集成完毕了。

接下来我们做个简单的插件试一下：

1、在addons目录中创建一个Base.php 插件的基类

<?php
// +----------------------------------------------------------------------
// | addons [ WE CAN DO IT JUST ZZSTUDIO IT ]
// +----------------------------------------------------------------------
// | Copyright (c) 2015 http://www.zzstudio.net All rights reserved.
// +----------------------------------------------------------------------
// | Author: byron sampson <xiaobo.sun@zzstudio.net>
// +----------------------------------------------------------------------
namespace addons;

/**
 * 插件类
 * @author byron sampson <xiaobo.sun@zzstudio.net>
 */
abstract class Base{
    /**
     * 视图实例对象
     * @var view
     * @access protected
     */
    protected $view = null;

    /**
     * $info = array(
     *  'name'=>'Editor',
     *  'title'=>'编辑器',
     *  'description'=>'用于增强整站长文本的输入和显示',
     *  'status'=>1,
     *  'author'=>'thinkphp',
     *  'version'=>'0.1'
     *  )
     */
    public $info                =   array();
    public $addon_path          =   '';
    public $config_file         =   '';
    public $custom_config       =   '';
    public $admin_list          =   array();
    public $custom_adminlist    =   '';
    public $access_url          =   array();

    /**
     * 基类构造函数
     * Base constructor.
     */
    public function __construct()
    {
        $this->view         =   new \think\View();
        $this->addon_path   =   ADDON_PATH . $this->getName() . '/';
        $TMPL_PARSE_STRING = C('parse_str');
        $TMPL_PARSE_STRING['__ADDONROOT__'] = $TMPL_PARSE_STRING['__ADDONS__'] . '/' . $this->getName();
        C('parse_str', $TMPL_PARSE_STRING);
        if(is_file($this->addon_path . 'config.php')){
            $this->config_file = $this->addon_path . 'config.php';
        }
    }

    /**
     * 模板主题设置
     * @access protected
     * @param string $theme 模版主题
     * @return Action
     */
    final protected function theme($theme)
    {
        $this->view->theme($theme);
        return $this;
    }

    /**
     * 模板变量赋值
     * @access protected
     * @param mixed $name 要显示的模板变量
     * @param mixed $value 变量的值
     * @return Action
     */
    final protected function assign($name, $value='')
    {
        $this->view->assign($name,$value);
        return $this;
    }


    //用于显示模板的方法
    final protected function fetch($templateFile = CONTROLLER_NAME)
    {
        if(!is_file($templateFile)){
            $templateFile = $this->addon_path . $templateFile . ".html";
            if(!is_file($templateFile)){
                E(L('_TEMPLATE_NOT_EXIST_') . ":$templateFile");
            }
        }
        return $this->view->fetch($templateFile);
    }

    /**
     * 获取插件名
     * @return string
     */
    final public function getName()
    {
        $class = get_class($this);
        list($space, $name, $class) = explode('\\', $class);

        return $name;
    }

    /**
     * 检查配置信息是否完整
     * @return bool
     */
    final public function checkInfo()
    {
        $info_check_keys = array('name','title','description','status','author','version');
        foreach ($info_check_keys as $value) {
            if(!array_key_exists($value, $this->info))
                return false;
        }
        return true;
    }

    /**
     * 获取插件的配置数组
     */
    final public function getConfig($name = '')
    {
        static $_config = [];
        if(empty($name)){
            $name = $this->getName();
        }
        if(isset($_config[$name])){
            return $_config[$name];
        }

        $map['name']    =   $name;
        $map['status']  =   1;
        $config  =   M('Addons')->where($map)->getField('config');
        if($config){
            $config   =   json_decode($config, true);
        }else{
            $config =   [];
            $temp_arr = include $this->config_file;
            foreach ($temp_arr as $key => $value) {
                if($value['type'] == 'group'){
                    foreach ($value['options'] as $gkey => $gvalue) {
                        foreach ($gvalue['options'] as $ikey => $ivalue) {
                            $config[$ikey] = $ivalue['value'];
                        }
                    }
                }else{
                    $config[$key] = $temp_arr[$key]['value'];
                }
            }
        }
        $_config[$name]     =   $config;
        return $config;
    }

    /**
     * 必须实现安装
     * @return mixed
     */
    abstract public function install();

    /**
     * 必须卸载插件方法
     * @return mixed
     */
    abstract public function uninstall();
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

<?php

// +----------------------------------------------------------------------

// | addons [ WE CAN DO IT JUST ZZSTUDIO IT ]

// +----------------------------------------------------------------------

// | Author: byron sampson <[email protected]>

// +----------------------------------------------------------------------

namespace addons;

/**

* 插件类

* @author byron sampson <[email protected]>

abstract class Base{

/**

* 视图实例对象

* @var view

* @access protected

protected $view = null;

/**

* $info = array(

* 'name'=>'Editor',

* 'title'=>'编辑器',

* 'description'=>'用于增强整站长文本的输入和显示',

* 'status'=>1,

* 'author'=>'thinkphp',

* 'version'=>'0.1'

* )

public $info = array();

public $addon_path = '';

public $config_file = '';

public $custom_config = '';

public $admin_list = array();

public $custom_adminlist = '';

public $access_url = array();

/**

* 基类构造函数

* Base constructor.

public function __construct()

{

$this->view = new \think\View();

$this->addon_path = ADDON_PATH . $this->getName() . '/';

$TMPL_PARSE_STRING = C('parse_str');

$TMPL_PARSE_STRING['__ADDONROOT__'] = $TMPL_PARSE_STRING['__ADDONS__'] . '/' . $this->getName();

C('parse_str', $TMPL_PARSE_STRING);

if(is_file($this->addon_path . 'config.php')){

$this->config_file = $this->addon_path . 'config.php';

}

/**

* 模板主题设置

* @access protected

* @param string $theme 模版主题

* @return Action

final protected function theme($theme)

{

$this->view->theme($theme);

return $this;

}

/**

* 模板变量赋值

* @access protected

* @param mixed $name 要显示的模板变量

* @param mixed $value 变量的值

* @return Action

final protected function assign($name, $value='')

{

$this->view->assign($name,$value);

return $this;

}

//用于显示模板的方法

final protected function fetch($templateFile = CONTROLLER_NAME)

{

if(!is_file($templateFile)){

$templateFile = $this->addon_path . $templateFile . ".html";

if(!is_file($templateFile)){

E(L('_TEMPLATE_NOT_EXIST_') . ":$templateFile");

}

return $this->view->fetch($templateFile);

}

/**

* 获取插件名

* @return string

final public function getName()

{

$class = get_class($this);

list($space, $name, $class) = explode('\\', $class);

return $name;

}

/**

* 检查配置信息是否完整

* @return bool

final public function checkInfo()

{

$info_check_keys = array('name','title','description','status','author','version');

foreach ($info_check_keys as $value) {

if(!array_key_exists($value, $this->info))

return false;

}

return true;

}

/**

* 获取插件的配置数组

final public function getConfig($name = '')

{

static $_config = [];

if(empty($name)){

$name = $this->getName();

}

if(isset($_config[$name])){

return $_config[$name];

}

$map['name'] = $name;

$map['status'] = 1;

$config = M('Addons')->where($map)->getField('config');

if($config){

$config = json_decode($config, true);

}else{

$config = [];

$temp_arr = include $this->config_file;

foreach ($temp_arr as $key => $value) {

if($value['type'] == 'group'){

foreach ($value['options'] as $gkey => $gvalue) {

foreach ($gvalue['options'] as $ikey => $ivalue) {

$config[$ikey] = $ivalue['value'];

}

}else{

$config[$key] = $temp_arr[$key]['value'];

}

$_config[$name] = $config;

return $config;

}

/**

* 必须实现安装

* @return mixed

abstract public function install();

/**

* 必须卸载插件方法

* @return mixed

abstract public function uninstall();

}

2、在插件表(addons)，钩子表(hooks)中加入相应的数据

INSERT INTO `addons` (`id`, `name`, `title`, `description`, `status`, `config`, `author`, `version`, `create_time`, `has_adminlist`) VALUES ('2', 'test', 'test插件', 'test插件简介', '1', NULL, 'byron sampson', '0.1', '1438154545', '0');

INSERT INTO .`hooks` (`id`, `name`, `description`, `type`, `update_time`, `addons`, `status`) VALUES ('21', 'demo', 'demo钩子', '1', '1384481614', 'test', '1');

INSERT INTO `addons` (`id`, `name`, `title`, `description`, `status`, `config`, `author`, `version`, `create_time`, `has_adminlist`) VALUES ('2', 'test', 'test插件', 'test插件简介', '1', NULL, 'byron sampson', '0.1', '1438154545', '0');

INSERT INTO .`hooks` (`id`, `name`, `description`, `type`, `update_time`, `addons`, `status`) VALUES ('21', 'demo', 'demo钩子', '1', '1384481614', 'test', '1');

3、在addons目录中创建一个test目录，且内部创建一个Test.php插件类

<?php
// +----------------------------------------------------------------------
// | test [ WE CAN DO IT JUST THINK IT ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016 http://www.zzstudio.net All rights reserved.
// +----------------------------------------------------------------------
// | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
// +----------------------------------------------------------------------
// | Author: Byron Sampson <xiaobo.sun@gzzstudio.net>
// +----------------------------------------------------------------------
namespace addons\test;

class Test extends \addons\Base
{
    /**
     * 实现demo钩子
     * @param array $params
     */
    public function demo($params = [])
    {
        echo 'demo hook!page is ' . $params['p'];
    }

    /**
     * 安装方法
     */
    public function install()
    {
        // TODO: Implement install() method.
    }

    /**
     * 卸载方法
     */
    public function uninstall()
    {
        // TODO: Implement uninstall() method.
    }
}

<?php

// +----------------------------------------------------------------------

// | test [ WE CAN DO IT JUST THINK IT ]

// +----------------------------------------------------------------------

// | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )

// +----------------------------------------------------------------------

// | Author: Byron Sampson <[email protected]>

// +----------------------------------------------------------------------

namespace addons\test;

class Test extends \addons\Base

{

/**

* 实现demo钩子

* @param array $params

public function demo($params = [])

{

echo 'demo hook!page is ' . $params['p'];

}

/**

* 安装方法

public function install()

{

// TODO: Implement install() method.

}

/**

* 卸载方法

public function uninstall()

{

// TODO: Implement uninstall() method.

}

4、在控制器中使用hook方法来调用钩子

hook('demo', ['p'=>'page']);

1	hook('demo', ['p'=>'page']);

5、ok，大功告成

发表在 BS架构后台语言, CMS相关问题汇聚 | 标签为 addons, thinkphp5, 插件, 钩子 | 5条评论

PHPStorm + WAMP + Xdebug + Chrome Xdebug Helper 调试配置

发表于2016 年 1 月 26 日由稚子

话说 PHPStorm 写起代码来非常带感，各种提示补全和纠错，以及在 L5 中的命名空间功能更是强大到感动（新建类自动添加命名空间，自动引入命名空间，返回参数命名空间纠正等等）。当然它的调试功能更是让你在出现BUG 不知所措时抓住的稻草。

下面我将一步一步带你配置这强大到爆功能。但是，这个配置是很简单。

假定你已经安装好了 PHPStorm 和 WAMP，以及chrome，这里不再教你这些了

WAMP中配置xdebug

1、到https://xdebug.com/download.php网站上下载相应的xdebug扩展，并且放到php的ext目录中

2、打开php的配置文件 php.ini 在文件尾部加入

[Xdebug]
zend_extension="D:\phpStudy\php56n\ext\php_xdebug.dll"
;开启自动跟踪
xdebug.auto_trace=1
;开启异常跟踪
xdebug.show_exception_trace=1
;开启远程调试自动启动
xdebug.remote_autostart=off
;开启远程调试
xdebug.remote_enable=1

xdebug.collect_params=On
xdebug.collect_return=On
;设定函数调用监测信息的输出文件的路径。
xdebug.trace_output_dir="D:\phpStudy\tmp\xdebug"
;打开效能监测器。
xdebug.profiler_enable=On  
;设定效能监测信息输出文件的路径。
xdebug.profiler_output_dir="D:\phpStudy\tmp\xdebug" 
xdebug.max_nesting_level=2000
xdebug.remote_host=127.0.0.1
xdebug.remote_port=9000 
xdebug.remote_handler=dbgp

[Xdebug]

zend_extension="D:\phpStudy\php56n\ext\php_xdebug.dll"

;开启自动跟踪

xdebug.auto_trace=1

;开启异常跟踪

xdebug.show_exception_trace=1

;开启远程调试自动启动

xdebug.remote_autostart=off

;开启远程调试

xdebug.remote_enable=1

xdebug.collect_params=On

xdebug.collect_return=On

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

xdebug.trace_output_dir="D:\phpStudy\tmp\xdebug"

;打开效能监测器。

xdebug.profiler_enable=On

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

xdebug.profiler_output_dir="D:\phpStudy\tmp\xdebug"

xdebug.max_nesting_level=2000

xdebug.remote_host=127.0.0.1

xdebug.remote_port=9000

xdebug.remote_handler=dbgp

3、保存后，重启apache服务

配置PHPStorm

1.安装chrome扩展 Xdebug helper。

2.进入 Xdebug hepler 的配置选项中，选择 IDE key 为 PHPStorm。

3.把扩展调整为 debug 模式，如图

4.打开你的 PHPStorm 并设置一个测试断点。如图

5.依次打开 PHPStorm 中的 Run>Start Listening for PHP Debug Connections。

6.刷新你刚才的页面就会发现弹出了个对话框并且已经开始调试了。

7.最后设置一些你的项目目录，就是你的项目目录对应你映射到 Homestead 的目录。

好了，收工！就是如此简单的操作，需要的时候点开 chrome 的扩展 Xdebug 设置为 debug 即可让你随时调试你的页面。

发表在 BS架构后台语言, 应用工具软件 | 标签为 phpstorm, wamp, xdebug, xdebug helper, 调试配置 | 留下评论

WordPress上传文件中文乱码时自动重命名

发表于2016 年 1 月 26 日由稚子

刚刚建立的wordpress，在上传图片的过程中发现，如果图片名称重复的话会覆盖掉原来的图片，主机不支持上传中文名的附件也可以使用此方法。

往主题functions.php添加以下代码即可

//自动改图片文件名称

function huilang_wp_handle_upload_prefilter($file){

$time=date("Y-m-d");

$file['name'] = $time."".mt_rand(1,100).".".pathinfo($file['name'] , PATHINFO_EXTENSION);

return $file;

}

add_filter('wp_handle_upload_prefilter', 'huilang_wp_handle_upload_prefilter');

//自动改图片文件名称

function huilang_wp_handle_upload_prefilter($file){

$time=date("Y-m-d");

$file['name'] = $time."".mt_rand(1,100).".".pathinfo($file['name'] , PATHINFO_EXTENSION);

return $file;

}

add_filter('wp_handle_upload_prefilter', 'huilang_wp_handle_upload_prefilter');

这样做的好处会很多：主机不支持中文名称，那么会导致上传的图片不会正常显示在用户的浏览器上；ftp下载的中文图片名称的时候乱码，如果你是备份到本地然后恢复的时候，那么图片就都坏了（呃，我就是受害者之一，so…）；

关注：上面是改名称为年月日+随机数字，要想加上时分秒，修改第三行 $time=date(“Y-m-d”); 为 $time=date(“Y-m-d H:i:s”); 即可

下面发张实列图片给大家看看

发表在 BS架构后台语言, CMS相关问题汇聚 | 标签为 wordpress, 文件名乱码 | 留下评论

【福利】Host内容管理工具 v1.3

发表于2016 年 1 月 26 日由稚子

在工作中，经常会有将本地环境的地址修改成和线上一致的情况来调试一些bug，所以自己开发了一个小工具来管理自己本地的host文件，这样修改自己本地环境和线上地址对应时就方便多了。

在左侧列表右键时可以删除选中行。

（秘密：点击科学上网后可以自动加入一些被墙地址的host，就是可以科学访问Google,facebook,google等哦）

点这里下载：HostManager v1.3.zip

发表在应用工具软件 | 标签为 Host, 福利, 管理工具 | 留下评论

ThinkPHP5(RC2)中如何使用模型的自动完成及自动验证

发表于2016 年 1 月 20 日由稚子

最近项目组在使用ThinkPHP5开发系统，但官方给的文档更新太慢，其中在3.2版本上用的很方便的模型自动完成自动验证机制在TP5中还没有具体描述。

自己读了一下git上的源码，发现源码中已存在该特性了，所以找了模型测试了一下，bingo~~~

示例图：

步骤：

1、在模型类的头部引入Traits的扩展类（PHP5.5以上版本可以不需要）

T('model/Auto');

1	T('model/Auto');

2、在模型类开始的位置use一下刚引入的Traits类位置

// 引入traits特性类
use \traits\model\Auto;

1 2	// 引入traits特性类 use \traits\model\Auto;

3、书写模型自动验证规则，这里注意一点（TP5的自动验证规则属性没有下划线）

    /**
     * 模型自动验证规则
     * @var array
     */
    protected $validate = [
        // 当创建数据时longurl不存在时提示
        ['longurl', 'require', '_NOT_FOUND_LONGURL_', self::EXISTS_VALIDATE, 'regex', self::MODEL_INSERT]
    ];

/**

* 模型自动验证规则

* @var array

protected $validate = [

// 当创建数据时longurl不存在时提示

['longurl', 'require', '_NOT_FOUND_LONGURL_', self::EXISTS_VALIDATE, 'regex', self::MODEL_INSERT]

];

4、书写模型的自动完成规划，这里注意一点（TP5的自动完成规则属性也没有下划线）

    /**
     * 模型自动完成规则
     * @var array
     */
    protected $auto = [
        ['mid', 0, self::MODEL_INSERT, 'string'],
        ['status', 1, self::MODEL_INSERT, 'string'],
        ['create_time', NOW_TIME, self::MODEL_INSERT, 'string']
    ];

/**

* 模型自动完成规则

* @var array

protected $auto = [

['mid', 0, self::MODEL_INSERT, 'string'],

['status', 1, self::MODEL_INSERT, 'string'],

['create_time', NOW_TIME, self::MODEL_INSERT, 'string']

];

5、在方法中使用create方法即可

$this->create($data)

1	$this->create($data)

TP5的自动验证自动完成规则与TP3.2的规则一致。

ThinkPHP 3.2.3的自动验证传送门

http://document.thinkphp.cn/manual_3_2.html#auto_validate

ThinkPHP 3.2.3的自动完成传送门

http://document.thinkphp.cn/manual_3_2.html#auto_operate

发表在 BS架构后台语言 | 标签为 thinkphp5, 自动完成, 自动验证 | 留下评论

APACHE服务器出现No input file specified.的完美解决方案

发表于2016 年 1 月 19 日由稚子

启用REWRITE的伪静态功能的时候，首页可以访问，而访问内页的时候，就提示：“No input file specified.”

原因在于使用的PHP是fast_cgi模式，而在某些情况下，不能正确识别path_info所造成的错误，Wordpress的伪静态也有一样的问题。

WordPress程序默认的.htaccess里面的规则：

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.php/$1 [L]

RewriteEngine On

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ /index.php/$1 [L]

“No input file specified.”，是没有得到有效的文件路径造成的。

修改伪静态规则，如下：

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.php?/$1 [L]

RewriteEngine On

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ /index.php?/$1 [L]

有没有发现不同？

其实就是在正则结果“/$1”前面多加了一个“?”号，问题也就随之解决了。

发表在应用工具软件 | 标签为 Apache, Rewrite | 留下评论

phpstorm常用快捷键

发表于2016 年 1 月 6 日由稚子

mac电脑phpstorm快捷键

command + a 全选

command + c 复制

command + v 粘贴

command + z 撤消

command + k 代码搜索

command + l 输入行号跳到某一行

command + o 查看一个类的结构

command + / 单行注释

command + e 列出最后打开的文件

ctrl + shift + / 块注释

shift + command + x

shift + command + r 按文件名搜索对应文件所在路径

shift + command + t 按类名搜索对应文件所在路径

shift + command + c 复制当前文件所在路径

选中左侧的文件名 shift + f6(mac需要同时按住键) 进行文件重命名

windows下phpstorm的快捷键

ctrl+shift+n查找文件

ctrl+shift+f 在一个目录里查找一段代码(ctrl+f的升级版)

ctr+shift+r 在一个目录里查找一段代码并替换(ctrl+r的升级版)

CTRL+ALT ←/→ 返回上次编辑的位置

ALT+ ←/→ 切换代码视图，标签切换

ALT+ ↑/↓ 在方法间快速移动定位

ctrl+j插入活动代码提示

ctrl+alt+t当前位置插入环绕代码

alt+insert生成代码菜单

ctrl+q查看代码注释

ctrl+d复制当前行

ctrl+y删除当前行

shift+F6重命名

ctrl+shift+u字母大小写转换

ctrl+f查找

ctrl+r替换

F4查看源码

ctrl+shift+i查看变量或方法定义源

ctrl+g跳转行

ctrl+alt+F12跳转至当前文件在磁盘上的位置

alt+down查看下一个方法

alt+up查看上一个方法

ctrl+alt+l重新格式化代码

ctrl+shift+downstatement向下移动

ctrl+shift+upstatement向上移动

alt+shift+downline向下移动

alt+shift+upline向上移动

ctrl+/行注释

ctrl+shift+/块注释

ctrl+shift+n打开工程中的文件

ctrl+b跳到变量申明处

ctrl+[]匹配 {}[]

ctrl+shift+]/[选中块代码

ctrl+x剪切行

ctrl+shift+v复制多个文本

alt+left/right标签切换

ctrl+p显示默认参数

ctrl+F12在当前类文件里快速查找方法

————————————————————–

phpstorm快捷键：

// ctrl+shift+n 查找文件

// ctrl+j 插入活动代码提示

// ctrl+alt+t 当前位置插入环绕代码

// alt+insert 生成代码菜单

// ctrl+q 查看代码注释

// ctrl+d 复制当前行

// ctrl+y 删除当前行

// shift+F6 重命名

// ctrl+shift+u 字母大小写转换

// ctrl+f 查找

// ctrl+r 替换

// F4 查看源码

// ctrl+shift+i 查看变量或方法定义源

// ctrl+g 跳转行

// ctrl+alt+F12 跳转至当前文件在磁盘上的位置

// alt+down 查看下一个方法

// alt+up 查看上一个方法

// ctrl+alt+l 重新格式化代码

// ctrl+shift+down statement向下移动

// ctrl+shift+up statement向上移动

// alt+shift+down line向下移动

// alt+shift+up line向上移动

// ctrl+/ 行注释

// ctrl+shift+/ 块注释

// ctrl+shift+n 打开工程中的文件

// ctrl+b 跳到变量申明处

// ctrl+[] 匹配 {}[]

// ctrl+shift+]/[ 选中块代码

….

// ctrl+x 剪切行

// ctrl+shift+v 复制多个文本

// alt+left/right 标签切换

// ctrl+p 显示默认参数

// ctrl+F12 在当前类文件里快速查找方法

发表在应用工具软件 | 标签为 phpstorm, 快捷键 | 留下评论

用ThinkPHP5自动生成目录及文件

发表于2016 年 1 月 6 日由稚子

自从上个月thinkphp5 beta版开放之后就一直在关注thinkphp5的官方文档，看完文档后发现thinkphp5的目录结构及一些类语法改变了，如果要将thinkphp3.2版本的项目升级到thinkphp5的话光修改目录及文件就是一项很大的工程。

在最新的thinkphp5的文档中发现支持目录及文件的自动生成机制，但具体使用文档没有发布。

自己研究了一下源码后找出了操作步骤。

1、在系统的APP_PATH目录中，也就是默认的application目录中创建一个build.php文件，编辑其内容为：

<?php
return [
    // 生成运行时目录
    'runtime' => [
        '__dir__' => ['cache', 'log', 'temp'],
    ],
    'admin' => [
        '__file__'   => [],
        '__dir__'    => ['controller', 'view'],
        'controller' => ['Addons', 'Article', 'Cate', 'Common', 'Config', 'System', 'Theme', 'User'],
        'view'       => ['addons/index', 'article/add', 'cate/add', 'config/index', 'public/base', 'system/index', 'tags/index', 'theme/index', 'user/index'],
    ],
    'common'=>[
        '__file__'   => [],
        '__dir__'    => ['behavior', 'controller', 'model', 'api'],
        'controller' => ['Addon'],
        'model'      => ['Addons', 'Article', 'Cate', 'Config', 'File', 'Hooks', 'Picture', 'Tree', 'Url'],
    ],
    'home'=>[
        '__file__'   => ['config.php', 'common.php'],
        '__dir__'    => ['widget', 'controller', 'view'],
        'controller' => ['Addons', 'Api', 'Error', 'Index'],
        'view'       => ['index/index', 'widget/archive'],
        'widget'    =>['Common']
    ],
    // 。。。 其他更多的模块定义
];

<?php

return [

// 生成运行时目录

'runtime' => [

'__dir__' => ['cache', 'log', 'temp'],

'admin' => [

'__file__' => [],

'__dir__' => ['controller', 'view'],

'controller' => ['Addons', 'Article', 'Cate', 'Common', 'Config', 'System', 'Theme', 'User'],

'view' => ['addons/index', 'article/add', 'cate/add', 'config/index', 'public/base', 'system/index', 'tags/index', 'theme/index', 'user/index'],

'common'=>[

'__file__' => [],

'__dir__' => ['behavior', 'controller', 'model', 'api'],

'controller' => ['Addon'],

'model' => ['Addons', 'Article', 'Cate', 'Config', 'File', 'Hooks', 'Picture', 'Tree', 'Url'],

'home'=>[

'__file__' => ['config.php', 'common.php'],

'__dir__' => ['widget', 'controller', 'view'],

'controller' => ['Addons', 'Api', 'Error', 'Index'],

'view' => ['index/index', 'widget/archive'],

'widget' =>['Common']

// 。。。其他更多的模块定义

];

其中数组的第一个键为application目录中的模块名称，需要一个一个添加。然后依次是模块对应的子目录__dir__、__file__、controller、model、view 之类的子目录。

2、在public中的index.php入口文件里添加一个常量 APP_AUTO_BUILD

例如：

// 开启自动生成
define('APP_AUTO_BUILD', true);

1 2	// 开启自动生成 define('APP_AUTO_BUILD', true);

3、访问应用入口文件

大功告成，看一下application目录中是不是生成了你需要的文件呢。

发表在 BS架构后台语言 | 标签为 ThinkPHP, thinkphp5, 自动生成 | 留下评论

PHP以星号隐藏用户名手机和邮箱

发表于2016 年 1 月 5 日由稚子

本文以淘宝评论购买记录中的隐藏部分用户名作为示例，并且拓展了隐藏手机号的中间四位数，和截取邮箱部分字符串，只要输入账号，可自动识别类型并以*显示。

php中的隐藏函数：

function hideStar($str) { //用户名、邮箱、手机账号中间字符串以*隐藏 
    if (strpos($str, '@')) { 
        $email_array = explode("@", $str); 
        $prevfix = (strlen($email_array[0]) < 4) ? "" : substr($str, 0, 3); //邮箱前缀 
        $count = 0; 
        $str = preg_replace('/([\d\w+_-]{0,100})@/', '***@', $str, -1, $count); 
        $rs = $prevfix . $str; 
    } else { 
        $pattern = '/(1[3458]{1}[0-9])[0-9]{4}([0-9]{4})/i'; 
        if (preg_match($pattern, $str)) { 
            $rs = preg_replace($pattern, '$1****$2', $str); // substr_replace($name,'****',3,4); 
        } else { 
            $rs = substr($str, 0, 3) . "***" . substr($str, -1); 
        } 
    } 
    return $rs; 
}

function hideStar($str) { //用户名、邮箱、手机账号中间字符串以*隐藏

if (strpos($str, '@')) {

$email_array = explode("@", $str);

$prevfix = (strlen($email_array[0]) < 4) ? "" : substr($str, 0, 3); //邮箱前缀

$count = 0;

$str = preg_replace('/([\d\w+_-]{0,100})@/', '***@', $str, -1, $count);

$rs = $prevfix . $str;

} else {

$pattern = '/(1[3458]{1}[0-9])[0-9]{4}([0-9]{4})/i';

if (preg_match($pattern, $str)) {

$rs = preg_replace($pattern, '$1****$2', $str); // substr_replace($name,'****',3,4);

} else {

$rs = substr($str, 0, 3) . "***" . substr($str, -1);

}

return $rs;

}

测试数据：

<?php 
$account = "sucaihuo.com"; 
$email = "416148489@qq.com"; 
$phone = "18005152525"; 
?>

<?php

$account = "sucaihuo.com";

$email = "[email protected]";

$phone = "18005152525";

以星号显示的示例：

<table width="100%"> 
    <tr> 
        <td>账号</td> 
        <td>邮箱</td> 
        <td>手机</td> 
    </tr> 
    <tr> 
        <td><?php echo $account;?></td> 
        <td><?php echo $email;?></td> 
        <td><?php echo $phone;?></td> 
    </tr> 
    <tr> 
        <td><?php echo hideStar($account);?></td> 
        <td><?php echo hideStar($email);?></td> 
        <td><?php echo hideStar($phone);?></td> 
    </tr> 
</table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

发表在 BS架构后台语言 | 标签为 php, 星号, 隐藏 | 留下评论

47种常见的浏览器兼容性问题大汇总

发表于2015 年 12 月 29 日由稚子

JavaScript

1. HTML对象获取问题
FireFox：document.getElementById(“idName”);
ie:document.idname或者document.getElementById(“idName”).
解决办法：统一使用document.getElementById(“idName”);

2. const问题
说明:Firefox下,可以使用const关键字或var关键字来定义常量;
IE下,只能使用var关键字来定义常量.
解决方法：统一使用var关键字来定义常量.

3. event.x与event.y问题
说明:IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
解决方法：使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.

4. window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
Firefox1.5.x下,只能使用window.location.
解决方法：使用window.location来代替window.location.href.

5. frame问题
以下面的frame为例：

(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象. frameId和frameName可以同名。
Firefox:只能使用window.frameName来访问这个frame对象.
另外，在IE和Firefox中都可以使用window.document.getElementById(“frameId”)来访问这个frame对象.
(2)切换frame内容:
在 IE和Firefox中都可以使用window.document.getElementById(“testFrame”).src = “xxx.html”或window.frameName.location = “xxx.html”来切换frame的内容.
如果需要将frame中的参数传回父窗口(注意不是opener,而是parent frame)，可以在frame中使用parent来访问父窗口。例如：parent.document.form1.filename.value=”Aqing”;

6. 模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法：直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口.
例如：var parWin = window.opener; parWin.document.getElementById(“Aqing”).value = “Aqing”;

7. firefox与IE的父元素(parentElement)的区别
IE：obj.parentElement
firefox：obj.parentNode
解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.

8. document.formName.item(”itemName”) 问题
问题说明：IE下，可以使用document.formName.item(”itemName”) 或document.formName.elements [“elementName”]；Firefox 下，只能使用document.formName.elements[“elementName”]。
解决方法：统一使用document.formName.elements[“elementName”]。

9. 集合类对象问题
问题说明：IE下，可以使用 () 或 [] 获取集合类对象；Firefox下，只能使用 [ ]获取集合类对象。
解决方法：统一使用 [] 获取集合类对象。

10. 自定义属性问题
问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute() 获取自定义属性；Firefox下，只能使用getAttribute() 获取自定义属性。
解决方法：统一通过getAttribute() 获取自定义属性。

11. input.type属性问题
问题说明：IE下input.type属性为只读；但是Firefox下input.type属性为读写。
解决办法：不修改input.type属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素。

12. event.srcElement问题
问题说明：IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。
解决方法：使用srcObj = event.srcElement ?event.srcElement : event.target;
如果考虑第8条问题，就改用myEvent代替event即可。

13. body载入问题
问题说明：Firefox的body对象在body标签没有被浏览器完全读入之前就存在；而IE的body对象则必须在body标签被浏览器完全读入之后才存在。
[注] 这个问题尚未实际验证，待验证后再来修改。
[注] 经验证，IE6、Opera9以及FireFox2中不存在上述问题，单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素，即使这个元素还没有载入完成。

14. 事件委托方法
问题说明：IE下，使用document.body.onload = inject; 其中function inject()在这之前已被实现；在Firefox下，使用document.body.onload = inject();
解决方法：统一使用document.body.onload=new Function(’inject()’); 或者document.body.onload = function(){/* 这里是代码 */}
[注意] Function和function的区别。

15. Table操作问题
问题说明：ie、firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChild方法也不管用。
解决方法：//向table追加一个空行：
var row = otable.insertRow(-1);var cell = document.createElement(“td”);cell.innerHTML = “”;cell.className = “XXXX”;row.appendChild(cell);[注] 由于俺很少使用JS直接操作表格，这个问题没有遇见过。建议使用JS框架集来操作table，如JQuery。

16. 对象宽高赋值问题
问题说明：FireFox中类似obj.style.height = imgObj.height的语句无效。

CSS

1. cursor:hand VS cursor:pointer
firefox不支持hand，但ie支持pointer
解决方法: 统一使用pointer

2. innerText在IE中能正常工作，但在FireFox中却不行.
需用textContent。
解决方法:

if(navigator.appName.indexOf("Explorer")   >   -1){
    document.getElementById('element').innerText = "my   text";
}else{
    document.getElementById('element').textContent = "my   text";
}

if(navigator.appName.indexOf("Explorer") > -1){

document.getElementById('element').innerText = "my text";

}else{

document.getElementById('element').textContent = "my text";

}

3. CSS透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
opacity 透明，子元素会继承透明属性。解决方式：

(1)使用 background:rgba(0,0,0,.6) //IE8及以下无效果。
(2)使用定位，背景色与子元素处于同级关系。

4. css中的width和padding
在IE7和FF中width宽度不包括padding，在Ie6中包括padding.

5. FF和IEBOX模型解释不一致导致相差2px
box.style{width:100;border 1px;}
ie理解为box.width = 100
ff理解为box.width = 100 + 1*2 = 102 //加上边框2px

解决方法：div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反， IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

6. IE5 和IE6的BOX解释不一致
IE5下div{width:300px;margin:0 10px 0 10px;}
div 的宽度会被解释为300px-10px(右填充)-10px(左填充)，最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改 div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

7. ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;
经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。

8. 元素水平居中问题
FF: margin:0 auto;

IE: 父级{ text-align:center; }

9. Div的垂直居中问题
vertical-align:middle; 将行距增加到和整个DIV一样高：line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行。

10. margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

例如：

<div id=”imfloat”>
相应的css为

#imfloat{
    float:left;
    margin:5px;/*IE下理解为10px*/
    display:inline;/*IE下再理解为5px*/
}

#imfloat{

float:left;

margin:5px;/*IE下理解为10px*/

display:inline;/*IE下再理解为5px*/

}

11. IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

1	#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

12. 页面的最小宽度
如上一个问题，IE不识别min，要实现最小宽度，可用下面的方法：

#container{ min-width: 600px; width:expression(document.body.clientWidth＜ 600? “600px”: “auto” );}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

13. DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

<style>
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //这句是关键}
</style>
<div id="box">
<div id="left">＜/div>
<div id="right">＜/div>
</div>

<style>

#box{ float:left; width:800px;}

#left{ float:left; width:50%;}

#right{ width:50%;}

*html #left{ margin-right:-3px; //这句是关键}

</style>

</div>

14. IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。

有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

15. float的div闭合;清除浮动;自适应高度
① 例如：＜div id=”floatA”>＜div id=”floatB”>＜div id=”NOTfloatC”>

这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为float:left;)

这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在＜div class=”floatB”>＜div class=”NOTfloatC”>之间加上＜div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可：.clear{clear:both;}

②作为外部 wrapper 的 div 不要定死高度,为了让高度能自适应，要在wrapper里面加上overflow:hidden; 当包含float的box的时候，高度自适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
例如某一个wrapper如下定义：

.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}

③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:

<div id=”page”>

<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>

</div>

</div>

比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决：

<div id=”page”>

<div id=”bg” style=”float:left;width:100%”>

<div id=”left”>＜/div>
<div id=”center”>＜/div>
<div id=”right”>＜/div>

</div>

</div>

</div>

再嵌入一个float left而宽度是100%的DIV解决之。

或者另一种方法：用选择器（：after）在page之后插入一个空标签,并清除浮动

.page:after {  content: ""; display: table; clear: both; }

1	.page:after { content: ""; display: table; clear: both; }

④万能float 闭合(非常重要!)

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上class=”clearfix” 即可,屡试不爽。

/* Clear Fix */
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */

/* Clear Fix */

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

.clearfix { display:inline-block; }

/* Hide from IE Mac */

.clearfix {display:block;}

/* End hide from IE Mac */

/* end of clearfix */

或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}

16. 高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或padding时。

例：

#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div id="box">
<p>p对象中的内容＜/p>
</div>

#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

<p>p对象中的内容＜/p>

</div>

解决技巧：在P对象上下各加2个空的div对象CSS代码{height:0px;overflow:hidden;}或者为DIV加上border属性。

17. IE6下图片下有空隙产生
解决这个BUG的技巧有很多,可以是改变html的排版,或者设置img为display:block或者设置vertical-align属性为vertical-align:top/bottom/middle/text-bottom 都可以解决.

18. 对齐文本与文本输入框
加上vertical-align:middle;

<style type="text/css">
<!--
input {
width:200px;
height:30px;
border:1px solid red;
vertical-align:middle;
}
-->
</style>

<!--

input {

width:200px;

height:30px;

border:1px solid red;

vertical-align:middle;

}

-->

</style>

经验证，在IE下任一版本都不适用，而ff、opera、safari、chrome均OK！

19. LI中内容超过长度后以省略号显示
此技巧适用与IE、Opera、safari、chrom浏览器，FF暂不支持。

<style type="text/css">
<!--
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}

-->
</style>

<!--

li {

width:200px;

white-space:nowrap;

text-overflow:ellipsis;

-o-text-overflow:ellipsis;

overflow: hidden;

}

-->

</style>

20. 为什么web标准中IE无法设置滚动条颜色了
解决办法是将body换成html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
-->
</style>

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

<!--

html {

scrollbar-face-color:#f6f6f6;

scrollbar-highlight-color:#fff;

scrollbar-shadow-color:#eeeeee;

scrollbar-3dlight-color:#eeeeee;

scrollbar-arrow-color:#000;

scrollbar-track-color:#fff;

scrollbar-darkshadow-color:#fff;

}

-->

</style>

21. 为什么无法定义1px左右高度的容器
IE6下这个问题是因为默认的行高造成的,解决的技巧也有很多：

例如:overflow:hidden　 zoom:0.08 　 line-height:1px

22.怎么样才能让层显示在FLASH之上呢

解决的办法是给FLASH设置透明

23. 链接(a标签)的边框与背景
a链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照menubar, 给 a 和menubar设置高度是为了避免底边显示错位, 若不设 height, 可以在menubar中插入一个空格。

24. 超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A

Code:

<style type="text/css">
<!--
a:link {}
a:visited {}
a:hover {}
a:active {}
-->
</style>

<!--

a:link {}

a:visited {}

a:hover {}

a:active {}

-->

</style>

25. FORM标签
这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}。

26. 属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

27. 为什么FF下文本无法撑开容器的高度
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:

{
height:auto!important;
height:200px;
min-height:200px;
}

{

height:auto!important;

height:200px;

min-height:200px;

}

28. IE和FireFox 对空格的尺寸解释不同
FireFox为4px,IE为8px; FireFox对div与div之间的空格是忽略的，但是IE是处理的。因此在两个相邻div之间不要有空格跟回车，否则可能造成不同浏览间之间格式不正确，比如著名的3px偏差（多个img标签连着，然后定义float: left;结果在firefox里面正常，而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。解决方法是在img外面套li，并且对li定义margin: 0; 避免方式：在必要的时候不要无视 list 标签）而且原因难以查明。

29. 条件注释

<link rel="stylesheet" type="text/css" href="css.css" />

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

<!--[if IE 7]>

<![endif]-->

<!--[if lte IE 6]>

<![endif]-->

lte — 小于等于
lt  — 小于
gte —  大于等于
gt  —  大于
！ —  不等于

30.强制渲染

<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>    //这句话的意思是强制使用IE7模式来解析网页代码！

<meta http-equiv=“X-UA-Compatible” content=“IE=8″>

<meta http-equiv=“X-UA-Compatible” content=“chrome=1″ />    //Google Chrome Frame也可以让IE用上Chrome的引擎

<meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE7″><!– IE7 mode –> 或者 <meta http-equiv=“X-UA-Compatible” content=“IE=7″><!– IE7 mode –>       //强制IE8使用IE7模式来解析

<meta http-equiv=“X-UA-Compatible” content=“IE=6″><!– IE6 mode –>   <meta http-equiv=“X-UA-Compatible” content=“IE=5″><!– IE5 mode –>   //强制IE8使用IE6或IE5模式来解析

<meta http-equiv=“X-UA-Compatible” content=“IE=5; IE=8″ />   //一个特定版本的IE支持所要求的兼容性模式多于一种

31.js兼容文件

使IE5,IE6兼容到IE7模式（推荐）

<!–[if lt IE 7]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js” type=”text/javascript”></script>
<![endif]–>
使IE5,IE6,IE7兼容到IE8模式

<!–[if lt IE 8]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js” type=”text/javascript”></script>
<![endif]–>
使IE5,IE6,IE7,IE8兼容到IE9模式

<!–[if lt IE 9]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script>
<![endif]–>

<!–[if lt IE 7]>

<![endif]–>

使IE5,IE6,IE7兼容到IE8模式

<!–[if lt IE 8]>

<![endif]–>

使IE5,IE6,IE7,IE8兼容到IE9模式

<!–[if lt IE 9]>

<![endif]–>

32. 浏览器识别符

p{ _color:red; }           IE6 专用
*html p{ color:#red; }  IE6 专用
p{ +color:red; }           IE6,7 专用
p{ *color:red; }           IE6,7 专用
*html p{ color:red; }    IE6,7 专用
p{*+color: red;}          IE7 专用
Body> p{ color: red; }  屏蔽 IE6
p{ color:red\9; }          IE8

Firefox: -moz-
Safari: -webkit-
Opera: -o-
IE: -ms-

p{ _color:red; } IE6 专用

*html p{ color:#red; } IE6 专用

p{ +color:red; } IE6,7 专用

p{ *color:red; } IE6,7 专用

*html p{ color:red; } IE6,7 专用

p{*+color: red;} IE7 专用

Body> p{ color: red; } 屏蔽 IE6

p{ color:red\9; } IE8

Firefox: -moz-

Safari: -webkit-

Opera: -o-

IE: -ms-

发表在 Web前台开发技术 | 标签为兼容性 | 留下评论

WAMP中配置xdebug

配置PHPStorm

JavaScript

CSS

归档

功能