DIV+CSS布局中IE与FF浏览器之间重要的兼容性差异

IE与FF浏览器之间的一些重要差异:

·IE与FF的居中方式不一样。

(1)如何让body体能够在IE与FF浏览器中都居中的例子:

[html] view plaincopyprint?

  1. <html>
  2. <head>
  3. <title>让body容器在浏览器中居中</title>
  4. <link rel="stylesheet" type="text/css" href="body_center.css">
  5. </head>
  6. <body>
  7. <div id="container">
  8. </div>
  9. </body>
  10. </html>

body_center.css文件:

[html] view plaincopyprint?

  1. body {
  2. margin:0px;
  3. padding:0px;
  4. font:12px arial,宋体;
  5. text-align:center;
  6. }
  7. #container {
  8. margin:0 auto;
  9. width:90%;
  10. height:500px;
  11. background:green;
  12. text-align:left;
  13. }

·IE默认的最小高度为18px,不满18px的高度一律当做18px显示,而FF浏览器指定多少像素就显示多少像素。

(2)举例:

[html] view plaincopyprint?

  1. <html>
  2. <head>
  3. <title>IE浏览器小于18px的高度如何正常显示</title>
  4. <link rel="stylesheet" type="text/css" href="llq_chayi.css">
  5. </head>
  6. <body>
  7. <div id="container">
  8. <div id="header">
  9. </div>
  10. <div class="fenge"></div>
  11. <div id="main">
  12. </div>
  13. <div class="fenge"></div>
  14. <div id="footer">
  15. </div>
  16. </div>
  17. </body>
  18. </html>

llq_chayi.css文件:

[html] view plaincopyprint?

  1. body {
  2. margin:0px;
  3. padding:0px;
  4. font:12px 宋体;
  5. }
  6. #header {
  7. width:100%;
  8. height:80px;
  9. background:red;
  10. }
  11. #main {
  12. width:100%;
  13. height:600px;
  14. background:yellow;
  15. }
  16. #footer {
  17. width:100%;
  18. height:80px;
  19. background:blue;
  20. }
  21. .fenge {
  22. width:100%;
  23. height:10px;
  24. clear:both;
  25. overflow:hidden;
  26. }

·浏览器之间的默认内外边距不一样,body样式中药对margin与padding清0。

·指定了区块(即一个div)的高度,当这个区块的内容超出该设置的高度时,IE浏览器自动调整高度,而FF不会。所以,解决此问题的方法就是不用指定区块的高度。

·FF中的区块在使用了浮动属性之后显示与浮动原理一致,但是IE却不遵循浮动原理。所以,在使用浮动的区块要记得父区块也要浮动脱离文档流、清除浮动等以保证浏览器的兼容性。

·IE与FF在列表属性方面存在较大差异,主要表现在内外边距默认设置上不一样。所以,为了保证两者兼容,一般ul的样式中要将margin与padding先清0.

·h1-h6标签的内外边距不一样,所以要将margin与padding先清0。

·边框border宽度影响兼容性。在IE中,width指定的是border的宽度加上内容的宽度之和,而FF则只是内容宽度不算border宽度。解决此问题的方法就是,在某元素的样式表中对width值进行两个设置,其中,“widt=值 !important”这个针对FF,而此设置对IE不起作用。然而,再设置一个“width=值”针对IE就可以解决了。

DIV+CSS布局中IE与FF浏览器之间重要的兼容性差异

时间: 2024-08-08 05:05:08

DIV+CSS布局中IE与FF浏览器之间重要的兼容性差异的相关文章

div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧(转)

在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定死图片大小(宽度 高度),这个时候如果图片相对于这个位置不是等比例大小,那么这张图片就会变形,让图片变的不清晰,这个时候想让图片不变形又按比例缩放,如何解决?CSS图片缩小不变形,图片自动缩小,图片按比例等比例缩小不变形解决. 解决方法有两种: 第一种,让图片和布局宽度高度成等比例,这样CSS设置死宽度和高度,图片也是等比例缩小,图片也不会变形. 比如淘宝,要求店铺主上传

DIV+CSS布局中主要CSS属性介绍

Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能,最直接解释方法就是能实现表格布局的多列功能. Margin: Margin属性用于设置两个元素之间的距离. Padding: Padding属性用于设置一个元素的边框与其内容的距离. Clear: 使用Float属性设置一行有多个DIV后(多列),最好在下一行开始之前使用Clear属性清楚一下浮动,否则上面

DIV+CSS布局-固定页面开度布局

DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能,最直接解释方法就是能实现表格布局的多列功能. Margin: Margin属性用于设置两个元素之间的距离. Padding: Padding属性用于设置一个元素的边框与其内容的距离. Clear: 使用Float属性设置一行有多个DIV后(多列),最好在下一行开始之

(转)一小时搞定DIV+CSS布局-固定页面开度布局

本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_2013929173533658 关于DIV+CSS布局中用到的CSS必备知识请看:http://www.kwstu.com/ArticleView/divcss_201442291125960 DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是最常用的属性

一小时搞定DIV+CSS布局-固定页面开度布局

DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能,最直接解释方法就是能实现表格布局的多列功能. Margin: Margin属性用于设置两个元素之间的距离. Padding: Padding属性用于设置一个元素的边框与其内容的距离. Clear: 使用Float属性设置一行有多个DIV后(多列),最好在下一行开始之

&lt;转载&gt;Div+Css布局教程(-)CSS必备知识

目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的高度(Height:45px;). Background:设置对象的背景颜色.背景图像. 1.背景颜色 background:#09F; 2.背景图像 background:url(file:///C|/Users/Administrator/Desktop/huipu.jpg) repeat-x;

Div+Css布局教程(-)CSS必备知识

目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的高度(Height:45px;). Background:设置对象的背景颜色.背景图像. 1.背景颜色 background:#09F; 2.背景图像 background:url(file:///C|/Users/Administrator/Desktop/huipu.jpg) repeat-x;

div css布局兼容性问题

在strict mode中:width是内容宽度 ,也就是说,元素真正的宽度 = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right; 在quirks mode中:width则是元素的实际宽度 ,内容宽度 = width – (margin-left + margin-right + padding-left + padding-rig

DIV+CSS布局基本流程及实例介绍

都说用DIV+CSS布局来设计网站便于优化,容易被收录,那么你对DIV+CSS布局的用法是否了解?CSS布局是网页html通过DIV标签+CSS样式表代码开发制作的(html)网页的统称.DIV+CSS布局是现在非常流行的布局方法,替代了原来的表格布局.下面我们先来看下学习DIV+CSS布局的基本步骤: 一.认清学习的要求 1.弄清目的,首先要认识为什么要学习CSS? 2.心态不能急,如果你很急躁,否则会很快丧失兴趣. 3.坚持,这个不是一到两天的事情,是一个漫长的过程(至少两个月). 二.基础