剽窃来的一些移动端开发技巧

暂时没有分类整理,先堆一起,不一定都是bug。不要问我原理,踩一个记一个而已。

问题: Android 4.1 input placeholder 对不齐,设置 height == line-height 无用

解决: 为 input 设置高度,并设置 line-height: normal;

问题: 滑动卡顿

解决: -webkit-overflow-scrolling: touch; (iOS only)

问题: Android 下 fixed 定位左右偏移

解决: 同时设置 left:0; right:0;

问题: 呼出 iOS 数字键盘

解决: 设置 input 的 type=”tel”

问题: Android 2.3 max-height 失效

解决: 要和 overflow:hidden; 同时使用,需要飘出的元素用 padding 露出

问题: Android 下 transform: translate 的内部绝对定位元素不可点

解决: 不用绝对定位或不可点元素添加 transform: translateX(0px)

问题: 取消点击时半透明背景色

解决: -webkit-tap-highlight-color: rgba(0,0,0,0)

问题: 使用 -webkit-line-clamp:2; 时正好两行和超出两行渲染高度不同

解决: 未知

问题: 禁止 iOS 呼出菜单/保存图片/新窗口打开链接/彻底干掉点击效果

解决: -webkit-touch-callout: none;

问题: 去掉 input 首字母大写及联想功能

解决:

问题: 让 input 显示“搜索”而不是“换行”

解决: 1,input 加上 type=”search”; 2,外层套上 form 标签,同时监听 submit 事件并阻止默认行为

问题: 阻止被特定区域挡住的 DOM 元素响应事件

解决: pointer-events: none; 如果该特定区域内部需要响应事件,则将内部元素设置为 pointer-events: auto;

问题: 三星 Note 3 中 text-indent 撑开的 box 使用 overflow:hidden; 挡不住

解决: 使用其他方案如 color:rgba(0,0,0,0) 来隐藏文字

问题: Android 下 input focus 高亮外框无法消除

解决:

textarea, input{
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-modify: read-write-plaintext-only;
outline: none !important;
}

原文地址:

https://github.com/jiguang/mobile-web-bug-collection

PHP发送邮件标题乱码的解决

当使用下面的PHP语句发送电子邮件的时候,如果编码和接收邮箱编码不相同,会发现邮件的标题是乱码,而邮件正文却是正确的,如何才能使得邮件标题不是乱码呢?

  $subject = stripslashes($the_post[‘Title’]);
  $headers = “MIME-Version: 1.0\r\n”;
  $headers .= “Content-type: text/plain; charset=utf-8\r\n”;
  $headers .= “Content-Transfer-Encoding: 8bit\r\n”;
  $message = stripslashes(strip_tags($the_post[‘Content’]));
  mail($to, $subject, $message, $headers);

  先用函数base64_encode() — 使用 MIME base64 对数据进行编码
  标题字符串前加编码类型例如: =?UTF-8?B?
  标题字符串后加:?=

  例如:

  $subject = “=?UTF-8?B?”.base64_encode($subject).”?=”;

  将上面一句添加到代码之中,这样,发送的中文邮件标题就不是乱码了。

参考如下:
很多朋友都使用过JavaMail进行邮件发送,在邮件正文中的乱码容易解决。但邮件主题的乱码无论怎样转码总是显示一堆乱码。到底应该怎么处理呢?

JavaMail中的邮件主题需要进行BASE64编码,格式形如:
=?GB2312?B?xPq1xMPcwuvS0b6t1tjWw6Osx+u+ob/stcfCvKOssqLQ3rjEw9zC66Oh?=
所以,直接使用msg.setSubject(“中文主题”),或者msg.setSubject(“中文主题”.getBytes(“8859_1”), “GB2312”))都一样会出现乱码。在设置邮件主题前需要将主题字串的字节编码为BASE64格式,并添加编码头,示例代码如下:

sun.misc.BASE64Encoder enc = new sun.misc.BASE64Encoder(); msg.setSubject(“=?GB2312?B?”+enc.encode(subject.getBytes())+”?=”);

linux空间使用smtp类无法发送邮件解决方法

偶然发现我网站后台自动发送邮件功能不能用了,报这个错误:

Trying to smtp.126.com:25 Error: Cannot connenct to relay host smtp.126.com Error: () Error: Cannot send email to web@daixiaorui.com state

