ＦＦ和ＩＥ之间的兼容问题总结

在 ff 测试 div+css 的过程中发现不少问题，主要原因是代码的不规范书写。

1、居中问题

div 里的内容，ie 默认为居中，而 ff 默认为左对齐。

使 ff 内容居中的方法是增加代码 margin:auto;

2、高度问题

设有两横行 div 排列，上面的 div 设置高度 (height)，如果 div 里的实际内容大于所设高度，在 ff 中会出现两个 div 重叠的现象；但在 ie 中，下面的 div 会自动给上面的 div 让出空间。所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节。

或者设置：overflow:hidden

3、clear:both;

拿 footer 为例，有时候如果上面使用了 float 控制的 n 列的布局，那么在用 ff 浏览时 footer 很有可能不老实，到处乱动 —— 因为他还在受到浮动（float）的控制。如果想让它老老实实呆在页面下方，在 footer 的 div 中写入 clear:both; 就可以达到效果了！

4、浮动 ie 产生的双倍距离

#box{

float:left;

width:100px;

margin:0 0 0 100px; // 这种情况之下 IE 会产生 200px 的距离

display:inline; // 使浮动忽略

}

5、重点讲解：display:block,inline 两个元素 display(显示)

display:block; // 可以为内嵌元素模拟为块元素

display:inline; // 实现同一行排列的的效果

diplay:table; //for ff, 模拟 table 的效果

Display:block 元素的特点是：

总是在新行上开始；

高度，行高以及顶和底边距都可控制；

宽度缺省是它的容器的 100%，除非设定一个宽度

<div>, <p>, <h1>, <form>, <ul> 和 <li> 是块元素的例子。

display:inline 就是将元素显示为行内元素.

inline 元素的特点是：

和其他元素都在一行上；

高，行高及顶和底边距不可改变；

宽度就是它的文字或图片的宽度，不可改变。

<span>, <a>, <label>, <input>, <img>, <strong> 和 <em> 是 inline 元素的例子。

例子：

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title> 无标题文档 </title>

<style type="text/css">

#inline{width:400px; height:40px;background:#99CCCC;padding:15px 0px 0px 15px}

#inline ul{margin:0px; list-style:none;}

#inline ul li{display:inline; font-size:12px;margin-left:5px}

#block{width:400px; height:40px;background:#FFCC99;padding:15px 0px 0px 15px}

#block ul{margin:0px; list-style:none;}

#block ul li{display:block; font-size:12px;height:20px}

#div_inline{width:800px;display:inline;height:120px;}

</style>

</head>

<body>

<div id="inline">

<ul>

<li> 天天招生网

<li> 心血管网

<li> 高血压网

<li> 先心病网

</ul>

</div>

<p>

<div id="block">

<ul>

<li> 天天招生网 </li>

<li> 心血管网 </li>

<li> 高血压网 </li>

<li> 先心病网 </li>

</ul>

</div>

</p>

</body></html>

6、IE 与 FF 宽度和高度的问题

min -width 是个非常方便的 CSS 命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。整体最窄 770px，最宽 1024px，也就是说窗口小于 770xp 就出底部滚动条，如果大于 1024px 自动屏幕居中。IE 不认得 min- 这个定义，但实际上它把正常的 width 和 height 当作有 min 的情况来使。这样，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用 min-width 和 min-height 的话，IE 下面根本等于没有设置宽度和高度。

CSS 这样设计：

#container{

min-width: 600px;

width:expression(document.body.clientWidth < 600? "600px": "auto");

}

第一个 min-width 是正常的；但第 2 行的 width 使用了 Javascrīpt，这只有 IE 才认得，这也会让你的 HTML 文档不太正规。它实际上通过 Javascrīpt 的判断来实现最小宽度。

同样的办法也可以为 IE 实现最大宽度：

#container

{

min-width: 600px;

max-width: 1200px;

width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto";

}

7、FF: 支持 !important, IE 则忽略,

可用 !important（例：height:30px!important; height:26px;）为 FF 特别设置样式

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

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

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

在 FF 和 IE 中的 BOX 模型解释不一致导致相差 2px 解决方法：

div{margin:30px!important;margin:28px;}

注意这两个 margin 的顺序一定不能写反，据阿捷的说法!important 这个属性 IE 不能识别，但别的浏览器可以识别。所以在 IE 下其实解释成这样：

