1.不同浏览器的标签默认的外补丁和内补丁不同
问题描述:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
解决方案:在CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
2.标签最低高度设置min-height不兼容
问题描述:ie6出现层下掉现象。
解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !ImportAnt; height:200px; overflow:visible;}
3.块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大
问题描述:IE6中后面的一块被顶到下一行
解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性
4.<li>…</li>内容右浮动——常见于新闻列表添加时间
问题描述:在新闻列表中添加时间,时间下掉。
解决方案:利用<span style="float:right;">2010-9-21</span>放置在新闻文字前面。
5.ie6中出现文字重复现象
问题描述:文字重复出现。
解决方案:一、去掉层中多余的浮动语句(与区块的浮动有关)。
二、改变宽度大小(与文字区块的固定宽度有关)。
三、改变注释格式(将 <!-- 这里是注释内容 -->写成<!--[if !IE]>这里是注释内容<![endif]-->)。
四、添加空层(在标签后面加一个<div style="clear:both;height:0;"></div>来解决。)。
6.ie6中内容显示不完整
问题描述:内容无法完整显示
解决方案:增大长、宽的大小设置。
7.层下掉
问题描述:ie6出现层下掉现象。
解决方案:从外层到内层,一一检验,可以通过背景或者边框设置来快速定位问题所在。一般有可能是内外长宽冲突。
8.注释问题
问题描述:层布局混乱,多次调节各个属性,没有变化。
解决方案:删掉中文注释。
备注:没有注释的程序不方便之后维护修改,所以注释尽量采用英文注释。
9.省略现象
问题描述:文本内容过多时,不需要全部显示,多出现在文章列表或者文章主题链接等处。
解决方案:添加属性(text-overflow : clip | ellipsis ;)。[ text-overflow:ellipsis; white-space:nowrap; overflow:hidden;]
备注:clip : 不显示省略标记(...),而是简单的裁切;ellipsis : 当对象内文本溢出时显示省略标记(...)。text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效果。
-o-text-overflow: ellipsis; /* 支持 Opera */
div:after{content:"...";}/* 支持 Firefox */
10.文本换行
问题描述:<li></li>标签中文本内容出现转行现象。
解决方案:添加不换行属性(white-space: nowrap;)。
11.ie6中图片有空隙,无法显示
问题描述:<img>标签中设置图片相等的宽高时,ie6中图片无法显示。
解决方案:设置img 为display:block; 或者设置vertical-align 属性为vertical-align:top bottom middle text-bottom 都可以解决.。
问题描述:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。
解决方案:在CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
2.标签最低高度设置min-height不兼容
问题描述:ie6出现层下掉现象。
解决方案:如果我们要设置一个标签的最小高度200px,需要进行的设置为:{min-height:200px; height:auto !ImportAnt; height:200px; overflow:visible;}
3.块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大
问题描述:IE6中后面的一块被顶到下一行
解决方案:在float的标签样式控制中加入 display:inline;将其转化为行内属性
4.<li>…</li>内容右浮动——常见于新闻列表添加时间
问题描述:在新闻列表中添加时间,时间下掉。
解决方案:利用<span style="float:right;">2010-9-21</span>放置在新闻文字前面。
5.ie6中出现文字重复现象
问题描述:文字重复出现。
解决方案:一、去掉层中多余的浮动语句(与区块的浮动有关)。
二、改变宽度大小(与文字区块的固定宽度有关)。
三、改变注释格式(将 <!-- 这里是注释内容 -->写成<!--[if !IE]>这里是注释内容<![endif]-->)。
四、添加空层(在标签后面加一个<div style="clear:both;height:0;"></div>来解决。)。
6.ie6中内容显示不完整
问题描述:内容无法完整显示
解决方案:增大长、宽的大小设置。
7.层下掉
问题描述:ie6出现层下掉现象。
解决方案:从外层到内层,一一检验,可以通过背景或者边框设置来快速定位问题所在。一般有可能是内外长宽冲突。
8.注释问题
问题描述:层布局混乱,多次调节各个属性,没有变化。
解决方案:删掉中文注释。
备注:没有注释的程序不方便之后维护修改,所以注释尽量采用英文注释。
9.省略现象
问题描述:文本内容过多时,不需要全部显示,多出现在文章列表或者文章主题链接等处。
解决方案:添加属性(text-overflow : clip | ellipsis ;)。[ text-overflow:ellipsis; white-space:nowrap; overflow:hidden;]
备注:clip : 不显示省略标记(...),而是简单的裁切;ellipsis : 当对象内文本溢出时显示省略标记(...)。text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效果。
-o-text-overflow: ellipsis; /* 支持 Opera */
div:after{content:"...";}/* 支持 Firefox */
10.文本换行
问题描述:<li></li>标签中文本内容出现转行现象。
解决方案:添加不换行属性(white-space: nowrap;)。
11.ie6中图片有空隙,无法显示
问题描述:<img>标签中设置图片相等的宽高时,ie6中图片无法显示。
解决方案:设置img 为display:block; 或者设置vertical-align 属性为vertical-align:top bottom middle text-bottom 都可以解决.。