大概意思是:无法connenct中继主机smtp.126.com 错误:()错误:无法发送电子邮件给web@daixiaorui.com

我很好奇,网站一直没动啊。为了排除问题,把最近备份的恢复一些关键的文件后还是不能成功发送邮件。然后我把smtp类和与发送邮件相关的核心文件、代码弄到本地运行了一下,非常成功。现在我开始怀疑这肯定就是linux空间配置的问题了,上次月新换了一个linux的空间,估计问题就出在这里。(PS:有兴趣的,可以看看 php利用smtp类轻松的发送电子邮件 )

上网找了n多资料后终于找到了解决方案,不是smtp类的问题,而就是linux配置的问题。原来是服务器的php.ini 禁用了fsockopen函数。

打开空间下的php.ini文件,linux空间一般都可以自定义php.ini,所以根目录下面一般会有这个文件。

有两个地方可能禁用此函数:
1. allow_url_fopen = On 查看等于后面是否为 ON,如果为OFF时函数将被禁用
2. disable_functions = fsockopen pfsockopen (我的就是这样)这里应该去掉前面的“fsockopen”。使之变成:disable_functions = pfsockopen

改过之后,保存,再重新刷新页面,就发现在linux下能成功利用smtp类发送电子邮件了。感谢网友分享的方法,问题终于得到了解决。

SAE正确开启Gzip

sae上移植的wordpress似乎不能正常开启gzip,只有css有效,js和页面都无法开启gzip。

搜索了一番,整理下解决方法:

1、首先对超过50B的内容进行压缩

– compress: if ( out_header[“Content-Length”]>=50) compress

2、对常见静态内容进行压缩

– compress: if ( out_header[“Content-type”]==”text/css” ) compress
– compress: if ( out_header[“Content-type”]==”text/javascript” ) compress
– compress: if ( out_header[“Content-type”]==”text/html” ) compress
– compress: if ( out_header[“Content-type”]==”image/png” ) compress
– compress: if ( out_header[“Content-type”]==”image/jpeg” ) compress
– compress: if ( out_header[“Content-type”]==”text/plain” ) compress

3、对PHP文件进行压缩

这个大多数网站没有提到的,至少我们没有从Google中找到一个现成的配置方法,我们的方法是

– compress: if ( out_header[“Use-Compress”] == “1″) compress

4、最后还需要在WordPress主题的header.php代码最顶部加入

这个时候Content-Encoding gzip就可以看到了。

完成以上步骤后,可以通过 http://tool.chinaz.com/Gzips/ 查看是否已经正确开启Gzip。

原文地址:http://www.zhishou.org/network/wordpress4sae-gzip/

UTF-8、BOM、的问题会导致的 html 问题

今天组内用mac 的哥们一起工作,他提交的一些文件,如图片 css 都会显示的有些问题,在 dreamwaver、notepad++ 编辑器中也发现不了问题,如果用手重新删除重新敲一遍就没问题了。后来在 VIM 编辑器下 看到了 ,顺着这个线索,发现了下面的东西。

今天组内用mac 的哥们一起工作,他提交的一些文件,如图片 css 都会显示的有些问题,在 dreamwaver、notepad++ 编辑器中也发现不了问题,如果用手重新删除重新敲一遍就没问题了。后来在 VIM 编辑器下 看到了 <feff>,顺着这个线索,发现了下面的东西。

UTF-8、BOM、的问题

有些编辑器,比如M$ Windows的记事本,在创建UTF8编码文件时会在头部添加一个不可见字符。这个字符可以通过vim查看到,而且如果是一个php文件,php4、php5在解析时均会有输出。

原来这个被称作BOM(Byte Order Mark)的不可见字符,是Unicode用来标识内部编码的排列方式的,在UTF-16、UTF-32编码里它是必需的,而在UTF-8里是可选的。因 此,才会出现有的编辑器在文件头部添加添加BOM、而有的语法解析器又不作处理的的混乱情况。

根据w3c里FAQ的建议,解决方法就是,删无赦!

http://apps.hi.baidu.com/share/detail/35382688

UTF-8编码中BOM的检测与删除

