NMTuan - 半个前端攻城师.!

要想更好的理解 css， 尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清除的概念。大多IE下的显示错误，就是源于 haslayout。

什么是 haslayout ？

haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）
 

当一个元素有一个布局时，它负责对自己和可能的子孙元素进行尺寸计算和定位。简单来说，这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。因此，一些元素默认会有一个布局。当我们说一个元素"拥有layout"或"得到layout"，或者说一个元素"has layout" 的时候，我们的意思是指它的微软专有属性 hasLayout 被设为了 true。一个"layout元素"可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout的元素。如果某个HTML元素拥有 haslayout 属性，那么这个元素的 haslayout 的值一定只有 true，haslayout为只读属性 一旦被触发，就不可逆转。通过 IE Developer Toolbar 可以查看 IE 下 HTML元素是否拥有haslayout，在 IE Developer Toolbar 下，拥有 haslayout的元素，通常显示为"haslayout = -1"。

负责组织自身内容的元素将默认有一个布局，主要包括以下元素（不完全列表）：

• * body and html
• * table, tr, th, td
• * img
• * hr
• * input, button, file, select, textarea, fieldset
• * marquee
• * frameset, frame, iframe
• * objects, applets, embed

对于并非所有的元素都默认有布局，微软给出的主要原因是"性能和简洁"。如果所有的元素都默认有布局，会对性能和内存使用上产生有害的影响。

如何激发 haslayout？

大部分的 IE 显示错误，都可以通过激发元素的 haslayout 属性来修正。可以通过设置 css 尺寸属性(width/height)等来激发元素的 haslayout，使其"拥有布局"。如下所示，通过设置以下 css 属性即可。

• * display: inline-block
• * height: (任何值除了auto)
• * float: (left 或 right)
• * position: absolute
• * width: (任何值除了auto)
• * writing-mode: tb-rl
• * zoom: (除 normal 外任意值)

Internet Explorer 7 还有一些额外的属性(不完全列表):

• * min-height: (任意值)
• * max-height: (除 none 外任意值)
• * min-width: (任意值)
• * max-width: (除 none 外任意值)
• * overflow: (除 visible 外任意值)
• * overflow-x: (除 visible 外任意值)
• * overflow-y: (除 visible 外任意值)
• * position: fixed

其中 overflow-x 和 overflow-y 是 css3 盒模型中的属性，目前还未被浏览器广泛支持。

对于内联元素(默认即为内联的元素，如 span，或 display:inline; 的元素)，width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout 。而对于IE6，如果浏览器运行于标准兼容模式下，内联元素会忽略 width 或 height 属性，所以设置 width 或 height不能在此种情况下令该元素具有 layout。

zoom 总是可以触发 hasLayout，但是在 IE5.0 中不支持。

具有"layout" 的元素如果同时 display: inline ，那么它的行为就和标准中所说的 inline-block很类似了：在段落中和普通文字一样在水平方向和连续排列，受 vertical-align影响，并且大小可以根据内容自适应调整。这也可以解释为什么单单在 IE/Win 中内联元素可以包含块级元素而少出问题，因为在别的浏览器中display: inline 就是内联，不像 IE/Win 一旦内联元素拥有 layout 还会变成 inline-block。

haslayout 问题的调试与解决

当网页在 IE 中有异常表现时，可以尝试激发 haslayout 来看看是不是问题所在。常用的方法是给某元素 css 设定 zoom:1。使用 zoom:1 是因为大多数情况下，它能在不影响现有环境的条件下激发元素的 haslayout。而一旦问题消失，那基本上就可以判断是haslayout 的原因。然后就可以通过设定相应的 css 属性来对这个问题进行修正了。建议首先要考虑的是设定元素的width/height 属性，其次再考虑其他属性。

对 IE6 及更早版本来说，常用的方法被称为霍莉破解(Holly hack)，即设定这个元素的高度为 1%(height:1%;)。需要注意的是，当这个元素的 overflow 属性被设置为 visible 时，这个方法就失效了。或者使用 IE的条件注释。

对 IE7 来说，最好的方法时设置元素的最小高度为 0 (min-height:0;)。

haslayout 问题引起的常见 bug

IE6 及更低版本的双空白边浮动 bug

bug 修复: display:inline;

IE5-6/win 的 3 像素偏移 bug

bug 修复: _height:1%;

E6 的躲躲猫(peek-a-boo) bug

bug 修复: _height:1%;
 

本文转自淘宝UED，仅截取部分内容记录，详情点击查看原文

手机浏览器兼容性测试结果概要

注意：以下所说的"大多数"是指在我们测试过的机型中，发生此类状况的手机占比达50%及以上，"部分"为20%到50%；"少数"为20%及以下。而这个概率也仅仅只限于我们所测试过的机型，虽然我们采集的样本尽量覆盖各种特征的手机，但并不代表所有手机的情况。

XHTML部分

大多数手机不支持的：

• 表单元素的"disable"属性

部分手机不支持的：

• "button"标签
• "input[type=file]"标签
• "iframe"标签。

虽然只有部分手机不支持这几个标签，但因为这些标签在页面中往往具有非常重要的功能，所以属于高危标签，要谨慎使用。

少数手机不支持的：

• "select"标签：该标签如果被赋予比较复杂的CSS属性，可能会导致显示不正常，比如"vertical-align:middle"。

CSS部分

大部分手机不支持的：

