`
DBear
  • 浏览: 231236 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类

IE FireFox 兼容之宽度相关

阅读更多

CSS 兼容要点:

  1. DOCTYPE 影响 CSS 处理
  2. FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
  3. FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
  4. FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
  5. FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
  6. div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行
  7. cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
  8. FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格
  9. IE 漂浮层双倍margin。
  10. IE7以及IE7以前浏览器版本 会为input元素增加1px的外边空白,导致包裹它的div莫名其妙的高度增加了2px。暂时的解决方法是:div增加:overflow:hidden; zoom:1;  input元素增加:float:left

XHTML+CSS兼容性解决方案小集
  使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面,省的大家四处找^^

  1. 在mozilla firefox和IE中的BOX模型解释不一致导致相差3px解决方法:
    div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:
    div{maring:30px;margin:28px}重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;
  2. IE5 和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则 是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改
    div{width:300px!important;width  /**/:340px;margin:0  10px  0  10px},关于这个/**/是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:)
  3. ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
    ul{margin:0;padding:0;}就能解决大部分问题
  4. 关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为
    <script  type="text/javascript">就可以了
  5. 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*/}
分享到:
评论

相关推荐

    让IE和火狐同时兼容

    特别是在早期的Web时代,Internet Explorer(简称IE)与Mozilla Firefox(简称火狐)这两款浏览器之间存在着显著的差异,这使得页面设计师不得不花费大量时间去解决它们之间的兼容性问题。本文将详细介绍如何使网站...

    IE FireFox 兼容问题

    ### IE FireFox 兼容问题 #### 背景与概述 在Web开发过程中,确保网页能在各种浏览器中正常显示是非常重要的。随着浏览器技术的发展,虽然现代浏览器在标准支持方面越来越一致,但在早期,不同浏览器对某些HTML、...

    ie与firefox兼容文档

    3. **盒模型差异**:IE使用“怪异盒模型”,其中边框和内填充包含在元素宽度内,而Firefox和其他现代浏览器遵循“标准盒模型”,边框和内填充不计入宽度。这会导致元素大小计算的差异。 4. **DOCTYPE声明**:...

    IE与Firefox的CSS兼容大全

    在网页设计中,CSS(层叠样式表)的兼容性是一个关键问题,特别是对于历史悠久的Internet Explorer(IE)和相对现代的Firefox浏览器。由于这两者对CSS标准的解析方式不同,开发者经常面临兼容性挑战。以下是一些针对...

    Javascript的IE和Firefox(火狐)兼容性

    ### Javascript的IE与Firefox(火狐)兼容性解决方案 在Web开发过程中,浏览器兼容性问题一直是开发者们关注的重点之一。由于不同的浏览器对于Web标准的支持程度存在差异,这导致了同样的代码在不同浏览器中的表现...

    IE与Firefox的CSS兼容大全.rar

    "IE与Firefox的CSS兼容大全"是一个针对这两个浏览器之间CSS兼容性问题的资源集合,旨在帮助网页开发者解决在跨浏览器设计时遇到的难题。 首先,IE浏览器,尤其是早期版本,如6、7和8,对于CSS标准的支持并不完全。...

    IE6.0、IE7.0 与FireFox CSS兼容的解决方法

    在网页设计中,CSS(层叠样式表)的兼容性问题常常困扰着开发者,尤其是在处理IE6.0、IE7.0与Firefox等不同浏览器之间的差异。以下是一些解决这些浏览器间CSS兼容问题的方法: 1. **DOCTYPE声明**:DOCTYPE声明会...

    css解决IE6,IE7,firefox兼容性问题.

    ### CSS解决IE6、IE7及Firefox兼容性问题详解 #### 一、引言 随着互联网技术的发展,浏览器种类日益增多,其中Internet Explorer (IE) 和 Firefox 是早期非常流行的两款浏览器。尤其在2000年代中期,IE6、IE7 和 ...

    DIV+CSS网页中IE和火狐兼容问题的整理

    然而,在实际应用中,由于不同浏览器的解析和渲染机制存在差异,尤其是在IE(Internet Explorer)和Firefox之间,这种差异可能导致兼容性问题。以下是对这些兼容性问题的详细梳理和解决策略。 1. **盒模型差异** -...

    Firefox IE兼容教程

    2. **盒模型差异**:IE使用的是"怪异盒模型",将边框和内填充包含在元素的总宽度和高度中,而Firefox和其他遵循W3C标准的浏览器使用"正常盒模型",边框和内填充是额外添加的。这会导致元素尺寸计算上的不一致,需要...

    让CSS兼容IE和Firefox的技巧集合

    标题中的“让CSS兼容IE和Firefox的技巧集合”是指在网页设计中,针对Internet Explorer(IE)和Firefox这两种浏览器之间CSS样式兼容性问题的解决策略。描述中的“嘿呌,IE不再是个bug”暗示了这些技巧能帮助开发者...

    CSS兼容IE6,,IE7,I8 FIREFOX

    ### CSS兼容IE6、IE7、IE8及Firefox解析与应用 #### 一、引言 随着Web技术的发展,浏览器的兼容性问题一直是前端开发者关注的重点。尤其在早期的Web开发过程中,Internet Explorer(IE)系列浏览器由于市场份额较大...

    css在firefox IE的兼容性(案例分析及解决方案)

    在网页开发过程中,CSS(层叠样式表)的兼容性问题常常是开发者面临的挑战,特别是在处理Firefox和Internet Explorer(IE)这两个浏览器时。Firefox和IE对CSS的理解和执行方式存在差异,导致某些样式在其中一个...

    兼容IE与FireFox

    ### 兼容IE与Firefox:JS代码详解 在Web开发过程中,确保JavaScript代码能够在不同的浏览器上正常运行是一项挑战性任务。特别是在早期版本的Internet Explorer(IE)与Firefox之间实现兼容性,更是如此。本文将详细...

    Firefox, IE5, IE5.5, IE6, IE7, IE8多种浏览器兼容的问题

    ### Firefox, IE5, IE5.5, IE6, IE7, IE8 多种浏览器兼容的问题 在早期的Web开发阶段,不同的浏览器之间存在显著的技术差异,这导致了跨浏览器兼容性问题的出现。本篇文章将针对Firefox、IE5、IE5.5、IE6、IE7以及...

    多浏览器下IE6 IE7 firefox li 间距问题

    ### 解决多浏览器下IE6、IE7及Firefox中`&lt;li&gt;`元素间距兼容性问题 #### 背景介绍 在Web开发过程中,我们经常会遇到不同浏览器对CSS样式的解析差异导致页面显示效果不一致的情况。特别是对于早期版本的Internet ...

    浏览器兼容性问题收集(IE,Firefox,Chrome,Safri)

    浏览器兼容性问题收集(IE, Firefox, Chrome, Safari) 本文主要收集了浏览器兼容性问题,涵盖了 IE, Firefox, Chrome, Safari 等多种浏览器的兼容性问题。这些问题都是 WEB 开发者们经常遇到的问题,了解这些问题...

Global site tag (gtag.js) - Google Analytics