所谓 BOM,全称是Byte Order Mark,它是一个Unicode字符,通常出现在文本的开头,用来标识字节序 (Big/Little Endian),除此以外还可以标识编码(UTF-8/16/32),如果出现在文本中间,则解释为zero width no-break space

 

注:Unicode相关知识的详细介绍请参考UTF-8, UTF-16, UTF-32 & BOM

对于UTF-8/16/32而言,它们名字中的8/16/32指的是编码单位是多少位的,也就是说,它们的编码单位分别是8/16/32位,换算成 字节就是1/2/4字节,如果是多字节,就要牵扯到字节序,UTF-8以单字节为编码单位,所以不存在字节序。

UTF-8主要的优点是可以兼容ASCII,但如果使用BOM的话,这个好处就荡然无存了,除此以外,BOM的存在还可能引发一些问题,比如下面错 误便都有可能是BOM导致的:

  • Shell: #!/bin/sh: No such file or directory
  • PHP: Warning: Cannot modify header information – headers already sent

在详细讨论UTF-8编码中BOM的检测与删除问题前,不妨先通过一个例子热热身:

# curl -s http://phone.10086.cn/ | head -1 | sed -n l
\357\273\277<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional\
//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\r$

如上所示,前三个字节分别是357、273、277,这就是八进制的BOM。

# curl -s http://phone.10086.cn/ | head -1 | xxd
0000000: efbb bf3c 2144 4f43 5459 5045 2068 746d ...<!DOCTYPE htm
0000010: 6c20 5055 424c 4943 2022 2d2f 2f57 3343 l PUBLIC "-//W3C
0000020: 2f2f 4454 4420 5848 544d 4c20 312e 3020 //DTD XHTML 1.0
0000030: 5472 616e 7369 7469 6f6e 616c 2f2f 454e Transitional//EN
0000040: 2220 2268 7474 703a 2f2f 7777 772e 7733 " "http://www.w3
0000050: 2e6f 7267 2f54 522f 7868 746d 6c31 2f44 .org/TR/xhtml1/D
0000060: 5444 2f78 6874 6d6c 312d 7472 616e 7369 TD/xhtml1-transi
0000070: 7469 6f6e 616c 2e64 7464 223e 0d0a tional.dtd">..

如上所示,前三个字节分别是EF、BB、BF,这就是十六进制的BOM。

注:用到了第三方网站的页面,不能保证例子结论始终正确。

实际做项目开发时,可能会面对成百上千个文本文件,如果有几个文件混入了BOM,那么很难察觉,如果没有带BOM的UTF文本文件例子,可以用vi 杜撰几个,相关命令如下:

#设置UTF-8编码
:set fileencoding=utf-8
#添加BOM
:set bomb
#删除BOM
:set nobomb
#查询BOM
:set bomb?

如何检测UTF-8编码中的BOM呢?

shell> grep -I -r -l $'\xEF\xBB\xBF' /path

如何删除UTF-8编码中的BOM呢?

shell> grep -I -r -l $'\xEF\xBB\xBF' /path | xargs sed -i 's/^\xEF\xBB\xBF//;q'

推荐:如果你使用SVN的话,可以在pre-commit钩子里加上相关代码,从源头杜绝BOM。

#!/bin/sh

REPOS="$1"
TXN="$2"

SVNLOOK=/usr/bin/svnlook

FILES=`$SVNLOOK changed -t "$TXN" "$REPOS" | awk {'print $2'}`

for FILE in $FILES; do
CONTENT=`$SVNLOOK cat -t "$TXN" "$REPOS" "$FILE"`

if echo $CONTENT | head -c 3 | xxd -i | grep -q '0xef, 0xbb, 0xbf'; then
echo "BOM!" 1>&2
exit 1
fi
done

篇幅所限,恕不详述,未尽事宜大家就请自己搜索吧。

**************************

linux下处理windows utf8文件,发现vim头会多一个<feff>

 

一般默认创建的文件都是ANSI编码的。用记事本打开这个文件,点”另存为”,最下面有个”编码(Encoding)”可以选择,里面有”ANSI,utf8″等选项。

下面介绍用直接使用perl创建一个UTF-8的文件

open( OUT, ">:utf8", "a.txt" ) or die "a.out: $!";
print OUT "\x{feff}";
print OUT "aaaa\n";
close OUT;

反过来,删除文件中的<feff>头