• "font-family"属性：因为手机基本上只安装了宋体这一种中文字体；
• "font-family:bold;"：对中文字符无效，但一般对英文字符是有效的；
• "font-style: italic;"：同上；
• "font-size"属性：比如12px的中文和14px的中文看起来一样大，当字符大小为18px的时候你也许能看出来一些区别；
• "white-space/word-wrap"属性：无法设置强制换行，所以当你网页有很多中文的时候，需要特别关注不要让过多连写的英文字符撑开页面；
• "background-position"属性：但背景图片的其他属性设定是支持的；
• "position"属性；
• "overflow"属性；
• "display"属性；
• "min-height"和"min-weidth"属性；

部分手机不支持的：

• "height"属性：对"height"的支持不太好，奇怪的是在我们的测试当中，仅仅只有很少部分手机不支持"width"属性；
• "pading"属性
• "margin"属性：更高比例的手机不支持"margin"的负值。

少数手机不支持的：

• 少数手机对CSS完全不支持；

JavaScript部分

这部分测试相对不那么让人抓狂，要么干脆不支持，如果支持的话，对基本的dom操作、事件等支持度都还不错。但我们没有测试过很复杂的脚本。

在我们测试过的手机当中，支持（包括不完全支持）JavaScript的手机比例大约在一半左右，当然，对于我们来说，最重要的不是这个比例，而是要如何做好JavaScript的优雅降级。

其他

• 部分手机不支持png8和png24，所以尽量使用jpg和gif的图片
• 另外对于平滑的渐变等精细的图片细节，部分手机的色彩支持度并不能达到要求，所以慎用有平滑渐变的bar设计
• 部分手机对于超大图片，既不进行缩放，也不显示横下滚动条
• 少数手机在打开超过20k的测试页面时，会显示内存不足

开发中你需要注意的问题

• 手机网页编码需要遵循什么规范？
  遵循XHTML Mobile Profile规范（WAP-277-XHTMLMP-20011029-a.pdf），简称为XHTML MP，也就是通常说的WAP2.0规范。 XHTMLMP是为不支持XHTML的全部特性且资源有限的客户端所设计的。它以XHTML Basic为基础，加入了一些来自XHTML 1.0的元素和属性。这些内容包括一些其他元素和对内部样式表的支持。和XHTML Basic相同，XHTML MP是严格的XHTML 1.0子集。
• 网页文档推荐使用扩展名？
  推荐命名为xhtml，按WAP2.0的规范标准写成html/htm等也是可以的。但少数手机对html支持的不好。
• 为什么现今大多数的网站一行字数上限为14个中文字符？
  由于手持设备的特殊性，其页面中实际文字大小未必是我们在CSS中设定的文字大小，尤其是在第三方浏览器中。例如Nokia5310，其内置浏览器 页面内文字大小与CSS设定相符，但是第三方浏览器OperaMini与UCWEB页面内文字大小却大于CSS设定。经测试，其文本大概在16px左右。 假如屏幕分辨率宽度为240px，去除外边距，那么其一行显示14个字以内，是比较保险（避免文本换行）的做法。
• 使用WCSS还是CSS？
  WCSS (WAP Cascading Style Sheet 或称 WAP CSS)是移动版本的CSS样式表。它是CSS2的一个子集，去掉了一些不适于移动互联网特性的属性，并加入一些具有WAP特性的扩展（如-wap-input-format/-wap-input-required/display:-wap-marquee等）。 需要留意的是，这些特殊的属性扩展并不是很实用，所以在实际的项目开发当中，不推荐使用WCSS特有的属性。
• 避免空值属性
  如果属性值为空，在web页面中是完全没有问题的，但是在大部分手机网页上会报错。
• 网页大小限制
  建议低版本页面不超过15k，高版本页面不超过60k。
• 用手机模拟器和第三方手机浏览器的在线模拟器来测试页面是不是靠谱？
  有条件的话，我们当然建议在手机实体上进行测试，因为目标客户群的手机设备总是在不断变化的，这些手机模拟器通常不能完全正确的模拟页面在手机上的显示情况，比如图片色彩，页面大小限制等就很难再模拟器上测试出来。当然，一些第三方手机浏览器的在线模拟器还是可以进行测试的，第三方浏览器相对来说受手机设备的影响较小。

推荐参考资料

开发权威网站

• WAPForum：XHTML Mobile Profile规范.pdf
• WAPForum：WCSS规范.pdf
• W3C：XHTML Basic 1.1规范.html
• W3C：Mobile Web Test Suites Working Group.html
• PPK：关于手机浏览器兼容性的测试和研究.html
• Developershome：XHTML MP 教程.html （汉化版）

经典开发文章

• Unknown：移动WAP相关标记语言的演进.jpg
• Flora Graham：Alternative mobile browsers tested.html
• Lucas Pettinati(Yahoo)：Challenges of Interface Design for Mobile Devices.html
• Holly Kolman：How to Make a Click to Call Link.html
• Brian Suda：Introduction to the Mobile Web.html

手机型号查询

• handsetdetection：手机查询.html 机型很全，偏国外机型，参数较多
• mobile9：手机查询.html 机型较全，偏门机型可能无内容
• 试手机网：手机查询+模拟.html 机型稍少，可以模拟手机操作

[Number]

编写方法：

举例1：不能为空

举例2：要求长度限制为30，并且不能少于3个字符

举例3：不能为空，并且是整型

举例4：要求两个文本框A和B中的内容一致

举例5：自定义正则表达式验证

举例6：判断是否为日期类型

Number取值和可选项的关系
当Number值为6，7，8，9，10，12的时候，可选项不能为空，一般常用的是6和8，其他的验证基本上不会在OO验证里调用。
其他的项目不需要可选项，常用的是0，1，2，3，4，5