采用 Webkit 核心的浏览器主要有苹果的 Safari 和 Google 的 Chrome，Webkit 核心有着良好的性能，并且在某些细节对用户非常友好，页面输入框（input 标签）聚焦高亮和文本框（textarea 标签）缩放功能就是其中的两个对用户非常友好的设计。可是这两个设计在对用户友好的同时，却会对页面设计产生影响。

CSS 屏蔽 Webkit 输入框高亮

下面是默认情况下，Webkit 浏览器里输入框获取焦点时的情况。

我们可以发现 Webkit 对输入框的高亮已经使页面呈现出的样式和设计样式不同了。如果你的网站已经对输入框获取焦点时定义了特殊的样式，不妨把 Webkit 这个多此一举的功能屏蔽掉。加上下面的 CSS 就可以轻松地把高亮去掉。

1
2
3
4
5
6
7

input {
	outline: none;
}
/* 屏蔽文本框高亮 */
textarea {
	outline: none;
}

CSS 屏蔽 Webkit 文本框缩放

Webkit 的文本框缩放功能原本是方便用户进行大量文本输入而设计的，但有时果度的缩放会造成下图的效果，打乱了页面的布局。如果你的网站已经为用户提供了足够大的空间让用户进行输入，那么你可以屏蔽这个功能，用 CSS 有两种方法。

CSS 2.1 的方法：

原理：限制文本框的最大宽度和最大高度，使其和设计的大小一样。

1
2
3
4
5

