让你网页同时兼容FireFox和IE

原创 2008年09月29日 19:06:00
 CSS 兼容要点:DOCTYPE 影响 CSS 处理

    FireFox: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行。

    FireFox: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中。

    FireFox: 设置 padding 后, div 会增加 height 和 width, 但IE不会, 故需要用 !important 多设一个 height 和 width。

    FireFox: 支持 !important, IE 则忽略, 可用 !important 为 FireFoxFF 特别设置样式。

    div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行。

    cursor: pointer 可以同时在 IE FF 中显示游标手指状,hand 仅 IE 可以。

    FireFox: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。

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

    1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:

    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}

    关于这个/**/是什么www.qpsh.com也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:)

    3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义:

    ul{margin:0;padding:0;}

    就能解决大部分问题。

    4.关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为:

    <script  type="text/javascript">

    就可以了。

    5.如果你在BOX容器里使float和text-align的方向设为一致:

    {float:left;text-align:left;margin:0 0 0 200px;}

    我们可做如下修改:

    {float:left;text-align:left;margin:0 0 0 200px;display:inline;}

ie和火狐兼容问题

1. document.form.item 问题 (1)现有问题: 现有代码中存在许多 document.formName.item("itemName") 这样的语句,不能在Firefox(...
  • sinolzeng
  • sinolzeng
  • 2015年02月25日 09:01
  • 1126

让IE和Firefox都兼容的插入Flash元素代码

原文地址:让IE和Firefox都兼容的插入Flash元素代码作者:三叶虫 让IE和Firefox都兼容的插入Flash元素代码   火狐对一些代码的支持程度让开发者有时候很是头疼,最近我就...
  • wym3587
  • wym3587
  • 2012年02月16日 13:27
  • 3173

设置网站兼容IE浏览器

IE 兼容模式 IE 支持通过特定的 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。需要注意...
  • broccoli2
  • broccoli2
  • 2018年01月23日 14:30
  • 18

PC端各浏览器布局兼容问题【Chrome、Firefox、IE】——长期更新

1、Firefox、IE8下属性为“readonly”的表单元素获得焦点会有光标‘I’进去。解决办法:/(ㄒoㄒ)/~~2、IE不支持HTML5标签解决办法:CSS中添加如下代码main, nav, ...
  • Vivian_jay
  • Vivian_jay
  • 2017年03月11日 15:38
  • 1427

兼容IE8,9,10,11,火狐,谷歌上传前预览,服务器兼容问题以解决

Firefox3,IE6,IE7,IE8上传图片预览 #preview_wrapper{  display:inline-block;  width:300px;  height:300px;  b...
  • u013308135
  • u013308135
  • 2015年12月22日 00:50
  • 736

textarea在IE、Firefox下统一效果的解决方案

如果用textarea的属性字数宽度(cols)和行数(rows)来控制textarea的大小你会发现在,在IE和FF下的每行字数和文字的行数都不相同,而且在字数不足滚动的情况下,IE是默认有滚动条的...
  • sd2131512
  • sd2131512
  • 2009年10月26日 22:03
  • 7009

半透明的圆角矩形实现IE浏览器兼容

半透明的圆角矩形实现IE浏览器兼容
  • westernRanger
  • westernRanger
  • 2014年12月20日 22:53
  • 1502

IE\firfox\chrome的差异和兼容问题

一、 IE\firfox\chrome的差异 以及在html\css\js上的兼容问题(上)
  • songlf521
  • songlf521
  • 2017年02月26日 23:08
  • 349

回到顶部代码,兼容IE CHROME FIREFOX

// JavaScript Document function goTopEx(){ var obj=document.getElementById("goTopBtn"); obj....
  • lumengabc
  • lumengabc
  • 2014年03月14日 14:52
  • 1037

两个可用于浏览器兼容性测试的Firefox插件

IEView是Mozilla Firefox浏览器的一个简单的插件。它允许在Firefox浏览器的当前页面中打开IE浏览器进行当前页面的浏览,或者把当前页面的链接在IE浏览器中打开。可到http://...
  • Testing_is_believing
  • Testing_is_believing
  • 2008年02月23日 17:45
  • 7363
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:让你网页同时兼容FireFox和IE
举报原因:
原因补充:

(最多只允许输入30个字)