CSS篇

关于IE的bug

1. 图片label bug，影响版本ie6/ie7/ie8。

当label中有img的时候无法触发点击选中form元素事件.

demo

http://haslayout.net/demos/Image-Label-Focus-Bug-Demo.html

fixdemo

http://haslayout.net/demos/Image-Label-Focus-Bug-Fixed-Demo-CMS.html

解决方案：
通过给<label>内加入一个空的span标签，然后设置position:absolute；background:url(#); 设置label float:left; position:relative;overflow:hidden;就可以解决了。

2. 当:active时Button背景偏移，影响版本ie8。

给button设置:active时背景会做偏移，可以通过设置:active时的-ms-background-position-x和-ms-background-position-y来改变这个偏移。

3. div中的img溢出部分不显示。

div高度固定，设置div中的img往上拉，如：magin-top: -20px，IE6中会隐藏溢出部分。

解决方案：
设置img的position为relative，然后：top: -20px

4. PNG格式在IE6.IE7.FireFox透明及Repeat的方法

http://sevendesign1230.pixnet.net/blog/post/2258896

5. IE6不支持margin的auto

解决方法是将父元素设置为text-align: center; 在元素中使用text-align: left;

6. 楼梯式效果

如以下代码： HTML:

1 <ul>
2     <li><a href="#"></a></li>
3     <li><a href="#"></a></li>
4     <li><a href="#"></a></li>
5 </ul>

CSS:

 1 ul {
 2     list-style: none;
 3 }
 4 
 5 ul li a {
 6        display: block;
 7        width: 130px;
 8     height: 30px;
 9        text-align: center;
10        color: #fff;
11        float: left;
12     background: #95CFEF;
13     border: solid 1px #36F;
14     margin: 30px 5px;
15 }

这是一个常见的横向列表，在IE中会呈现楼梯式效果，解决方法：

1 ul li {
2     float: left;
3 }

或者:

1 ul li {
2     display: inline
3 }

7. 经典的两倍间距

解决方法：设置display为inline。

8. 不支持微型高度

解决方法为设置font-size: 0; 或者overflow: hidden;

9. IE6计算100％时会把padding减去

Fixclear

 1 .clearfix:after {
 2      visibility: hidden;
 3      display: block;
 4      font-size: 0;
 5      content: " ";
 6      clear: both;
 7      height: 0;
 8 }
 9 .clearfix { display: inline-block; }
10 /* start commented backslash hack \*/
11 * html .clearfix { height: 1%; }
12 .clearfix { display: block; }
13 /* close commented backslash hack */

CSS选择器

http://www.ruanyifeng.com/blog/2009/03/css_selectors.html

关于display: inline

  1. 和其他元素都在一行上
  2. margin 左右可控制
  3. padding 左右可控制
  4. 宽度和高度 不可控制
  5. 行高 不可控制，在border为1的时候效果很怪

圆角解决方案

http://zmingcx.com/rounded-box-solution-for-website-design.html

display: inline-block遇上text-indent时ie67下会悲剧"

负值之美

http://www.topcss.org/?p=94

IE6 li 3px bug

ie6 最好给宽度和高度

css font 写法

字体的属性如下： font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 1em; line-height: 140%; font-family: "Lucida Grande",sans-serif; 可以缩写为一句：font: italic small-caps bold 1em/140% "Lucida Grande",sans-serif;








posted @ 2012-02-10 17:15  妙計出自山人  阅读(223)  评论(0)  编辑  收藏  举报