css心得
- 格式:doc
- 大小:31.00 KB
- 文档页数:3
CSS经验分享
就工作以来所遇到的问题做个总结:
这里先讲一下五大主流浏览器吧,即:IE、Firefox、Google、 Safari、Opera,占据市场份额的90%左右。
IE(6/7/8)——微软公司推出,市场占有高达58%左右;(使用IE 内核的览器:傲游、搜狐、世界之窗、360等)
Firefox——火狐,由Mozilla基金会与开源团体共同开发,占市场 份额20%左右;
Google——谷歌,由谷歌公司开发的开放原始码网页浏览 器。市场占有率7%左右;
Safari——苹果,使用KDE的KHTML作为浏览器的 运算核心,市场使用率5%左右;
Opera——欧普拉,由挪威欧普拉软件公司制造、占有率2%左右;
说明一下:Windows XP经典系统自带浏览器IE6,最为稀烂,网页布局架构兼容性问题最多,同胞们可以达成共识哦……
现在我们来看看IE6下的网页布局有多尴尬!这该死的Bug,怎么办???
1、 浮动的DIV与非浮动的DIV相邻(包括横向与纵向),中间有3像素间距。如下图:
解决方法:1、给左边盒子设置负3像素右边距或者给右边盒子设置负3像素左边距。
2、给非浮动元素也设置浮动;
2、 设置浮动的DIV,margin值加倍。如下图:
解决方法:给这个DIV设置属性:display:inline。
3、 设置浮动的元素或者运用注释的元素,会出现字符重复的现象。
解决方法:大盒子结束后连清除浮动三次。
4、 当空标签高度设置在19像素以下时,其高度仍然19像素。
解决方法:设置溢出隐藏属性overflow:hidden;
5、 图片正文空隙
解决方法:1、img { display:block; } 转化为块元素;
2、img { float:left; } 设置浮动属性;
3、img {vertical-align:top; } top/text-top/bottom/text-bottom;
4、#box { font-size:0px; } 针对父级元素设置;
5、中间无空间或者回车;
6、 子元素设置左右边距失效
解决方法:添加zoom:1; 激发父元素的layout;
7、 父元素设置overflow:hidden; 子元素:position:relative; 子元素溢出
解决方法:1、将文字区块包含在新盒子中
2、去除文字区块的固定宽度
3、在后面加一个
或者空格
4、给父元素添加:position:relative;
8、 IE6及其以下的版本,select会覆盖div中的内容; 解决方法:在div中加入不显示的iframe框架
9、 中文注释后样式失效(CSS中有注释,ANSI编码,HTML为UIF-8编码,注释下面样式不起作用)
解决方法:统一css和html的编码;