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);
}
8, z-index 有时失效: http://www.cnblogs.com/rubylouvre/archive/2009/07/29/1534076.html
这里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)
注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 {
float: right;
margin: 12px 20px 0 0;
width: auto;
}
.busi_new_content_tip_close_span a {
background: url("../images/business_new.png") repeat scroll 0 -20px transparent;
display: block;
font-size: 0;
height: 12px;
line-height: 0;
overflow: hidden;
text-indent: -99999px;
width: 11px;
}
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
<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;
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{
}
在「高级」浏览器中使用 :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选择器优先级:
.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图片不显示
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图片不显示
http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm
15,透明边框
border:1px solid transparent;
15,透明边框
border:1px solid transparent;