结论:大家在可以确定内容高度的情况下最好定义高度,如果真的没有办法定义高度,最好不用使用边框样式,否则样式肯定会出现混乱!
结论:大家在定义img对象时,最后将alt和title对象都写全,保证在各种浏览器中都能正常使用
【注意】:
IE对于空格的处理,firefox是忽略的而IE对于块与块之间的空格是处理的。也就是说一个div结束后要紧接着一个div写,中间不要有回车或者空格。不然也许会有问题,比如3px的偏差,而且这个原因很难发现。
【问题】
多个img标签连着,然后定义的float: left,希望这些图片可以连起来。但是结果在firefox里面正常而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。
【解决方案】
后来的解决方法是在img外面套li,并且对li定义margin: 0,这样就解决了IE和firefox的显示偏差
=======================================
2、嵌套DIV:父DIV的高度不能根据子DIV自动变化的解决方案
<div id="parent">
<div id="content"> </div>
</div>
当Content内容多时,即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。 解决方案:
<div id="parent">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>
在层的最下方产生一个高度为1的空格,可解除这个问题
============================
3、CSS DIV
一、基本上每个区块的div 都要有自己的id,杜绝不同功能的区块用同一个id/class
二、每个稍大的区块div 后面都跟一个<!-- /id -->标记开始、结束
三、隐藏文字的又一种方法 TEXT-INDENT: -9999px; LINE-HEIGHT: 0
================================================
1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:
div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:
div{maring:30px;margin:28px}重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;
============================
3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
ul{margin:0;padding:0;}就能解决大部分问题
===========================================
1、float的div一定要闭合。
例如:(其中floatA、floatB的属性已经设置为float:left;)
<#div id="floatA" ></#div>
<#div id="floatB" ></#div>
<#div id="NOTfloatC" ></#div>
这里的NOTfloatC并不希望继续平移,而是希望往下排。
这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。
在
<#div class="floatB"></#div>
<#div class="NOTfloatC"></#div>
之间加上
<#div class="clear"></#div>
这个div一定要注意声明位置,一定要放在最恰当的地方,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。
并且将clear这种样式定义为为如下即可:
.clear{
clear:both;}
此外,为了让高度能自动适应,要在wrapper里面加上overflow:hidden;
当包含float的box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。
例如某一个wrapper如下定义:
.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
==============================================
2、margin加倍的问题。
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如:
<#div id="imfloat"></#div>
相应的css为
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/}
====================================
分享到:
相关推荐
搜集整理的CSS HACK,也即是在多种浏览器(主要是ie6 ie7 ie8 ff)下样式统一的解决办法。 内容还是较全的,前台开发中常见的兼容性问题都可以找到解决方法,值得研究。 包括各浏览器CSS hack,技巧。有实例。
以下是关于IE和FF部分区别的详细分析: 1. **边界问题**: - 在CSS中,IE将边框宽度计算在元素的总宽度和高度之内,而Firefox则将边框外加到元素尺寸上。例如,一个设置为`width:100px;height:100px;border:1px ...
本文将详细介绍Internet Explorer(IE)和Firefox(FF)两种浏览器之间常见的CSS兼容性问题及其解决方案。 #### 1. DOCTYPE对CSS的影响 **问题描述**:在不同DOCTYPE声明下,某些CSS属性的表现可能有差异。例如,...
在开发Web应用时,浏览器...在编写JavaScript和CSS代码时,应该考虑这些兼容性问题,以便确保在FF和IE等不同浏览器上的正确运行。通过使用条件语句或封装函数,可以有效地处理这些差异,提高代码的可维护性和兼容性。
在CSS样式表的应用中,Firefox(火狐浏览器)和Internet Explorer(IE浏览器)之间存在一些显著的差异。这些差异主要集中在盒模型、居中对齐、边框与背景、鼠标指针样式、以及脚本处理等方面。理解这些差异对于创建...
在探讨CSS样式兼容IE6、IE7、IE8与火狐浏览器的方法时,我们需深入理解不同浏览器对CSS的支持差异,以及如何通过特定的技术手段确保网页在这些浏览器中的一致性和美观性。以下是对这一主题的详细解析: ### 1. 了解...
### CSS在IE6/IE7与Firefox下的兼容性解决方案 #### 概述 在Web开发领域,确保网页在不同浏览器间的一致性显示是至关重要的。由于历史原因,Internet Explorer(尤其是IE6和IE7)与现代浏览器如Firefox在解析CSS时...
本文主要针对IE6、IE7和Firefox(FF)这三种浏览器的CSS兼容性进行详解。 首先,我们来看一下如何处理CSS兼容性问题。一种常用的方法是利用CSS Hack,即针对特定浏览器添加特定的样式规则。例如,对于`height`属性...
"区分ie6 7 8 FF 的css hack 日常总结"这个主题集中讨论了如何针对IE6、IE7、IE8以及Firefox等浏览器编写特定的CSS代码来实现跨浏览器的兼容性。 首先,让我们了解CSS Hack的基本概念。CSS Hack是指由于不同浏览器...
本文将深入探讨如何通过CSS Hack技巧和其他优化策略,确保网页在不同浏览器下的一致性和美观度。 #### CSS Hack:解决浏览器间的差异 CSS Hack是一种技术,用于向特定版本的浏览器提供不同的样式规则。以下是一些...
以上 CSS 规则确保了容器 `#wrap` 在 Firefox 和 IE7 下具有自动高度,而在 IE6 下具有最小高度设置。此外,左右两个浮动区域也被正确地放置。 #### 结论 尽管现代浏览器已经非常接近于遵循相同的 CSS 标准,但在...
本文将深入探讨Firefox与IE在CSS解析上的主要区别,以及如何利用这些差异进行CSS hack,确保网页在各种浏览器中的一致性。 ### CSS样式认定的差异 #### 1. **列表元素的内边距(Padding)处理** - Firefox与IE...
【速查手册】IE与FF下JS的区别 JavaScript是一种广泛应用于网页和网络应用的脚本语言,它在不同浏览器中的实现可能存在差异。IE(Internet Explorer)和FF(Firefox)是两个历史上非常重要的浏览器,它们对...
本文将深入探讨FF与IE之间在JS和CSS方面的关键区别。 ### JavaScript的区别 1. **对象和属性支持**: - **Array对象**:在IE8及更早版本中,`Array.prototype.forEach`、`map`等方法未被支持,而FF已经支持。...
- **区别FF、IE7、IE6:** ```css background:orange; *background:green !important; *background:blue; ``` 解释:Firefox 忽略星号,只识别 `!important`;IE7 识别两者;IE6 仅识别星号。 2. **下划线 ...
### 针对IE6/7与Firefox的兼容性CSS编码详解 在Web开发的早期阶段,浏览器的兼容性问题是一大挑战,尤其是在处理Internet Explorer(IE)6和7以及Firefox浏览器之间的差异时。本文将深入探讨如何通过特定的CSS编码...