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的编码;