`
黄继华
  • 浏览: 45034 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

FireFox和IE浏览器对于DIV+CSS设计的区别及对策

 
阅读更多

FireFox和IE浏览器对于DIV+CSS设计的区别及对策

1、实际像素
IE/Opera:对象的实际宽度 = (margin-left) + width + (margin-right)
Firefox/Mozilla:对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)
所以排列好及列的表格时ie和ff显示宽度稍有区别

2、水平居中
问题:div里的内容,ie默认为center,而ff默认left
解决:mairgin:0px auto;

3、高度问题
问题:如果设置了一个DIV的高度,当DIV里实际内容大于所设高度,ie会自动拉伸以适应DIV容器大小,ff会固定DIV的告诉,超过部分超出DIV底线以外,出现和下面的内容重叠的现象
解决:控制恰当的高度,或者不写,让浏览器自动调节高度,或者设置overflow:hidden;

4、clear:both;
问题:如果上面用float控制了n列DIV,下面ie会自动检测自动排列,ff则可能很不老实,到处乱动
解决:float结束后的下一个标签加clear:both;以结束float的控制

5、最大/小宽度问题
问题:min-width,max-width只是ff的命令,如何让ie实现同样的效果
解决:ie不认识min-和max-,实际ie认为min-width、max-width和width效果一样,可以用下面方法解决
#cctext{
min-width: 700px;
max-width: 1000px;
width:expression(document.body.clientWidth<700 ? "700px" : document.body.clientWidth>1000 ? "1000px" : "auto");
}

6、!important支持
问题:ff支持ie6.0不支持
解决:无。ie会忽略。

7、游标状态
问题:cursor:hand;仅ie支持,显示手指状态
解决:使用cursor:pointer;ie和ff都支持

8、单位问题
问题:任何距离的数值ie可以不加单位,ff必须要求写单位(0除外)
解决:写全单位如padding:0px;

分享到:
评论

相关推荐

    div+css静态文章模板(兼容火狐,IE6,IE7)

    1. IE6/IE7兼容性:这两个老版本的IE浏览器对CSS的支持有限,存在一些特有的渲染问题,如盒模型差异、浮动元素清除、透明度处理等。解决方法包括使用条件注释提供特定于IE的样式,使用IE专有的CSS hack,或者借助于...

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

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

    网页设计师DIV+CSS面试宝典

    本文总结了网页设计师DIV+CSS面试中常见的问题和解决方法,涵盖了超链接点击后 hover 样式的消失、IE6 的 margin 双倍边距 bug、火狐浏览器下文本无法撑开容器的高度、中火狐浏览器下文本无法撑开容器的高度、Web ...

    div+css 下拉列表

    这种技术的关键在于实现良好的浏览器兼容性,特别是针对老旧的IE6和现代的火狐浏览器。 一、`div+css`下拉列表的基本结构 下拉列表通常由两部分组成:一个主菜单项和与其关联的子菜单项。在HTML中,我们可以用`...

    css,div+css.docx

    在Div+CSS布局中,我们需要考虑不同浏览器的兼容性,例如使用IE Tester测试IE浏览器的表现,而Firefox的Firebug则是一款强大的调试页面布局工具。 【布局技巧】 有时我们会使用`div`和`span`来构建布局,`div`常...

    导航经典推荐的23种div+css代码

    7. **Web标准与浏览器兼容性**:这些示例应遵循W3C的Web标准,同时考虑各主流浏览器的兼容性问题,如IE、Firefox、Chrome、Safari和Edge等。 8. **学习路径**:通过分析和实践这23个不同的导航栏代码,开发者可以从...

    Div+CSS布局的十六条技巧及详细用法-DivCSS教程.pdf

    1. **理解IE的继承关系**:IE浏览器有时会混淆继承关系和父子关系,因此在编写CSS时,需要特别注意这一点,以确保样式正确应用。 2. **添加选择符注释**:在CSS中为选择符添加注释,有助于后期维护和理解代码,但也...

    DIV+CSS解决各浏览器兼容问题

    但在某些情况下,仅在IE浏览器中生效的解决方案可能是必要的。 #### 4. 高度属性的兼容性 在使用DIV+CSS布局时,高度属性的兼容性问题尤其棘手。`!important`仅对IE7有效,而`*`和`+`选择器分别用于FF和IE的特定...

    《网页设计与制作(HTML+CSS)(第2版)》全册教案教学设计.doc

    + 火狐浏览器 + 谷歌浏览器 + Edge 浏览器 + Safari 浏览器 + Opera 浏览器 教学评价: * 通过多种评价方式来评估学生的学习效果 * 评价的标准:学生是否能熟悉网页设计的基本概念、网页设计的技术和工具,...

    jQuery+div+css选项卡列表样式

    4. **兼容性**:由于旧版的IE浏览器(如IE6、7、8)对CSS和JavaScript的支持有限,因此在编写代码时需要特别注意这些浏览器的特性。可能需要使用特定的CSS hack或jQuery插件来实现跨浏览器的兼容性。 5. **选项卡...

    新手学习DIV+CSS难点之经验总结

    IE浏览器在处理宽度和高度时,可能会忽略`min-width`和`min-height`属性。 **解决方案:** - 明确指定宽度和高度。 - 使用`!important`确保样式优先级。 - 使用条件注释或特殊的CSS语法来区分不同版本的IE。 ...

    DIV+CSS制作切图原则性 图片素材如何切出思考.docx

    同时,完成设计后,应进行全方位的浏览器兼容性测试,确保在主流浏览器(如Chrome、Firefox、Safari、Edge等)以及不同版本的IE浏览器上都能正常显示。 4. **图片素材的处理**:在切图过程中,要考虑图片的尺寸、...

    DIV+CSS

    ### DIV+CSS详解 #### 一、CSS样式表的三种方式 在网页设计与开发过程中,CSS(Cascading Style ...综上所述,DIV+CSS是现代网页设计中不可或缺的技术之一,掌握其基本原理及实践技巧对于前端开发者而言至关重要。

    DIV+CSS相对IE6 IE7和IE8浏览器行为区别及兼容性问题整理

    1.区别IE和非IE浏览器 复制代码代码如下: #tip{ background:blue;/*非IE背景藍色*/ background:red\9;/*IE6、IE7、IE8背景紅色*/ } 2.区别IE6,IE7,IE8,FF 【区别符号】:「\9」、「*」、「_」 【示例】: 复制...

Global site tag (gtag.js) - Google Analytics