html+css技巧分享和IE6典型BUG分析（重温一下）

上个星期六，给公司的一些童鞋，做了一次分享，
分享的主题是HTMl+css开发技巧
为此一个星期都没有怎么做项目，准备了一个3dppt，也就是impress.js插件，

每种类型也做了一个例子，，
讲时间2节课还算挺成功的。
为此在博客上发表下，

结构技巧
1，
一张很炫的图片分析

我们的结构是怎么样的呢?
2,一张banner很宽的图片

活动页面banner的宽度大于1000的情况下
看例子，
在我们背景图片基本上有1440px的情况下，又要保证不同分辨率下正常显示，

3，
对于文字围绕图片显示的简单的做法，

同时说明下，浮动，如果容器内有浮动并且没有清楚浮动那么浮动元素不会在容器内包围着。所以要清楚浮动。
讲下清楚浮动的3中方法：
1， 让父容器同时浮动起来(会有副作用)
2， 让浮动元素后面紧跟一个用户清楚浮动的空标签（多一个空标签，破坏了语义化）
3， 给父容器挂一个特殊的class，直接从父容器清楚浮动元素的浮动。（目前最优）

4，

这两种的新和new基本上都是在右上方，
小图标的位置考虑：1，是紧跟文字的后面标题的字数是不固定的，所以肯定是图片标签和文字是同一级，紧跟文字后面来定义。（我们要注意的就是这一种，要考虑标题的字数）
2，这个就不用说用定位，定到右上方。

谈谈定位
CSS 定位机制：
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
1， 普通流：除非专门指定，否则所有框都在普通流中定位。（元素根据自己的display类型，长宽，等属性顺序排列在z-index：0这一层的。就是普通流也可以是文档流。）
2， 浮动：就是通过float：left；float：right；来控制元素在同层里的左浮和右浮。Float，会改变正常的文档流的排列但是他仍然还是在z-index：0层里。
3， 定位：
Position：relative（翻译相对）
Position：absolute（翻译绝对）
Position：fixed（翻译固定）
他们都可以改变元素在文档流中的位置。并且可以让元素激活left，right，top，bottom和z-index属性。

Position：static（翻译静态默认值无特殊定位）
    看例子

CSS hack
css hack的方式有很多种
1， IE条件注释法：
<!--[if IE]>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css"></style>
<script type="text/javascript"></script>
（可以针对不同ie版本分别导入不同样式）
<![endif]-->
<!--[if gt IE6]>只在ie6以上版本生效<![endif]-->
<!--[if ! IE7]>只在ie7上不生效<![endif]-->


2， 选择符前缀法：
*html{}/*只对ie6生效*/
*+html{}/*只对ie7生效*/
*{}/*作为通配符表示所有这个不是hack*/


3， 样式属性前缀法：
.test{ margin-top:10px; *margin-top:8px; _margin-top:8px;}/**在ie6和ie7下生效，_只在ie6下生效*/

布局分析




IE6典型BUG分析（重温一下）
1，
浮动之后，ie6引起外左右边距双倍的bug；
加上display:inline;解决。例子


2，
Ie6文字溢出BUG

例子
原因：
由注释造成文字溢出，属于IE6的BUG，溢出文字的字数=注释的条数*2-1，这里的字数在中文或英文数字时都成立。注释坐在位置与溢出位置、区块的浮动以及文字区块的固定宽度有必然联系。
解决办法：
1、不放置注释。最简单、最快捷的解决方法；
2、注释不要放置于2个浮动的区块之间；
3、将文字区块包含在新的<div></div>之间，如：<div style=”float:right; width:400px”><span>↓这就是多出来的那只猪</span></div>；
4、去除文字区块的固定宽度，与3有相似之处；
5、在后面加一个<br />或者空格；（不推荐）
6、使用IE注释格式，如：
<!–[if !IE]>Put your commentary in here…<![endif]–>
7、给盒子加position:relative;属性

6，ie6中奇数宽高的bug

例子
出现1px的差距。
IE6中对于父级奇数宽高，影响的是子级中定位的，right和bottom属性，对于top，left是没有影响的。例子
解决：父级的宽高改成偶数，或者是用hack。


7，
Ie6下select bug
例子
，ie6下select的层级是最高的，，任何东西都遮不住它的，除了iframe。

从这里看，加入iframe相当于嵌入另个html文件
1， 使用iframe来遮住select
看例子
2， 在特定情况下可以使用js，当弹出层弹出时执行select隐藏事件；弹出层隐藏时执行select显示事件。
（但是这种情况有个弊端就是：弹出层的高度是根据内容自适应的，那么当弹出层的内容过少的时候，本身就不用挡住select那么使用这种方法就不行了）。
3，就是模拟select来处理，这种呢就是换种思路解决。用其他标签来代替select，跟select本身就没有撒关系了。例子

8：
Css优先级及！important在ie6中的bug
例子
那我们先看看css的优先级吧
1，ID选择器(形如#id{}) > 类选择器(形如.class{}) > 标签选择器(形如body{}或者span{})，也就是ID选择器，类选择器，标签选择器中，ID选择器的优先级最高，标签选择器最低；
2，然后呢在在选择器中，越具体优先级越高。
.classA  .classB  .classC{font-size: 25px;}
.classB  .classC{font-size:18px}
.classC { font-size: 12px; }
这里.classA .classB .classC的优先级最高，.classC的优先级最低；

3， 在同一个级别的情况下，最后指定的规则优先级就越高，也就是我们通常说的就近原则；html中标签的style的属性都高于css文件中的选择器样式；
4，标有”!important”的规则有最高优先级。


9：宽度自适应
例子
IE6中列表的常见问题出现在当某个 li 中的内容是一个 display: block 的锚点(anchor)或者span时。在这种情况下，列表元素之间的空格将不会被忽略而且通常会显示成额外的一行夹在每个 li 之间。一种避免这种竖直方向多余空白的解决方法是赋予这些锚点 layout。这样还有一个好处就是可以让整个锚点的矩形区域都可以响应鼠标点击。
解决方案1：
就是在li a 样式中加入zoom:1；（于是，一个更好的解决方法开始流行，它使用了一个生僻的css属性zoom：1来触发hasLayout。网上说zoom是最常用，最安全，成本小的触发hasLayout的方式）
解决方案2：
就是在li 样式中加入display:inline ；
解决方法3（不推荐）：
就是将<li>标签写成一行；
解决方案4：
就是在li a 样式中加入width:100%或者一个宽度值；

10:
父级使用padding后子元素绝对定位的BUG
例子
当我们用position来定位的时候，要用到left，top，等属性进行定位的时候，
IE6对他们的解析和IE7，IE8，IE9及FF，chrome的解析不一样
解决办法：给父级定宽度。触发haslayout。（IE下一个神秘的属性，也是Ie浏览器专有的一个属性）（大多ie下解析css出现的Bug，其原因很可能与hasLayout没有被自动触发有关，那么这个时候我们通过一些技巧，手动触发hasLayout属性就可以解决Bug了。hasLayout的触发方法有很多种，例如：设置width，height值，设置position：relative等。可能会带来一些副作用，如果出现看情况用hack来解决,zoom:1;）

如果说项目原因父级只能自适应宽度。那就是使用hack重新对ie6定义left的值


例子文件一直没有上传成功见谅