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 都可以解决.。
分享到:
相关推荐
解决CSS兼容性问题的两种常见方法是: 1. 使用`!important`标记:在CSS中,`!important`可以强制应用某个样式,但这可能导致优先级混乱。例如: ```css #wrapper { width: 100px !important; /* IE7+FF */ ...
在WEB开发过程中,CSS(层叠样式表)是构建页面布局和样式的基石,但不同浏览器对CSS的支持程度和解析方式可能存在差异,这就引出了我们常说的“CSS兼容性问题”。作为一名刚毕业就投身此领域的开发者,过去一年的...
然而,由于不同的浏览器对CSS规范的实现存在差异,开发者经常面临CSS兼容性问题。本文将深入探讨这些兼容性问题及其解决策略。 首先,我们需要了解CSS兼容性问题的来源。主要有以下几点: 1. **浏览器版本差异**:...
### CSS兼容性技巧整理 #### 一、概述 在网页设计和前端开发中,不同浏览器对CSS的支持程度存在差异,特别是在早期版本的Internet Explorer(如IE6和IE7)与现代浏览器(如Firefox)之间。这些差异可能导致布局...
本文主要针对这些差异提供了一些实用的技巧,帮助开发者解决常见的CSS兼容性问题。 1. **垂直居中问题**:在CSS中,实现div的垂直居中可以通过设置`vertical-align:middle`和`line-height`属性。例如,将`line-...
【CSS兼容性问题详解】 CSS(层叠样式表)在构建网页布局时起着至关重要的作用,但不同浏览器之间的兼容性问题常常困扰着开发者。尤其是IE6,由于其对CSS支持的不足,使得开发过程中需要额外处理许多兼容性问题。...
这篇博文“JavaScript 和 CSS 兼容性小结”可能探讨了如何在不同的浏览器环境下确保代码的兼容性和一致性,这对于 web 开发者来说至关重要。 JavaScript,作为一种广泛使用的客户端脚本语言,它的兼容性问题主要...
下面我们将详细探讨这些版本的CSS兼容性问题。 首先,让我们从IE5开始。这个版本发布于1999年,当时CSS1规范已经发布,但IE5对CSS的支持并不完善。它支持基本的选择器如ID、类和元素选择器,以及一些简单的属性,如...
以下是一些关于CSS兼容性的关键知识点,主要聚焦于IE6、IE7和Firefox等浏览器。 1. **垂直居中问题**: 在CSS中实现元素的垂直居中可以使用`vertical-align: middle;`配合`line-height`。但这种方法要求内容在同一...
【CSS入门教程:IE和Firefox浏览器CSS兼容性技巧】 在网页设计中,CSS(层叠样式表)扮演着至关重要的角色,它使得我们能够控制页面的布局和样式。然而,不同浏览器之间对于CSS的支持程度和解析方式存在差异,尤其...
### div+css兼容性问题解决方案 #### CSS浏览器兼容性概述 在进行Web开发时,不同浏览器对CSS的支持程度不一,这可能导致页面显示效果存在差异。为了确保网站能在各种浏览器中正常显示,开发者需要掌握一些关于CSS...
css兼容性测试事例 包含IE6,7,8,9 Firefox Safri 360 Opera 等多款浏览器下显示效果
以下是一些关键的CSS兼容性问题及其解决方案: 1. **列表元素的默认样式**:Firefox和IE对`ul`和`ol`的`padding-left`处理不同。Firefox默认值约为40px,而IE默认为0。通常,通过设置`ul{margin:0;padding:0;}`可以...
十大web编程技巧 css兼容性总结,史上最牛总结
CSS 兼容性问题解决方案 本文档旨在解决 CSS 中的兼容性问题,涵盖了多个方面的解决方案,包括 DOCTYPE 的影响、盒模型的解释不一致、ul 和 ol 列表缩进问题、CSS 透明问题、CSS 圆角问题、cursor 问题、字体大小...