IE与FF浏览器之间的一些重要差异:
·IE与FF的居中方式不一样。
(1)如何让body体能够在IE与FF浏览器中都居中的例子:
- <html>
- <head>
- <title>让body容器在浏览器中居中</title>
- <link rel="stylesheet" type="text/css" href="body_center.css">
- </head>
- <body>
- <div id="container">
- </div>
- </body>
- </html>
body_center.css文件:
- body {
- margin:0px;
- padding:0px;
- font:12px arial,宋体;
- text-align:center;
- }
- #container {
- margin:0 auto;
- width:90%;
- height:500px;
- background:green;
- text-align:left;
- }
·IE默认的最小高度为18px,不满18px的高度一律当做18px显示,而FF浏览器指定多少像素就显示多少像素。
(2)举例:
- <html>
- <head>
- <title>IE浏览器小于18px的高度如何正常显示</title>
- <link rel="stylesheet" type="text/css" href="llq_chayi.css">
- </head>
- <body>
- <div id="container">
- <div id="header">
- </div>
- <div class="fenge"></div>
- <div id="main">
- </div>
- <div class="fenge"></div>
- <div id="footer">
- </div>
- </div>
- </body>
- </html>
llq_chayi.css文件:
- body {
- margin:0px;
- padding:0px;
- font:12px 宋体;
- }
- #header {
- width:100%;
- height:80px;
- background:red;
- }
- #main {
- width:100%;
- height:600px;
- background:yellow;
- }
- #footer {
- width:100%;
- height:80px;
- background:blue;
- }
- .fenge {
- width:100%;
- height:10px;
- clear:both;
- overflow:hidden;
- }
·浏览器之间的默认内外边距不一样,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就可以解决了。
相关推荐
在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”,其实水平居中实现还是比较简单的,反而垂直居中有点麻烦,因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面...
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,...
学习过程中经常遇到要居中的问题,水平居中问题比较... .div3{ border:1px solid red; text-align:center; height:200px; line-height:200px; width:300px; overflow:hidden; } </style> <div class=”div3″> 2
1. 文本居中 首先编写一个简单的html代码,设置一个类名为parentDiv的div对象。...复制代码代码如下:<div class=”parentDiv”>这里随意填写~...border: 1px solid #ececec;text-align:center; /*水平居中*/} 有些时候,你
jsp中让图片在div中居中显示,如上图 例子: 代码如下: //CSS文件 <style type=”text/css”> #bj{ width:200px; height:200px; border:3px solid red; text-align:center; vertical-align:middle; display:...
精通CSS+DIV网页样式与布局 视频教材主要内容 迅雷下载地址: 目录 第1部分 CSS基础知识篇 第1章 CSS的初步体验 1.1 CSS的概念 1.1.1 标记的概念 1.1.2 传统HTML的缺点 1.1.3 CSS的引入 1.1.4...
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,...
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,...
ie7和ie6都不能识别 display: table-...如果要实现盒模型中的div居中,可以参考以下代码: CSS Code复制内容到剪贴板 div#wrap { display: table; border: 1px solid #FF0099; background-color: #
/*水平居中*/ } img{ float:left; /*左浮动*/ border: 1px #9999cc dashed;/*边框类型*/ margin: 5px; /*内间距*/ } p{ font-size: 12px; text-indent: 2em; /*首行缩进*/ line-height: 1.5; /*行高...
下面给大家分享div居中的实现代码,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <...
垂直居中在IE浏览器下的实现比较难实现,而更难实现的应该是未知内容高度的垂直水平居中!还好网上也有很多高人发布了一些解决的方法!这里我进行了一些改良,兼容FF,IE6,IE7,Opera…如发现问题有劳回复评论! ...
我是先定了一个点在中间,然后再把里边的这一块居中处理; <style> #info{height:0px; width:0px;top:50%; left:50%;position:absolute;} #center{background:#FFCC33;border:1px solid #0033FF; width:300...
有时候在Div中加上 <div xss=removed></div>里面的Table是不会居中的我们可以在Table中加上 margin:auto比如: 复制代码代码如下: <div xss=removed> <table border=”1″ cellpadding=”3″ cellspacing=”0″ xss...
<div class=”v-align”>垂直居中</div> 清除浏览器默认样式 1.用其他有名的库来清除(如:YUI) 2.自已清除 如: * {padding: 0;margin:0;} 让A支持所有浏览器 Html代码 复制代码代码如下: <style type=”...
独行DIV自适应宽度布局CSS实例与扩大应用范围DIVCSS5先给大家介绍独立一列自适应宽度,也就是单独一行宽度自适应DIV的布局。通过DIV CSS实例CSS自适应宽度布局方法,再过常见用处介绍充分掌握自适应独占一行一列的...
前言在CSS中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了,比如下面的例子: 复制代码代码如下:<!DOCTYPE ...
从最简单的开始………… 一、如何让一个DIV水平居中? 这个简单不作过多说明! 复制代码代码如下: <style> body { text-align:center} #info{ margin:0 auto; width:500px; text-align:left; border:1px ...
常用的css将元素垂直居中的方法 1. 使用line-height将单行文本垂直居中 设置line-height等于height,可使单行文本垂直居中 例: div { height: 50px; width: 200px; border: 1px solid #ccc; } 效果如下: ...
body {margin:0} div { float:left; margin-left:10px; width:200px; height:200px; border:1px solid red } </style> 浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline 3.为什么FF下...