textarea {
	width: 400px;
	max-width: 400px;
	height: 400px;
	max-height: 400px;

CSS3 的方法：

通过 resize 属性禁止对元素进行缩放，因为 Chrome 对 CSS3 支持良好，因此推荐使用这个方法。

1
2
3

texearea {
	resize: none;
}

Related Posts

• CSS 多个子框架居中
• CSS3 灵活的盒子模型(Flexible Box Module) – 1
• 网页圆角的取舍
• 10个节约开发时间的CSS技巧
• 纯CSS打造斜角

WordPress 3.0 增加了一个强大的自定义菜单功能，但美中不足是要实现题图这样包含描述的菜单时，单靠目前 WordPress 的功能还无法实现。本文将教你改变 WordPress 默认的菜单输出，打造更加个性的菜单。

也许你已经知道，当后台出现 Appearance > Menus 这个菜单项的时候，就标明你使用的主题支持 WordPress 3.0 自定义菜单。只需要用 wp_nav_menu() 函数进行调用即可。但问题是 WordPress 输出的菜单 HTML 结构如下：

1
2
3
4
5
6

<ul id="menu-main">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
</ul>

但我们需要的是像下面这种结构的菜单：

1
2
3
4
5
6

<ul id="menu-main">
     <li><a href="#"><strong>Home</strong><span>Description</span></a></li>
     <li><a href="#"><strong>About</strong><span>Description</span></a></li>
     <li><a href="#"><strong>Contact</strong><span>Description</span></a></li>
     <li><a href="#"><strong>Blog</strong><span>Description</span></a></li>
</ul>

通过对比，很明显 WordPress 默认输出的菜单结构并不能满足我们的要求。我们需要做的是先为每个菜单项写上 description，然后添加一个 filter 对 WordPress 输出的菜单进行整理。

在 Appearance > Menus 页面，菜单项的 description 输入框默认是隐藏的，我们可以在页顶的 Screen Options 里把 Description 勾上。

然后我们就开始为菜单项加上描述吧！

在默认情况下，WordPress 已经自动为 Page 菜单项写上了长长的描述，在这里我们可以把这些描述改为自己喜欢的内容。

接下来我们要写一个 filter 用来整理 WordPress 输出的菜单代码。wp_nav_menu() 函数有一个 walker 参数，我们通过这个参数来调用 filter。下面是 filter 的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

class description_walker extends Walker_Nav_Menu
{
      function start_el(&$output, $item, $depth, $args)
      {
           global $wp_query;
           $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
 
           $class_names = $value = '';
 
           $classes = empty( $item->classes ) ? array() : (array) $item->classes;
 
           $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
           $class_names = ' class="'. esc_attr( $class_names ) . '"';
 
           $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
 
           $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
           $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
           $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
           $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
 
           $prepend = '<strong>';
           $append = '</strong>';
           $description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';
 
           if($depth != 0)
           {
                     $description = $append = $prepend = "";
           }
 
            $item_output = $args->before;
            $item_output .= '<a '. $attributes .'>';
            $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
            $item_output .= $description.$args->link_after;
            $item_output .= '</a>';
            $item_output .= $args->after;
 
            $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
            }
}
</li>

这个 filter 只是在 WordPress 默认的 walker 脚本的基础上修改了一些内容（原代码在 wp-includes/nav-menu-template.php），并且只为顶级菜单项添加描述。

最后一步，我们只需在调用菜单的时候告诉 WordPress：“调用这个菜单的时候使用我自己的 walker 脚本”，WordPress 就会自动生成你所需要的结构的菜单了。在调用菜单是，我们这样写：

1
2
3
4
5
6
7
8
9
10
11

wp_nav_menu( array(
	'container' =>false,
	'menu_class' => 'nav',
	'echo' => true,
	'before' => '',
	'after' => '',
	'link_before' => '',
	'link_after' => '',
	'depth' => 0,
	'walker' => new description_walker())
);

要令菜单更好看的话，我们只需要编写自己喜欢的 CSS 样式即可。

Related Posts

• 为 WordPress 3.0 的自定义菜单链接添加栏目图标
• 主题发布：Inpad
• 自定义默认Gravatar头像
• 显示每篇文章的日期
• 为主题添加AJAX提交评论功能

jQuery 的选择器借鉴了大量 CSS1 ~ CSS3 标准的特点，并且整理成一个强大的对象选择工具集。但要注意的是如果你的对象名里包含 “#;&,.+*~’:”!^$[]()=>|/” 这些元字符时，你必须用 “\\” 进行转义。例如你要选择文档里包含 “name=”names[]“” 的 input 元素时，在编写过滤规则时你必须先对 “[]” 进行转义，所以我们应该这样定义选择器：“$(“input[name=names\\[\\]]”)”。

泛选择器（*）

在 jQuery 选择器里，“*” 号是一个通配符，表示所有。例如：

1

$("*").css("border","3px solid red")

上面的一句表示遍历页面里的所有容器，并且全部赋予一个线宽为 3px 的红色实线边框。还有一种情况是我们只需要对某些容器里的内容进行操作，我们可以这样写：

1

$("#test").find("*").css("border","3px solid red")

上一句只对 ID 为 test 的容器里的子容器产生效果，为它们加上线宽为 3px 的红色实现边框。

:animated 选择器

:animated 选择器是用来选择当前执行 jQuery 动画的元素的，严格来说是一个特征过滤器。例如：在空 HTML 文档里建一些 Div ，其中一个 ID 为 mover ，然后编写以下的 jQuery 语句

1
2

$("#mover").slideToggle("slow", animateIt);
$("div:animated").toggleClass("colored");

上面的代码执行后将先找到 ID 为 mover 的元素，并不断地进行展开和收缩的动画。然后浏览器遍历页面里所有的 Div 标签，如果该 Div （在这个例子里也就是 ID 为 mover 的 Div 了）正在执行动画的话，jQuery 将为这个 Div 加上 class=”colored”。具体的 Demo 可以看这个页面。

属性选择器

jQuery 的属性选择器是其所有选择器最强大的一个，也是最灵活复杂的，具体情况还可以继续进行细分。

属性字头选择器（Attribute Contains Prefix Selector）

jQuery 属性字头选择器的使用格式是 jQuery(‘[attribute|=value]‘) ，例如 jQuery(‘[herflang|=en]‘) 这句代码执行时将会选择文档中所有含有 herflang 属性，并且 herflang 的值以 “en” 开头的元素，即使 “en” 后面紧跟着连字符 “-” 也能进行选择。

属性开头选择器（Attribute Starts With Selector）

jQuery(‘[attribute^=value]‘) ，用于选择属性的值以某个字符串开头的元素，但和 jQuery(‘[attribute|=value]‘) 的区别是，如果 value 的后面是一个连字符的话，这个元素不会被选择。例如 jQuery(‘[rel^=no]‘) 将会选择所有 rel 的值以 “no” 开头的元素，但类似于 rel=”no-****” 的元素不会被选择。

属性包含选择器（Attribute Contains Selector）

基本使用方法为 jQuery(‘[attribute*=value]‘)，例如 jQuery(‘[rel*=no]‘)，表示所有带有 rel 属性，并且 rel 的值里包含子字符串 “no” 的元素（如 rel=”nofollow”，rel=”yesorno” 等等）都将会被选择。

属性单词选择器（Attribute Contains Word Selector）

jQuery(‘[attribute~=value]‘)，这个选择器的特别之处在于 value 的值只能必须是一个独立的单词（或者是字符串），例如 jQuery(‘[rel~=no]‘) ，此句在执行的时候会选择带有 rel=”yes or no” 的元素，但不会选择带有 rel=”yesorno” 的元素。这个选择器可以看做属性包含选择器的补充品，用于需要进行严格匹配的时候。

属性结尾选择器（Attribute Ends With Selector）

jQuery(‘[attribute$=value]‘) ，用于选择特定属性的值以某个字符串结尾的元素，例如 jQuery(‘[rel$=no]‘) 将会选择 rel 属性的值以 “no” 结尾的元素。

属性均等选择器（Attribute Equals Selector）

jQuery(‘[attribute=value]‘) ，只选择属性的值完全相等的元素，如：jQuery(‘[rel=nofollow]‘)，则只选择 rel=”nofollow” 的元素，差一点都不行！

属性非等选择器（Attribute Not Equal Selector）

jQuery(‘[attribute!=value]‘) ，和 :not([attr=value]) 的效果一样，用于选择属性不等于某个值的元素，例如 jQuery(‘[rel!=nofollow]‘)，所有 rel=”nofollow” 的元素都不会被选择。

按钮选择器（:button Selector）

jQuery(‘:button’) ，所有的 <input type=”button”> 和 <button> 元素都会被选择。

Checkbox 选择器（:checkbox Selector）

jQuery(‘:checkbox’) ，所有的 <input type=”checkbox”> 元素都会被选择。

Checked 选择器（:checked Selector）

jQuery(‘:checked’) ，可以看做是 Checkbox 选择器的补充，用于选择所有已经被勾选的 Checkbox 对象。

子元素选择器（Child Selector）

jQuery(‘parent > child’)，只选择 parent 的子元素（下一级元素），不对子元素以下的元素进行选择。

近期忙，少更新。

Related Posts

• CSS 屏蔽 Webkit 浏览器 input 高亮和 textarea 缩放
• 利用 Yahoo Pipes 和 jQuery 做一个 RSS 挂件
• 为 WordPress 3.0 的自定义菜单链接添加栏目图标
• CSS 多个子框架居中
• CSS3 灵活的盒子模型(Flexible Box Module) – 2

Android 作为一个优秀的手机操作系统，有着大量的软件开发者为其开发各种软件。由于目前 Android 手机用户多数为 Geek ，他们追求极致的性能，因此优秀的系统管理软件成为了必需品。今天介绍的是一款强大的 Android 系统管理软件：Toggle Settings。

一个顶好几个

Toggle Settings 通过同时修改多项系统设置，并保存为一个配置，使用户能迅速把手机调整到一个最适合你所处场合的状态，例如 Android 系统缺少的情景模式，通过 Toggle Settings 的环境配置可以一键切换到会议模式、户外模式等等。除了系统本来预设的集中情景外，用户还可以自己添加情景。

另外 Toggle Settings 还带有一个进程管理器，并且支持自动结束任务功能，进程杀手等等可以靠边站了！

Toggle Settings 有一个类似 Google Calendar 的实用功能，可以实现日程提醒，不习惯 Google Calendar 的人可以试试。

很多人习惯在 Android 安装一些桌面开关，用来随时打开或关闭蓝牙、Wifi等等，但这种桌面开关却是本来已经不大的桌面更加拥挤了。Toggle Settings 完全可以实现这些一键开关的功能，而且他能隐藏到通知栏里，要使用的时候只需要拉下通知栏并且点击 Toggle Settings 进程就能启动了。可以说是功能强大，使用方便，但一点都不会弄脏我们的桌面。

汉化版下载

http://cantonbolo.googlecode.com/files/Toggle-Settings-CN-sign.apk

Related Posts

• 入手三星 i7500 Galaxy

为了管理和统计的方便，很多人会使用 FeedBurner 来烧录博客的 Feed ，今天介绍一款插件，可以在 WordPress 的后台查看自己的 FeedBurner 统计数据。

打开“Awareness API”

首先要做的是在 FeedBurner 里打开 Feed 的 Awareness API，否则任何人都无法通过其他途径获取你的 Feed 统计数据。在 FeedBurener 的 My Feeds 页面选择博客的 Feed ，在 Publicize 选项卡里打开 Awareness API 选项，点击 Activate 即可打开 Awareness API 功能，非常简单。

安装和配置 Feed Stats for WordPress 插件

这个插件可以在官方插件目录找到，安装并激活以后在后台的 Setting（设置） -> Feed Stats 页面里进行设置。只需在 FeedBurner Feed URL 里填写 FeedBurner 提供的 Feed 地址，点解 Test 提示 This feed is valid. 即为成功。

完成配置后你马上就可以在 Dashbroad -> Feed Stats 里查看 Feed 的统计数据了，非常详细。

几个重要的细节

• 统计数据仅在你打开 Feed Stats 页面是才会从 FeedBurner 获取，插件不会一直进行连接
• 插件默认只获取最近十天的数据

Related Posts

• WordPress 分享插件：iBegin Share (mod)
• WordPress 微博插件： WP Admin Microblog
• 做一个自己的插件
• 提高主题的插件体验
• 如何把插件集成到主题里(1)

如果我们希望把一个网站的更新实时发布到令一个网站上，最好的方法是通过 RSS 进行转载。如果只是需要简单的对更新的条目做个提示的话，使用 JavaScript 是最可行的方法。但是通过 JavaScript 解析一个 XML 文档十分麻烦。幸好 Yahoo Pipes 为我们提供了非常好的 RSS to JSON 功能，我们可以先把 RSS 转换成 JSON 再用 JavaScript 进行解析，这样比直接解析 XML 简单得多！

把 RSS 转换成 JSON

首先登录 http://pipes.yahoo.com ，新建一个 Pipe ( Creat a Pipe ) 。然后在左边的工具里选择 Sources > Fetch Feed ，在输入框里输入一个 RSS 地址。再用线把 Fetch Feed 和 Pipe Output 两个框框连起来（如右图），保存这个 Pipe，然后点击顶部的 Run Pipe… 。点击 Publish 发布这个 Pipe ，然后记下 Get as JSON 的 URL。简单几步就已经把一个 RSS 转换成 JSON 了，而且这个 JSON 会根据 RSS 的更新自动更新。

通过 jQuery 解析 JSON

jQuery 本身为我们提供了一个 getJSON() 函数，为我们解析 JSON 提供简单快捷的方法。

由于我希望做一个 AJAX 载入项目的效果，我先做一个 HTML 框架，然后通过 jQuery 的 append 方法把解析出来的内容添加到指定的容器里。HTML框架如下：

1
2
3
4
5

<div id="rssdata">
	<ul class="rss-items"></ul>
	<div class="loading">Loading RSS items...</div>
</div>
<p>然后编写 jQuery 调用：</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$('#rssdata').ready(function() {
	// JSON 地址 = 刚才记下的 URL + &_callback=?
	var pipe_url = 'http://pipes.yahoo.com/pipes/pipe.run?_id=90caf3b6ba8f36459a3137248b47620e&_render=json&_callback=?';
 
	$.getJSON(pipe_url,function(data) {
		// 遍历 JSON 项目，并且确定输出哪些信息
		$(data.value.items).each(function(index,item) {
			var item_html = '<li><a href="'+item.link+'">'+item.title+'</a></li>';
			// 把输出的内容插入页面里
			$('#rssdata ul.rss-items').append(item_html);
			});
		// 添加条目载入效果
		$('#rssdata div.loading').fadeOut();
		$('#rssdata ul.rss-items').slideDown();
	});
});
</script>

当然要页面美观的话，写一些 CSS 是必要的，这个可以随自己的喜好而定。最终的效果可以看这个 DEMO。

Related Posts

• jQuery插件：jwTabs
• 用jQuery制作页面风格切换开关
• 使用 jQuery 简化 Ajax 开发
• jQuery+CSS制作滑动门效果
• jQuery实现链接背景淡出淡入效果

WordPress 3.0 为了增强 CMS 功能，加入了自定义菜单的功能，除了定义菜单项目外，还可以菜单定义各个项目的 CSS Class。我们可以利用这个功能来为菜单项目添加一个个性图标。

在 WordPress 3.0 的 Appearance（外观）-> Menus（菜单）面板里我们可以看到自定义菜单的设置，首先点击“Creat Menu”，再在左栏勾选需要的菜单项目后点击“Add to Menu”可以把勾选的项目添加到刚才建立的自定义菜单里。这是展开菜单项可以看到相关项目的参数。

默认情况下能修改的参数很少，这时点击屏幕左上角的“Screen Options（屏幕参数）”，把“Show advanced menu properties（显示高级菜单属性）”里的项目全部勾选，我们就可以看到更多的参数。以本文题图为例，为各个项目分别加上 Home、Advertise、Contact、Archives 和 About 的 CSS Class，这样在前台调用菜单时，这些项目将拥有一个自定义的 CSS Class，接下来我们可以通过 CSS 为这些项目加上图标。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#header ul.navigation li a.home {
	background:url("images/home.png") no-repeat 0 1px transparent;
}
#header ul.navigation li a.about {
	background:url("images/about.png") no-repeat 0 0px transparent;
}
#header ul.navigation li a.advertise {
	background:url("images/advertise.png") no-repeat 0 0px transparent;
}
#header ul.navigation li a.archive {
	background:url("images/archive.png") no-repeat 1px 2px transparent;
}
#header ul.navigation li a.contact {
	background:url("images/contact.png") no-repeat 0 3px transparent;
}

