1,自动换行,连续英文.

div{

white-space:pre-wrap;

width:200px;

word-wrap:break-word;

}

div

{

width:450px;

word-wrap:break-word;

word-break:break-all;

}

2,absolute布局/css hack/css文字省略号

http://www.o2sky.cn/blog/?p=49

3,登陆框+背景/网易:http://www.o2sky.cn/blog/?p=34

html,body{width:100%;height:100%;overflow:auto;}

#div{width:100%;height:100%;overflow-y:scroll;overflow-x:auto;}

使用div模仿html滚动条

4,清楚inner-block间隙:letter-spacing:-.25em 

.yui3-g {
    letter-spacing: -0.31em; /* webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    word-spacing: -0.43em; /* IE < 8 && gecko: collapse white-space between units */
}

.yui3-u-23-24 {

    display: inline-block;
    zoom: 1; *display: inline; /* IE < 8: fake inline-block */
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
}
 
5,IE中div绝对定位时,不设背景颜色时,div上不触发鼠标事件。
background:url(0);解决此bug,并且,若盖div在flash上时也可档在flash上触发事件。
flash显示到层下面,flash加 wmode="transparent"
6,input内的光标,FF与IE以font-size为基准,chrome则为line-height
7, IE6  png 透明 解决办法
background-image: url('../images/logo.png')!important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.njytsj.com/shell/default/images/logo.png);
 
#pageTitle a {
float:left;
text-indent:-9000px;
outline:none;
width:287px;
height:102px;
background-image: url('../images/logo.png')!important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.njytsj.com/shell/default/images/logo.png);
}
这里IE有个bug——定位元素会产生一个新的stacking context注3,而不管你有没有显式地定义其z-index,并且从z-index的值为0开始。因此网上许多教程都以讹传讹,把z-index设为-1是行不通。
 注3根据W3C标准,每一个定位元素都归属于一个stacking context(与IE的MSHTMNL相仿)。根元素形成root stacking context,而其他的stacking context则由定位元素产生(此定位元素的z-index被定义一个非auto的z-index值),我们称之为local stacking context。定位子元素会以这个local stacking context为参考,用相同的规则设置此元素里面的子孙元素的stacking context。当stacking context一样的时候,就用z-index的值来决定怎样显示,如果z-index也相同(即stack level相同),则按照档中后来者居上的原则(back-to-front )的顺序来层叠。当任何一个元素层叠另一个包含在不同stacking context元素时,则会以stacking context的层叠级别(stack level)来决定显示的先后情况。也就是说,在相同的stacking context下才会用z-index来决定先后,不同时则由stacking context的z-index来决定。IE浏览器似乎给body元素默认了一个相对定位属性(position: relative)
9, 透明属性
IE: filter:alpha(opacity=70);//  filter:mask();让透明为0
FF等:opacity:0.7;
10,定位图片等‘块级元素’在 div 中位置:居中等,一般使用float,margin来定位
.busi_new_content_tip_close_span {
    floatright;
    margin12px 20px 0 0;
    widthauto;
}
.busi_new_content_tip_close_span a {
    backgroundurl("../images/business_new.png") repeat scroll 0 -20px transparent;
    displayblock;
    font-size0;
    height12px;
    line-height0;
    overflowhidden;
    text-indent-99999px;
    width11px;
}
11,IE中元素z-index与position:relative有关(见上),一般一个额外的div1定义在另外一个div2中2个元素的z-index之间无效,需要把元素移到该div2中;在相对定位元素中使用2个绝对定位元素,IE6不会出现挤压外面元素.
<div1>
<li relative >
<a >absolute <a>
<div2>absolute</div2>
</li>
</div1>
12, 常见清理浮动方式:http://sofish.de/1791
.clearfix:after{
  visibility:hidden;
  display:block;
  font-size:0;
  content:" ";
  clear:both;
  height:0;
}
.clearfix{
  zoom:1; /*ie6、7*/
}
在「高级」浏览器中使用 :after 伪类在浮动块后面加上一个非 display:none 的不可见块状内容来,并给它设置 clear:both 来清理浮动。在 ie6 和 7 中给浮动块添加 haslayout 来让浮动块撑高并正常影响文档流。
 new:
  .cf:before,.cf:after{
    content:"";
    display:table;
  }
  .cf:after{
    clear:both;
  } 
  .cf{zoom:1;} 
13, CSS选择器优先级:
a,行内样式(1000);
b,ID选择器(100);
c,属性选择器(10):包括className,伪类,等属性选择器;
d,元素选择器(1):包括元素,伪元素等元素选择器;
权重由高到低,低级叠加不会超过高一级的选择器权重。
http://www.cnblogs.com/rubylouvre/archive/2010/03/17/1687786.html
http://www.cnblogs.com/rubylouvre/archive/2009/10/27/1590102.html
14,ie6图片不显示
  
 
posted on 2011-03-07 10:43  LcKey  阅读(585)  评论(0编辑  收藏  举报