浅谈IE与Firefox对CSS的不同解析
其实,以前从来没有接触过CSS相关的内容,都是在做业务的编程,从来没想过前台页面的设计也能如此复杂。这次项目的开过过程中,作为CSS菜鸟的我也
接触到CSS的相关设计。所出现的低级问题和浪费很多时间的状况也层出不穷,所以通过各方搜索和自己的实际学习中总结出几点IE和Firefox对CSS
的区别,给大家借鉴。
首先,大家都知道,IE和Firefox针对于核模型的解析就不一样,自然会产生很多让人挠头的问题,以下就是我的经验总结:
1.高度的区别
IE:在没有定义高度时候,将根据内容高度的变化,包括未定义高度的图片内容;
在定义了高度时候,当内容超过高度时,将使用实际内容的高度。
FF:在没有定义高度时,如果内容中包括了图片内容,MF的高度解析是根据印刷标准,这样就会造成和实际内容高度不符合的情况;
在当定义了高度,但是内容超过高度时,内容会超出定义的高度,但是区域使用的样式不会变化,造成样式错位。
建议:在可以确定内容高度的情况下最好定义高度,如果真的没有办法定义高度,尽量不用使用边框样式。
2.宽度的区别
IE:内容宽度=您定义的容器宽度(Internet Explorer ’width’)-padding宽度-border宽度。
IE中定义 width:100px;padding:5px 的话,所显示的宽度就是100px。
FF:容器占的宽度=内容宽度+padding宽度+border宽度。
Firefox中定义 width:100px;padding:5px 的话,所显示的宽度就是105px。
建议:使用 !important;但是,!important一定要在前面。
如:width:95px !important;width:100px;padding:5px;。
注:高度亦是如此!
3.浮动(float)的区别
(1)空格处理
IE:对于DIV并排时候使用float关键字时候,IE对块与块之间的空格是处理的。
FF:对于DIV并排时候使用float关键字时候,Firefox对块与块之间的空格是不处理的。
建议:经常发现使用float关键字时候在Firefox显示正常,但是在IE中会出现空格,就是这个原因;
避免在div连div时候添加空格或者回车,也即是一个div紧接这一个div写;
或者,将div放入li中进行处理,这样就不会有空格的问题。
(2)Margin加倍
IE:在使用float的情况下,IE的margin加倍。
FF:正常显示。
建议:针对IE,添加display:inline;
<div id=”float”></div>相应的css为
#float{
float:lef
相关文档:
div css网站布局的八个小技巧
1.若有疑问立即检测
在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS 都有检测工具可用,请
见 http://validator.w3.org 。请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误;我们建议先修正一些最明显的 ......
css圆角box(百度知道挖出) 1.css .zhidao_box {
position: relative;
width: 100%;
}
.zhidao_box .rg_1, .zhidao_box .rg_2, .zhidao_box .rg_3 {
height: 1px;
font-size: 0px;
ov ......
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> &nb ......
20 个经典的 Ajax + CSS 表格
并不是所有的Web 开发者都会对美化表格数据感兴趣,今天我们收集了20 个功能强大,外观漂亮的基于Ajax + CSS 的表格效果,你可以从这些示例中学习怎么使用这些表格提供的排序和过滤的功能来组织表格中的数据。
现在让我们来看看这些表格:(点击每个样式前面的链接即可进入下载)
#1. ......
js要求:为使系统能在IE和FF下正常运行,不要使用原生态的javascript,建议使用js的库(如:jquery)
并且要求用jquery中,获取对象的属性使用$obj.attr("attrName"),不要使用obj.attrName,防止自定义的属性在FF中不能正常运行
1、问题:<span></span>在FF下运 ......