在 WordPress 3.0 之前的版本里，我们可以通过 JavaScript 等方法为菜单项目加上图标。原理是获取菜单项的 title 值，再为它加上一个和 title 值相同的 Class，在 jQuery 里可以这样写：

1
2
3
4
5

$(document).ready(function(){
	$('ul.navigation li a').addClass(function() {
		return $(this).attr('title');
	});
});

Related Posts

• 为 WordPress 3.0 自定义菜单添加描述
• 主题发布：Inpad
• 自定义默认Gravatar头像
• 显示每篇文章的日期
• 为主题添加AJAX提交评论功能

在文章内插入的广告具有相当高的点击率。在 WordPress 里，我发现很多人利用 JavaScript 把广告插入到 more 截断标签处，作为内文广告。昨晚我也在内文里放了 Google Adsense，但我是用 WordPress 自带的 add_filter 函数实现的。

打开主题的 function.php ，插入下面的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

/**
 * The filter to insert the ads
 */
function bl_insert_ad_code_filter( $content ) {
	global $id;
 
	// 只在文章页面显示
	if ( !is_single() ) {
		return $content;
	}
 
	// 首先插入广告代码
	$html = '<div class="single_ads">你的广告代码</div>';
 
		// more 标签在 WordPress 2.3 前是一个 a 标签，2.3 后是一个 span 标签
		// 保证兼容性
		return preg_replace("#\《(a|span) id＼=\"more-$id\"\》\《/\\1\》#", $html."$0", $content, 1);
		//因为 wp-syntax 插件的问题，请把上一句代码中的书名号替换成“< ”和“>”，“＼”换成“\”
 
	return $content;
}
 