open (FH, ‘<:utf8’,”$_” ) or die $!;

s/\x{feff}//;

 

五列均分的简易实现方法

项目中需要五列均分,每个间隔两个像素的效果,查了一些资料,比如 box-flex,自己找了一个最简单的解决方法,实现一下,其实最后一列是大了两个像素。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
.wrap{width:auto;height:50px;background:#000;}
.wrap ul{width:auto;}
.wrap ul li{float:left;position:relative;height:2px;width:20%;list-style:none;overflow:hidden;}
.wrap ul li:after{content:'';position:absolute;left:-2px;top:0;width:100%;height:2px;background:#FC0;}
.wrap ul li:last-child:after{left:0;}
</style>
</head>

<body>
<div class="wrap">
	<ul>
    	<li></li><li></li><li></li><li></li><li></li>
    </ul>
</div>
</body>
</html>

github 上的好东西

AlloyImage

angular.js

device.js

  • Device.js makes it easy to write conditional CSS and/or JavaScript based on device operating system , orientation,and type

echarts

  • Enterprise Charts

headroom.js

  • Give your pages some headroom. Hide your header until you need it

highlight.js

instantclick

ieBetter.js

  • make ie browser like a morden browser main for ie6~ie8

jOrgChart

  • A jQuery plugin to draw tree-like structures such as OrgCharts

jstree

kityminder

MathJax

mindmaps

my-mind

Nestable

  • Drag & drop hierarchical list with mouse and touch compatibility (jQuery plugin)(ps: support IE8)

PickMeUp

  • Really simple, powerful and customizable datepicker

revenge

resume.github.com

Semantic-UI

  • Semantic empowers designers and developers by creating a shared vocabulary for UI

startbootstrap

three.js

to-markdown

  • An HTML to Markdown converter written in javascript

zTree_v3

  • jQuery Tree Plugin

document

You-Dont-Know-JS

nodejs

douban.fm

  • a tiny and smart cli player of douban.fm based on Node.js

express

  • Sinatra inspired web development framework for node.js -- insanely fast, flexible, and simple
    http://expressjs.com

marked

  • A markdown parser and compiler. Built for speed.

markdown-js
- A Markdown parser for javascript

node

stackedit

centos 删除大文件

最近一年来,varhi.com 的服务器一直空间爆满,最开始不知道啥原因,就是天天删日志,当17G系统硬盘慢慢满的时候,就将默认的文件移动到了别的硬盘,停止了mail服务,但是硬盘还是慢慢的又满了,这次究其原因,主要是 /var/spool/mqueue 文件太大造成的,如果说文件本身,真得没有多大,90 多M,但是文件数量却惊人,直接用 ll 命令都展现不出的情况,用了 ll | head,等啊等就能看见。
如何删除浙西文件,我努力了好多次,比如,我用 ll | head 命令读出前 10 个文件,然后删掉她们,关键是这种方法要删除到什么岁月去啊。
想到了当初安装一键 lamp 环境的 screen 命令,这样就能在我断开终端的时候,这个删除程序一直跑下去了。
如何安装 screen?
先点击一下下面的地址吧

CentOS安装Screen

比如我们执行删除命了:
screen rm -rf /var/spool/mqueue
这样 rm 命令就能一直跑下去了,我们按下 ctrl+a,然后按下 d ,这样子就该干嘛干嘛了。
当我们想找回我们的 screen 命令跑的啥东东的时候,可以执行 screen + r,
这样子你就能看到跑了哪些东东,使用
Type “screen [-d] -r [pid.]tty.host” to resume one of them.
找到对应的 [pid.]tty.host ,你就能继续工作了。
今天同事又贡献了一个方法 nohup rm -rf * &

为什么css 会使用重置 reset 样式

我们知道不同的浏览器客户端默认对css的解析会有区别,这种区别是内置到浏览器中的,也就是浏览器客户端会有其本身的一套css来解析默认的页面,如果 IE/Firefox/Chrome 每个版本的默认样式表都是一致的,那么我们的重置样式可以基于这些浏览器内置的样式,理论上将是不是渲染速度会更快一些呢?实际情况可能并不是这样子,包括IE 他们的不同版本的默认css也是不一样的.如下:

IE6 IE7 IE8 IE9
a
color: #00F;
text-decoration: underline;
color: #06C;
text-decoration: underline;
a:visited
color: #800080;
address
display: block;
font-style: italic;
b
font-weight: bold;
bdo
direction: rtl;
unicode-bidi: bidi-override;
blockquote
display: block;
margin: 14pt 30pt;
display: block;
margin: 1em 40px;
body
display: block;
margin: 15px 10px;
zoom: 1;
display: block;
margin: 8px;
zoom: 1;
button
background-color: #D4D0C8;
border-style: outset;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
text-align: center;
zoom: 1;
background-color: #F0F0F0;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
text-align: center;
zoom: 1;
background-color: #F0F0F0;
border-width: 3px;
box-sizing: border-box;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
padding: 1px 8px;
text-align: center;
zoom: 1;
caption
display: block;
padding: 1px 3px 5px;
text-align: center;
zoom: 1;
display: block;
padding: 1px 300zzz 500zzz;
text-align: center;
zoom: 1;
display: table-caption;
text-align: center;
zoom: 1;
cite
font-style: italic;
code
font-family: monospace;
font-size: 10pt;
col
border-color: #D4D0C8;
display: block;
border-color: #F0F0F0;
display: block;
box-sizing: border-box;
display: table-column;
colgroup
border-color: #D4D0C8;
display: block;
border-color: #F0F0F0;
display: block;
box-sizing: border-box;
display: table-column-group;
dd
display: block;
margin: 0 0 0 30pt;
display: block;
margin: 0 0 0 40px;
del
text-decoration: line-through;
dfn
font-style: italic;
div
display: block;
dl
display: block;
margin: 14pt 0;
display: block;
margin: 1em 0;
dt
display: block;
em
font-style: italic;
embed
zoom: 1;
fieldset
border-style: groove;
border-width: 2px;
display: block;
zoom: 1;
border-style: groove;
border-width: 2px;
display: block;
padding: 0 2px 3px;
zoom: 1;
border-style: groove;
border-width: 2px;
display: block;
margin: 0 2px;
padding: 0 2px 3px;
zoom: 1;
form
display: block;
margin: 14pt 0;
display: block;
h1
display: block;
font-size: 24pt;
font-weight: bold;
margin: 14pt 0;
display: block;
font-size: 2em;
font-weight: bold;
margin: 0.67em 0;
page-break-after: avoid;
h2
display: block;
font-size: 18pt;
font-weight: bold;
margin: 14pt 0;
display: block;
font-size: 1.5em;
font-weight: bold;
margin: 0.83em 0;
page-break-after: avoid;
h3
display: block;
font-size: 13.55pt;
font-weight: bold;
margin: 14pt 0;
display: block;
font-size: 1.17em;
font-weight: bold;
margin: 1em 0;
page-break-after: avoid;
h4
display: block;
font-weight: bold;
margin: 14pt 0;
display: block;
font-size: 1em;
font-weight: bold;
margin: 1.33em 0;
page-break-after: avoid;
h5
display: block;
font-size: 10pt;
font-weight: bold;
margin: 14pt 0;
display: block;
font-size: 0.83em;
font-weight: bold;
margin: 1.67em 0;
page-break-after: avoid;
h6
display: block;
font-size: 7.55pt;
font-weight: bold;
margin: 14pt 0;
display: block;
font-size: 0.67em;
font-weight: bold;
margin: 2.33em 0;
page-break-after: avoid;
head
display: none;
hr
text-align: center;
zoom: 1;
outline: 0 none;
text-align: center;
zoom: 1;
border-style: inset;
border-width: 1px;
display: block;
margin-bottom: 0.5em;
margin-top: 0.5em;
overflow: hidden;
text-align: center;
zoom: 1;
html
overflow-x: auto;
overflow-y: scroll;
zoom: 1;
display: block;
zoom: 1;
i
font-style: italic;
iframe
background-color: #FFF;
height: 150px;
width: 300px;
zoom: 1;
img
zoom: 1;
input
background-color: #FFF;
border-style: inset;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
padding: 1px;
zoom: 1;
background-color: #FFF;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
padding: 1px;
zoom: 1;
ins
text-decoration: underline;
kbd
font-family: monospace;
font-size: 10pt;
legend
zoom: 1;
padding: 0 2px;
zoom: 1;
li
display: block;
display: list-item;
menu
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin: 14pt 0 14pt 30pt;
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin: 1em 0;
padding: 0 0 0 30pt;
object
zoom: 1;
ol
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: decimal;
margin: 14pt 0 14pt 30pt;
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: decimal;
margin: 1em 0;
padding: 0 0 0 30pt;
optgroup
font-family: sans-serif;
font-size: 10pt;
font-style: italic;
font-weight: bold;
option
font-family: sans-serif;
font-size: 10pt;
font-style: italic;
font-weight: bold;
p
display: block;
margin: 14pt 0;
display: block;
margin: 1em 0;
pre
display: block;
font-family: monospace;
font-size: 10pt;
white-space: pre;
display: block;
font-family: monospace;
font-size: 10pt;
margin: 1em 0;
white-space: pre;
rp
font-size: 6pt;
rt
font-size: 6pt;
display: ruby-text;
font-size: 6pt;
ruby
display: ruby;
samp
font-family: monospace;
font-size: 10pt;
script
display: none;
zoom: 1;
select
border-color: #FFF;
border-style: inset;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
zoom: 1;
background-color: #FFF;
border-color: #FFF;
border-width: 2px;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
zoom: 1;
background-color: #FFF;
border-width: 1px;
box-sizing: border-box;
font-family: sans-serif;
font-size: 10pt;
overflow: hidden;
zoom: 1;
small
font-size: 10pt;
font-size: 0.83em;
strong
font-weight: bold;
style
display: none;
zoom: 1;
sub
font-size: 10pt;
font-size: 0.83em;
sup
font-size: 10pt;
font-size: 0.83em;
table
border-color: #D4D0C8;
display: block;
zoom: 1;
border-color: #F0F0F0;
display: block;
zoom: 1;
border-color: #F0F0F0;
border-spacing: 2px 2px;
box-sizing: border-box;
display: table;
zoom: 1;
tbody
border-color: #D4D0C8;
display: block;
border-color: #F0F0F0;
display: block;
box-sizing: border-box;
display: table-row-group;
vertical-align: middle;
td
border-color: #D4D0C8;
display: block;
padding: 1px;
zoom: 1;
border-color: #F0F0F0;
display: block;
padding: 1px;
zoom: 1;
display: table-cell;
padding: 1px;
vertical-align: middle;
zoom: 1;
textarea
background-color: #FFF;
border-style: inset;
border-width: 2px;
font-family: monospace;
font-size: 10pt;
overflow-x: hidden;
overflow-y: scroll;
padding: 1px;
white-space: pre;
zoom: 1;
background-color: #FFF;
border-width: 2px;
font-family: monospace;
font-size: 10pt;
overflow-x: hidden;
overflow-y: scroll;
padding: 2px;
white-space: pre;
zoom: 1;
background-color: #FFF;
border-width: 1px;
font-family: monospace;
font-size: 10pt;
overflow-x: hidden;
overflow-y: scroll;
padding: 2px;
white-space: pre-wrap;
zoom: 1;
tfoot
border-color: #D4D0C8;
display: block;
border-color: #F0F0F0;
display: block;
box-sizing: border-box;
display: table-footer-group;
vertical-align: middle;
th
border-color: #D4D0C8;
display: block;
font-weight: bold;
padding: 1px;
text-align: center;
zoom: 1;
border-color: #F0F0F0;
display: block;
font-weight: bold;
padding: 1px;
text-align: center;
zoom: 1;
display: table-cell;
font-weight: bold;
padding: 1px;
text-align: center;
vertical-align: middle;
zoom: 1;
thead
border-color: #D4D0C8;
display: block;
border-color: #F0F0F0;
display: block;
box-sizing: border-box;
display: table-header-group;
vertical-align: middle;
tr
border-color: #D4D0C8;
display: block;
zoom: 1;
border-color: #F0F0F0;
display: block;
zoom: 1;
box-sizing: border-box;
display: table-row;
vertical-align: middle;
zoom: 1;
ul
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin: 14pt 0 14pt 30pt;
display: block;
list-style-image: none;
list-style-position: outside;
list-style-type: disc;
margin: 1em 0;
padding: 0 0 0 30pt;
var
font-style: italic;

原文来自: http://www.iecss.com/