【三月之春】温故知新CSS笔记之二

由于新增需求，加入一些方便用户的多选框，从而从一堆checkbox引出一系列的问题。记录如下

按照设计图一下样式，如上图：

固件版本部分html代码：

<div class="info-firmwarever blk-multi-item mt10 pt10"><span class="infolabel"><em>*</em>固件版本</span><div class="infochkbox"><span class="veritem"><input class="chkitem multi" type="checkbox" value="1" checked="checked"/>手机Andriod-All</span><span class="veritem"><input class="chkitem multi" type="checkbox" value="2"/>手机Andriod-All（不含4.0）</span><span class="veritem"><input class="chkitem multi" type="checkbox" value="3"/>手机Android2.1及以上</span><span class="veritem"><input class="chkitem multi" type="checkbox" value="4"/>手机Android2.1及以上（不含4.0）</span><span class="veritem" style="width:250px;"><input class="chkitem" type="checkbox" value="5"/>平板Android 3.0及以上</span><em class="separ"></em><span class="veritem"><input class="chkitem mbphone" type="checkbox" value="15"/>Andriod 1.5</span><span class="veritem"><input class="chkitem mbphone" type="checkbox" value="16"/>Andriod 1.6</span><span class="veritem"><input class="chkitem mbphone" type="checkbox" value="20"/>Andriod 2.0</span><span class="veritem"><input class="chkitem mbphone" type="checkbox" value="201"/>Andriod 2.0.1</span><span class="veritem"><input class="chkitem mbphone v21" type="checkbox" value="21"/>Andriod 2.1</span><span class="veritem"><input class="chkitem mbphone v21" type="checkbox" value="22"/>Andriod 2.2</span><span class="veritem"><input class="chkitem mbphone v21" type="checkbox" value="23"/>Andriod 2.3</span><span class="veritem"><input class="chkitem mbphone v4" type="checkbox" value="30"/>Android 4.0</span><span class="veritem"><input class="chkitem mbphone v4" type="checkbox" value="30"/>Android 4.0.3</span><span class="veritem"><input class="chkitem pad" type="checkbox" value="30"/>平板Android 3.0</span><span class="veritem"><input class="chkitem pad" type="checkbox" value="31"/>平板Android 3.1</span><span class="veritem"><input class="chkitem pad" type="checkbox" value="32"/>平板Android 3.2</span><span class="clearfloat"></span></div></div>

部分CSS代码：

.separ{display:block;margin:5px 0;height:0; /*IE下有默认.必须设置高度*/margin-right:5px;overflow:hidden;/*IE6下必须清除溢出*/width:94%; border-top:1px dotted #BFBFBF;}.blk-multi-item .infochkbox{width:595px;overflow:hidden;float:left;}.infochkbox span{/*IE6的清除浮动*/float: none;}.infochkbox input{/* 解决IE6下input父元素定义的line-height失效问题*/height:13px;width:13px;margin:10px 5px 10px 0;vertical-align:middle;}

这些系统版本和分辨率的选择，通过js控制，方便用户一次勾选多个选项。

1.考虑用户体验span不折断换行 white-space:nowrap; .infolabel和.infochkbox向左浮动，由于IE6、IE7下面inline-block的不完全支持，要有选择的慎用。

2.新增了一条dotted分割线，ie6下解析显示为dashed不影响。但是该元素的高度height和overflow属性必须定义。因为IE下有默认有高度，而且IE6下要overflow:hidden隐藏溢出。

3.为解决IE6下每个item的高度显示和其他浏览器的不一致，需要对input进行定义。

解决方法是对与文字相连接的img、input、textarea、select、object等元素加一个属性，代码如下：

 .line-height{ 

margin:(所属line-height-自身img,input,select,object高度)/2px 0;

 vertical-align:middle; 

 

结论：在ie6中，当文字和img、input、textarea、select、object等对象在同一个容器中的时候，line-height属性失效。只有全文字时，line-height属性才有效。

4.浮动引起的各浏览器在不同地方换行显示不一致问题：

参考文章： IE与Firefox下对CSS解析的区别(原创)-float left/right的区别(未详测-个人学习参考使用)http://hi.baidu.com/52xiaoyao/blog/item/0e043a1e0d41121c40341742.html

文章二：CSS float浮动的深入研究、详解及拓展(二)http://www.zhangxinxu.com/wordpress/?p=594

5.关于IE下display：inline-block的支持，请参考文章：CSS教程：inline-block在各浏览器的显示http://www.lingzhong.cn/tech/13525.htm

文章二：认知：IE6、IE7支持但不完全支持display:inline-block 地址http://blog.sina.com.cn/s/blog_6482bccc0100lm3v.html

节选“又是一个chenchen”的文章部分：

苏昱(Rainer Su)出品的CSS手册，display一节有云：

写道

在IE5.5中开始支持 inline-block 。你可以使用 inline-block 使对象获得布局而无需指定确切的高(height )和宽( width )。
在IE6.0中开始支持 list-item 。

这样说就是IE5.5就支持inline-block了，IE6/7当然也支持，但是如何解释块级元素无法呈现inline-block的效果呢？继续找资料。

找了几篇外国资料，取一个有代表性的：http://www.quirksmode.org/css/display.html

截图如上。

IE6/7对于inline-block的支持处于不完全状态：

写道

In IE 6 and 7 inline-block works only on elements that have anatural display: inline.

意思是说，IE6/7的inline-block属性只对原生默认的内联元素(span, a,em......)有效，对于块级元素(div,p,ul......)无效。

另外一个参考：http://homepage.ntlworld.com/spartanicus/ie_block_level_element_inline-block_hack.htm

写道IE doesn't apply the value inline-block for the CSS displayproperty on HTML elements that default to block level.

 那么现在有两个结论：

 1、IE6/7不识别inline-block，只是触发了layout，表现跟真实一样。

2、IE6/7不完全支持inline-block，只对内联元素有效。