add_filter('the_content', 'bl_insert_ad_code_filter', 50);

利用这个 filter 我们还可以在文章任意的地方插入广告，或者添加其他的应用，大家可以尽情发挥创意。

Related Posts

• 为 WordPress 3.0 自定义菜单添加描述
• 为 WordPress 3.0 的自定义菜单链接添加栏目图标
• WordPress 高级设置技巧
• WordPress 分享插件：iBegin Share (mod)
• PHP 获取远程图片

有时我们需要令一个宽度固定的容器里的子框架居中（例如一个 Div ，或者其他 block 级元素），如果子框架只有一个的话，我们只需要为子框架加上 CSS 属性 margin: auto 就可以了。

但如果我们要让多个子框架居中，并且等分父框架剩余的空间的话，我们对所有子框架使用 CSS box-align: center 来实现这种效果。

可是目前还有相当一部分主流浏览器不支持 box-align 属性，那么我们应该如何编写 CSS，使这种效果能兼容大部分的浏览器呢？

通常的方法

为了使多个 block 级元素排列在同一行里，我们习惯使用 float 属性使子框架浮动，然后利用 margin 属性让每一个子框架之间都留出一些空白的间距。可是这样做会触发经典的 IE6 双倍 margin BUG，这样反而要投入额外的时间去调试 IE6 的 Hack。