div css xhtml xml Example Source Code Example Source Code [www.16sucai.com]

div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行，所以不可以只写 margin:XXpx!important;

在 Firefox/Mozilla 浏览器中，对象的实际宽度 = (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)；而在 IE/Opera 浏览器中，对象的实际宽度 = (margin-left) + width + (margin-right)。

DIV+CSS 构建网站时常会出现浏览器不兼容的问题，下面整理了一些常见不兼容问题，及解决办法！

1、用!important 解决 IE 和 Mozilla 的布局差别

!important 是 CSS1 就定义的语法，作用是提高指定样式规则的应用优先权，最重要的一点是：IE 一直都不支持这个语法，而其他的浏览器都支持。因此我们就可以利用这一点来分别给 IE 和其他浏览器不同的样式定义，例如，我们定义这样一个样式：

.colortest{border:20pxsolid#60A179!important; border:20pxsolid#00F; padding:30px; width:300px;}

在 Mozilla 中浏览时候，能够理解!important 的优先级，因此显示 #60A179 的颜色；在 IE 中浏览时候，不能够理解!important 的优先级，因此显示#00F 的颜色。

2、解决超链接访问过后 hover 样式不显示的问题

改变 CSS 属性的排列顺序: 先后顺序标准应为：a:link—a:visited—a:hover—a:active

3、Li 中内容超过长度后以省略号显示的方法

<meta content="text/html; charset=gb2312" http-equiv="Content-Type" /><style type="text/css">

<!–

li {

   width:200px;

   white-space:nowrap;

   text-overflow:ellipsis;

   -o-text-overflow:ellipsis;

   overflow: hidden;}

–></style>

<ul>

   <li><a href="#">web 标准常见问题大全 web 标准常见问题大全 </a></li>

   <li><a href="#">web 标准常见问题大全 web 标准常见问题大全 </a></li>

</ul>

4、margin 和 padding 定义尺寸的缩写

margin:3px—— 表示所有边都是 3px；

margin:3px 5px—— 表示 top 和 bottom 的值是 3px ,right 和 left 的值是 5px

margin:3px 5px 7px—— 表示 top 的值是 3，right 和 left 的值是 5，bottom 的值是 7

margin:3px 5px 7px 5px—— 四个值依次表示 top,right,bottom,left；上右下左。

5、解决 IE 不能正确显示透明 PNG——header 内加入代码

程序代码

<script language="javascript">

function correctPNG()

{

for(var i=0; i<document.images.length; i++)

{

   var img = document.images[i]

   var imgName = img.src.toUpperCase()

   if (imgName.substring(imgName.length-3, imgName.length) == "PNG")

   {

   var imgID = (img.id) ? "id=’" + img.id + "’ " : ""

   var imgClass = (img.className) ? "class=’" + img.className + "’ " : ""

   var imgTitle = (img.title) ? "title=’" + img.title + "’ " : "title=’" + img.alt + "’ "

   var imgStyle = "display:inline-block;" + img.style.cssText

   if (img.align == "left") imgStyle = "float:left;" + imgStyle

   if (img.align == "right") imgStyle = "float:right;" + imgStyle

   if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle

   var strNewHTML = "<span " + imgID + imgClass + imgTitle

   + " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"

   + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

   + "(src=’" + img.src + "’, sizingMethod=’scale’);"></span>"

   img.outerHTML = strNewHTML

   i = i-1

   }

}

}

window.attachEvent("onload", correctPNG);

</script>

6、ul 在 Firefox 和 IE 下表现不同

使用（padding:0; margin:0; list-style:inside;）或者（padding:0; margin:0; list-style:none;）实现兼容，参考地址：http://and8.net/article.asp?id=273

7、BOX 模型在 firefox 和 IE 中的解释相差 2px 的解决方法

div{margin:30px!important;margin:28px;}

注意这两个 margin 的顺序一定不能写反。根据上面提到的 IE 并不支持!important，所以在 IE 下其实解释成这样：

div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行，所以不可以只写 margin:XXpx!important;

8、margin 的默认效果

div 里的内容，ie 默认为居中，而 ff 默认为左对齐。使 ff 内容居中的方法是增加代码 margin:auto;

针对品牌网站的使用场景来进行分类