`
天空之城
  • 浏览: 404590 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

关于IE和火狐浏览器样式不兼容的一些总结

    博客分类:
  • Java
阅读更多

什么是浏览器兼容:当我们使用不同的浏览器(Firefox IE7 IE6)访问同一个网站,或者页面的时候,会出现一些不兼容的问题,有的显示出来正常,有的显示出来不正常,我们在编写CSS的时候会很恼火,刚修复了这 个浏览器的问题,结果另外一个浏览器却出了新问题。而兼容就是一种办法,能让你在一个CSS里面独立的写支持不同浏览器的样式。

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

2.       CSS+DIV的兼容性问题
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网可能出去不想出现的效果!
所有浏览器 通用 height: 100px;
IE6 专用 _height: 100px;
IE6 专用 *height: 100px;
IE7 专用 *+height: 100px;
IE7、FF 共用 height: 100px !important;

3.       FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)

margin加倍的问题。

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。

解决方案是在这个div里面加上display:inline;

例如:

<#divid=\”imfloat\”>

相应的css为

#IamFloat{

float:left;

margin:5px;/*IE下理解为10px*/

display:inline;/*IE下再理解为5px*/}

4、最狠的手段 -!important;
如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
值得注意的是,一定要将xxxx !important 这句放置在另一句之上

5、兼容代码:兼容最推荐的模式。
/* FF */
.submitbutton {
float:left;
width: 40px;
height: 57px;
margin-top: 24px;
margin-right: 12px;
}
/* IE6 */
*html .submitbutton {
margin-top: 21px;
}
/* IE7 */
*+html .submitbutton {
margin-top: 21px;
}

6.浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果Diplay:table;
7. IE6的双倍边距BUG

<style type="text/css">
  body{margin:0}
  div {float:left; margin-left:10px; width:200px; height:200px; border:1px solid red }
</style>

  浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline

8. firefox嵌套div标签的居中问题的解决方法

 假定有如下情况:

<divid="a">
  <divid="b"> </div>
</div>

如果要实现b在a中居中放置,一般只需用CSS设置a的text-align属性为center。这样的方法在IE里看起来一切 正常;但是在Firefox中b却会是居左的。

  解决办法就是设置b的横向margin为auto。例如设置b的CSS样式为:margin:0 auto;。

分享到:
评论

相关推荐

    ie和火狐浏览器兼容问题

    以下是一些针对CSS在IE和Firefox浏览器中的兼容性问题及其解决策略: 1. **DOCTYPE影响CSS处理**:不同的DOCTYPE声明会影响浏览器的渲染模式。在HTML文档中,使用标准DOCTYPE如`&lt;!DOCTYPE html&gt;`可以使浏览器开启...

    IE与火狐浏览器兼容方案

    本文将深入探讨如何解决IE(Internet Explorer)与火狐浏览器(Firefox)之间的兼容问题,以便用户在各种浏览器上都能获得一致的浏览体验。 首先,了解问题的根源至关重要。IE(尤其是早期版本)和火狐浏览器在执行...

    让IE和火狐同时兼容

    本文将详细介绍如何使网站能够同时在IE和火狐浏览器中正常显示,主要涉及CSS样式调整、布局技巧以及一些特定于浏览器的解决方案。 #### CSS DOCTYPE影响 在不同浏览器中,文档类型声明(DOCTYPE)对于CSS的渲染...

    CSS中火狐浏览器与IE浏览器的兼容

    ### CSS中火狐浏览器与IE浏览器的兼容 在前端开发领域,确保网页在不同浏览器间的兼容性至关重要。本文旨在提供一些实用的技巧和方法来帮助开发者解决CSS在Internet Explorer(IE)与Mozilla Firefox(火狐)这两款...

    CSS样式兼容IE6、IE7、IE8、FF火狐浏览器的方法

    在探讨CSS样式兼容IE6、IE7、IE8与火狐浏览器的方法时,我们需深入理解不同浏览器对CSS的支持差异,以及如何通过特定的技术手段确保网页在这些浏览器中的一致性和美观性。以下是对这一主题的详细解析: ### 1. 了解...

    IE浏览器和火狐浏览器兼容问题有部分js

    标题和描述均提到了“IE浏览器和火狐浏览器兼容问题有部分js”,这指向了在Web开发中一个常见的挑战——确保网页在不同浏览器上的表现一致。浏览器兼容性问题主要源于不同浏览器对Web标准(如HTML、CSS和JavaScript...

    myeclipse的IE和火狐浏览器插件

    "myeclipse的IE和火狐浏览器插件"允许开发者在MyEclipse内部直接通过Internet Explorer(IE)和Firefox浏览器打开并运行网页,极大地提高了开发效率。 **1. 插件安装与配置** 要使用这个功能,首先需要在MyEclipse...

    IE浏览器和火狐浏览器兼容问题.doc

    标题提及的“IE浏览器和火狐浏览器兼容问题”主要集中在CSS样式方面,因为CSS在不同浏览器之间的解析方式有所差异,导致在Internet Explorer(IE)和Firefox中显示效果可能不一致。以下是一些关键的兼容性问题及解决...

    ie和火狐的兼容问题总结

    ### IE和火狐的兼容问题总结 在前端开发过程中,我们经常会遇到不同浏览器之间的兼容性问题,特别是Internet Explorer(简称IE)与Firefox(火狐)之间的差异。由于这两种浏览器在处理CSS和JavaScript方面存在显著...

    FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条

    下面是关于FireFox火狐浏览器与IE浏览器兼容问题的总结: 一、cursor指针问题 在IE浏览器中,cursor:pointer可以实现手形指针的效果,但是在FireFox火狐浏览器中,cursor:hand是无效的,需要使用cursor:pointer来...

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

    - IE浏览器对CSS3新属性的支持较晚,如`transform`、`transition`、`border-radius`等。 - Firefox、Chrome等浏览器对CSS3有较好的支持。 解决方法:使用浏览器前缀 `-webkit-`, `-moz-`, `-ms-`, `-o-` 来分别...

    火狐与IE浏览器之间的一些差别收集.docx

    ### 火狐与IE浏览器之间的一些差别收集 #### 一、IE与Firefox的JavaScript和CSS差异 在Web开发过程中,不同的浏览器对于JavaScript和CSS的支持程度各不相同,这往往导致了网页在不同浏览器下的表现差异。以下是...

    javascript在firefox与ie下的兼容性总结

    除了以上列举的问题,还有一些其他需要注意的点,比如CSS样式在Firefox和IE中的表现可能不同,需要特别关注。在编写JavaScript代码时,为了确保跨浏览器兼容性,推荐使用DOM标准方法,避免依赖特定浏览器的行为。...

    css兼容性(IE 和 firefox)技巧大全.doc

    4. **宽度和高度的问题**:IE浏览器不支持`min-width`和`min-height`,但它将正常的`width`和`height`当作最小值。为了跨浏览器兼容,可以为非IE浏览器设置`min-width`和`min-height`,而对于IE,可以使用`...

    IE和火狐图片兼容

    此外,随着IE浏览器市场份额的逐渐减少,现在更多的是关注Chrome、Firefox、Safari和Edge等现代浏览器的兼容性问题。 综上所述,解决“IE和火狐图片兼容”问题需要深入理解不同浏览器对PNG格式的支持情况,并灵活...

    IE6、7、8,火狐等浏览器常见兼容性问题整理

    这些浏览器对于 CSS 规则的解析和执行存在差异,导致开发者需要采取一些特定的“hack”方法来确保样式在不同浏览器间的一致性。 1. **CSS Hack 方法** - `!important`:这个关键字在 IE7 以及更现代的浏览器中可以...

    firefox火狐浏览器与与ie兼容的2个问题总结

    本文主要关注的是Firefox火狐浏览器与Internet Explorer(IE)之间的两个关键兼容性问题:CSS规则的添加与删除,以及获取元素背景色的不同方法。 1. CSS规则的添加与删除:在Firefox和IE中,通过JavaScript操作CSS...

    支持IE与火狐的脚本特效,很多特效是不支持火狐浏览器的

    "很多特效是不支持火狐浏览器的",这可能是因为火狐遵循Web标准更严格,或者IE特有的API和非标准语法导致的。 图片浏览是网页特效中常见的一种,JavaScript可以用来创建动态的图片展示,如轮播图、缩放、平移等。在...

Global site tag (gtag.js) - Google Analytics