虽然我们还可以通过 display: inline 来避开 IE6 的 BUG，但我们仍然需要调整这些子框架间的间距，防止最后一个自框架被挤到下一行。

改变子框架级别并且控制剩余的空白

使用 float 和 margin 来让多个子框架居中并且等分父框架剩余空间的做法缺点很多。为了避开这些缺点，我们还可以使用另一种方法：把子框架的级别改为 inline-block ，并且通过 letter-spacing 属性 控制自框架之间的间距。

假设在一个父框架里有四个 block 级的子容器，每个子容器的大小均为 100px x 100px。为了让这些子框架能排列在同一行内，我们可以把它们改为 inline-block 级，由于子框架和父框架之间并没有其它的内容，应此要控制子框架的空间分配将易如反掌。姑且假设父框架 id=parent，子框架 class=child，那么 CSS 可以这样写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#parent {
	width: 615px;
	border: solid 1px #aaa;
	text-align: center;
	font-size: 20px;
	letter-spacing: 35px;
	whitewhite-space: nowrap;
	line-height: 12px;
	overflow: hidden;
}
.child {
	width: 100px;
	height: 100px;
	border: solid 1px #ccc;
	display: inline-block;
	vertical-align: middle;
}

在这段样式里，#parent 的 text-align、letter-spacing、white-space、overflow 和 .child 的 vertical-align、display 这些属性是实现预想效果的关键，下面解释一下这些属性起了什么作用。

