CSS小tip整理

CSS小tip整理

1.利用css在列表靠头和末尾添加箭头：

/* 左箭头*/
ol a[rel="prev"]:before {
    content: "\00AB";
    padding-left: 0.5em;
}

/* 右箭头*/
ol a[rel="next"]:after {
    content: "00BB";
    padding-right: 0.5em;
}

2.让父元素包含浮动的子元素：

• 添加一个进行清理的元素
• 让父元素浮动，并使用某个元素进行清理
• overflow：hidden

3.固定宽度，流式和弹式布局

• 固定宽度：简便，常用，不能充分利用可用空间，不灵活
• 流式布局：尺寸用百分数设置。能够相对于浏览器窗口进行伸缩。但是在窗口宽度较小的时候，行变得非常窄，有必要添加以像素或em为单位min-width，防止布局变得过窄
• 弹性布局：以em为单位设置元素的宽度。
• 流式和弹性图像：弹性布局使遇到图像元素，可将图像用作背景，然后容器设置100%并且将overflow设置为hidden

4.常见bug

• 双边距浮动bug
  
  IE 6和更低版本，使任何浮动元素的外边距加倍
  
  解决方案：设置display：inline可修复bug
• 3像素文本偏移bug
  
  IE 5和IE 6中，当一个文本与一个浮动元素相邻时，这个bug就会表现出来：

例如：

.myFloat {
    float: left;
    width: 200px;
}
p {
    margin-left: 200px;
}

/*
    修复：
 */

p {
    /*
     * IE 6中，为容器设置一个小的高度，IE 6
     * 和更低版本元素会不正确的扩展他们的高度，
     * 设置小的高度不会影响实际高度。
     */
    height: 1%;
    margin-left: 0;
}
.myFloat {
    margin-right: -3px;
}

如果浮动元素是图片的话，这样还不够；

图片解决方案：

p {
    height: 1%;
    margin-left: 0;
}
img .myFloat {
    margin: 0;
}

• IE6的重复字符bug
  
  当一系列浮动元素的第一个和最后一个元素之间有多个注释时，就会出现这个bug。
  
  前俩个注释没有影响，但后续每个注释会导致俩个自读重复出现。
  
  解决：删掉注释

• 相对容器中的绝对定位
  
  IE 5,6的定位不够准确，需要迫使相对定位的容器拥有布局
  
  可以用条件注释为容器设置一个小的高度，IE 6和更低版本元素会不正确的扩展他们的高度，设置小的高度
  
  不会影响实际高度。