• text-align：使 #parent 里的所有内容都居中
• letter-spacing：控制每个子框架之间的空白大小
• white-space: nowrap：防止最后一个子框架被挤到下一行
• overflow: hidden：隐藏超出 #parent 范围的内容
• vertical-align: middle：使所有子框架都垂直居中
• display: inline-block：是所有子框架都排列在同一行，并且保持 block 级元素的特性

兼容 IE

在今时今日，老版本的 IE 浏览器已经成为网页设计师的心头大恨，虽然上面的 CSS 能兼容 IE8，但由于 IE6 和 IE7 并不完全支持 inline-block 级元素，因此我们还需要写下面的一段 Hack，确保在 IE6 和 IE7 里能保持和现代浏览器一致的效果。

1
2
3
4

.child {
	*display: inline;
	*margin: 0 20px 0 20px;
}

本文所举例子的最终效果可以看这个 DEMO。

后记

本文所举的例子虽然只有短短的两句 IE Hack，但在实际开发中大家要写的 Hack 肯定要多很多，因此淘汰老版本 IE 的任务已经刻不容缓。我听过很多人说：“我不用 IE 浏览器的，我用傲游和世界之窗”，在这里我提醒一下大家，对这些无法解释清楚的人，我们可以简单地和他们说：“凡是能用支付宝的浏览器都是落后的，请放弃使用。”。

Related Posts

• CSS 屏蔽 Webkit 浏览器 input 高亮和 textarea 缩放
• CSS3 灵活的盒子模型(Flexible Box Module) – 1
• 网页圆角的取舍
• 10个节约开发时间的CSS技巧
• 纯CSS打造斜角

继上一篇《CSS3 灵活的盒子模型(Flexible Box Module) – 1》后继续深入，说说 CSS3 里盒子模型的尺寸。本文的 HTML 框架继续沿用《CSS3 灵活的盒子模型(Flexible Box Module) – 1》。

在 CSS2 里，要把一个容器分成三栏的话比较简便的方法是把三个字容器的 width 都设为 33.3%，这种方法无法把父容器的宽度完全填充，在父容器的宽度足够大的时候留下的空白会是页面变得很不美观。令一种方法是通过计算把子容器的 width 都设为一个固定值，这种方法比较繁琐，而且在一些情况下无法使子容器的宽度完全相等（例如父容器的宽度为 100px）。当我们迈入 CSS3 时代后，这种问题将迎刃而解。

box-flex 属性

box-flex 应用在需要分栏的子容器上，它的值必须是一个自然数或小数。当父容器里有多个带有 box-flex 属性的子容器时，浏览器将会把这些子容器的 box-flex 的值相加，然后根据它们各自的值占总值的比例，再在父容器剩余的空间里分配它们的尺寸（说的啰嗦，其实一看 DEMO 就懂）。也就是说，我们需要注意 box-flex 属性必须在父框架具有具体的 width 或者 height 的时候才能正常渲染。

灵活的尺寸

在这个例子里，我将使子容器2和3的宽度相等，并且子容器1的宽度为它们的两倍。由于使用了 box-flex 属性，如果再插入一个子容器的话，已有的容器宽度将会自动调整。CSS 如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

#exemple4 .content{
	-moz-box-orient : horizontal;
	-webkit-box-orient : horizontal;
	box-orient : horizontal;
}
#exemple4 .v1{
	-moz-box-flex: 2;
	-webkit-box-flex: 2;
	box-flex: 2;
}
#exemple4 .v2{
	-moz-box-flex: 1;
	-webkit-box-flex: 1;
	box-flex: 1;
}
#exemple4 .v3{
	-moz-box-flex: 1;
	-webkit-box-flex: 1;
	box-flex: 1;
}

效果可以看这个 DEMO。大家也可以下载这个 DEMO，尝试添加一个新的子容器，它是不是自动适应了。

自适应子容器和固定尺寸子容器的混合使用

box-flex 的另一个强大之处是可以和具有固定尺寸的容器混合使用。我把上面的例子改一改，子容器3改成固定宽度160px，其它的保持不变，看看有什么效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#exemple5 .content{
	-moz-box-orient: horizontal;
	-webkit-box-orient: horizontal;
	box-orient: horizontal;
}
#exemple5 .v1{
	-moz-box-flex: 2;
	-webkit-box-flex: 2;
	box-flex: 2;
}
#exemple5 .v2{
	-moz-box-flex: 1;
	-webkit-box-flex: 1;
	box-flex: 1;
}
 
#exemple5 .v3{
	width: 160px;
}

大家可以看这个 DEMO 的效果。我们可以发现，子容器1和子容器2的宽度是在父容器宽度减去子容器3的宽度以后剩下的空间里分配的，这点和使用百分比作为 width 时直接根据父容器的宽度进行计算有很大的不同，使用 box-flex 能使子容器自动适应尺寸的变化，节省了很多调试时间。

空间的分配

因为我们可以把具有固定尺寸和灵活尺寸的子容器混合使用，并且也可以给父容器赋予灵活的尺寸。因此在最终的成品里我们可能会遇到父容器空间过余或者不足的情况。为了更合理地利用父容器提供的空间，box-align 和 box-pack 属性可以帮助我们。

box-pack 属性

box-pack 属性可以用于设置子容器在水平轴上的空间分配方式，它共有四种可能值：start，end，justify 和 center。这些值的含义如下：

• start ：所有子容器都分布在父容器的左侧，右侧留空
• end ：所有子容器都分布在父容器的右侧，左侧留空
• justify ：所有子容器平均分布（默认值）
• center ：平均分配父容器剩余的空间（能压缩子容器的大小，并且有全局居中的效果）

box-align 属性

box-align 属性用于管理子容器在竖轴上的空间分配方式，共有五个值：start，end，center，baseline 和 stretch。

• start ：子容器从父容器顶部开始排列
• end ：子容器从父容器底部开始排列
• center ：子容器横向居中（有点奇怪）
• baseline ：所有子容器沿同一基线排列（很难理解）
• stretch ：所有子容器和父容器保持同一高度（默认值）

box-align 和 box-pack 属性通常混合使用，我们可以用下面的 CSS 测试一下：

1
2
3
4
5
6
7
8
9
10
11
12
13

#exemple6 .content{
	-moz-box-orient: horizontal;
	-moz-box-pack: center;
	-moz-box-align: center;
 
	-webkit-box-orient: horizontal;
	-webkit-box-pack: center;
	-webkit-box-align: center;
 
	box-orient: horizontal;
	box-pack: center;
	box-align: center;
}

在线的 DEMO，大家可以 Firebug 禁用 box-align 和 box-pack 属性看看它们的区别和效果。

防止子容器溢出

CSS3 并没有更好地解决内容溢出的问题，反而在加入和新的盒子模型参数后，溢出的情况变得更加频繁。因此最好的方法还是多做试验，更好地管理你的内容。overflow: hidden 正能临时起点作用而已。

Related Posts

• CSS 屏蔽 Webkit 浏览器 input 高亮和 textarea 缩放
• jQuery选择器详解（一）
• 为 WordPress 3.0 的自定义菜单链接添加栏目图标
• CSS 多个子框架居中
• CSS3 灵活的盒子模型(Flexible Box Module) – 1