语源科技BlogJava-jayexxhttp://www.blogjava.net/jayexx/zh-cnTue, 14 Apr 2026 14:19:03 GMTTue, 14 Apr 2026 14:19:03 GMT60FireFox（火狐）与IE兼容问题全解析(二)http://www.blogjava.net/jayexx/archive/2011/08/04/355729.html木木伏木木伏Thu, 04 Aug 2011 02:04:00 GMThttp://www.blogjava.net/jayexx/archive/2011/08/04/355729.htmlhttp://www.blogjava.net/jayexx/comments/355729.htmlhttp://www.blogjava.net/jayexx/archive/2011/08/04/355729.html#Feedback0http://www.blogjava.net/jayexx/comments/commentRss/355729.htmlhttp://www.blogjava.net/jayexx/services/trackbacks/355729.html打开一看，哇哈，终于来了，ff好多不兼容的问题来了。随便点击了下不兼容的问题就有上十个了。一个个慢慢解决，慢慢搜索。。。。。。。先把几个简单的整理分享一下。
1.最简单的鼠标移过手变型的css要改了 cursor:pointer; dw8下面自动出来的也没有hand这个属性了，标准的是pointer
2.ff不支持滤镜 最常见的半透明不支持。
filter: Alpha(Opacity=50);
opacity: .5;
style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;" onmouseover="this.style.MozOpacity=1;
this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50"
3.ff不支持expression 例如去掉链接的边框要分别写不同的css
a,area { blr:expression_r(this.onFocus=this.blur()) }
:focus { outline: none; }
4.ff不支持div滚动条的颜色设置，目前还没有找到替换的好方法。
.contendiv {
position: absolute; left: 0px; top: 10px; width: 580px;height: 135px;
line-height:120%;text-align:left; font-family:"宋体";word-break : break-all; color:#6D6E71;
OVERFLOW-Y:auto;OVERFLOW-X:no;
SCROLLBAR-ARROW-COLOR: red; SCROLLBAR-TRACK-COLOR: F6F6F6;SCROLLBAR-FACE-COLOR:#F6F6F6;SCROLLBAR-SHADOW-COLOR:#F6F6F6;
SCROLLBAR-DARKSHADOW-COLOR:#F6F6F6;SCROLLBAR-3DLIGHT-COLOR:#F6F6F6;SCROLLBAR-HIGHLIGHT-COLOR:#F6F6F6;
}
这个在ff里面完全没有效果了。
5.ie下面显示在文字下面横线的border-width: 0px 0px 1px 0px;在ff里面跑到文字上面去了。（查了手册还是没有找到解决的办法感觉莫名奇妙～～ 原来是ff的容错能力太差了，是下面的width: 186px;height: 0px;宽高引起的，其实a:haver已经继承了上级的属性了，只要定义不同的样式就可以了，看来ff有助于制作标准化，简洁化的网页啊，对css的理解也更深刻，对提供css来说是个很好的帮助）
.onelinksdiv a:hover {
display: block;border-style: solid;color: #ff0000;border-width: 0px 0px 1px 0px;

}
//下面的写法在ie下面正常，但在ff下是错误的
.onelinksdiv a:hover {
display: block;border: #ff0000 solid; border-width: 0px 0px 1px 0px;
width: 186px;height: 0px; color: #ff0000; font-size: 14px;text-align: right;
}
相关参考资料：
border-width:border-top-width border-right-width border-bottom-width border-left-width;
p#fourborders
{
border-width:thick medium thin 12px;
}
如果定义四个值,那么这四个值就分别是上,右,下,左边框的宽度值(从上边框开始,以逆时针的顺序遍历).
等价于下面的定义
p#fourborders
{
border-top-width:thick;
border-right-width:medium;
border-bottom-width:thin;
border-left-width:12px;
}
6.ff不支持<body scroll="no" > scroll属性，必须定义overflow:hidden;而且要在html标签下，不能在body下
html{
overflow:hidden;
}
7.ff不支持数据岛绑定<xml id="news" src="news.xml" ></xml>在ie下可以加载进数据，但到了火狐就加载不进数据了，开始以为可能是因为内容行文字太多导致不能断行不能加载，但删除只剩几个字以后一样不行。
8.style="word-break:break-all"在网页中的单元格里的内容超出一行时,在ie浏览器里定义的换行样式能够正常使用, 但在firefox里却不能被支持了.style="word-break:break-all" 是MS扩展的IE专有属性，并未成为W3C标准，因而 Firefox 还不能支持它。不过MS已经将其提交到了W3C，而在W3C的CSS3的候选方案中也能看到它。希望这个属性在被W3C最终定案的为CSS3标准后， Firefox可以支持吧。这之前，可以试试
style="table-layout:fixed;word-wrap: break-word" （当它是英文的时候就不能正常换行了）
9.目前FF2.0为止都不支持IE的name锚点
像这种写法都是不支持的：<a href="###" onclick="history.go(-1)">go back</a>
原来根据W3C的语法，<a>标签始终都会查找href地址并跳转过去，现在onclick事件与###这个地址又有冲突。
为了让 Firefox与IE部分元素属性兼容，那个费劲，我无意中发现Firefox对空格敏感：
<a onclick="window.location.href ='faq.php?page=messages#2'"> //有空格，锚点作用
<a onclick="window.location.href='faq.php?page=messages#2'"> //无空格，锚点无作用
锚点的写法又十分讲究，比如<a name=#1>，Firefox不支持锚点，得加上id=#1
静态同页面引用时必须这样写：<a href="#1"></a>，<a href="static.html#1"></a>就不行，动态页面要用JS
后遗症来了，考虑到鼠标样式和浏览器兼容又开始折腾：
<a href="###" onclick=""> //不兼容
<a href="javascript:;" onclick=""> //不兼容
<a href="javascript:function();"> //没有{...},属于脚本的非法书写
<a style="cursor:hand" onclick=""> //没照顾到自定义系统鼠标样式的用户
<a href="javascript:onclick=''"> //状态栏会显现，href有多长显示多长
<a href=# onclick=""> //我用的
10.ff火狐下面不支持document.all属性的，必需用 document.getElementByIdx_x('idName');
以下是我的动画切换效果，在ie下正常，到了火狐里面就不动了，修改后可以切换图片但渐隐渐现的效果就没有了。原因是火狐不支持滤镜filter,只好用半透明的div来实现了。

function playcompanyimg()
{
window.setInterval('changecompanyimg();', interval);
}
function changecompanyimg()
{

//if (document.all)
//{

　　 number = Math.floor(Math.random() * image.length);
idtemp.src=image[number];
//alert(number+" ii "+idtemp.src)

//alert(do_transition);
//document.all.companyimg.style.filter="progid:DXImageTransform.Microsoft.Fade(duration=2,overlap=0.4)";

var companyimgidtmep = document.getElementByIdx_x('companyimg');
companyimgidtmep.style.filter="progid:DXImageTransform.Microsoft.Fade(duration=1,overlap=1)";
companyimgidtmep.filters[0].Apply();
companyimgidtmep.filters[0].Play();
//}
}
参考资料：核心：FILTER:revealTrans(duration=1,transition=23); 一个IE滤镜，
在其它的非IE浏览器虽然不支持这个滤镜，但是支持透明滤镜的，你可以分一下，IE下继续使用你这个效果，而在非IE浏览器下用透明滤镜：
style.opacity
opacity = 0.5 CSS3
style.MozOpacity
-moz-opacity: 0.5 Mozilla 里等同上面这个滤镜 这个滤镜也适用于Netscape
style.KHTMLOpacity
-khtml-opacity: 0.5 Safari 里的透明滤镜。
IE：
obj.filters.alpha.opacity
to meizz(梅花雪)
其实我想过你那个问题的。但是透明 opacity 这个他不是一个渐变的过程。
一般这种图片过度特效最多持续一秒把，最多最多两秒 duration=2
超过2秒就很累赘，喧宾夺主了。
在2秒钟里面实现
g_img.style.filter="alpha(opacity="+i+")" 透明度的变化是比较累赘的事情。
要用 window.setInterval 改变 i 的值， 而且还要调用几十上百次window.setInterval
才能看到效果。
这样的话，我觉得得不赔失，是为了特效而特效了
另外一种考虑是，毕竟非ie浏览器是少数，即使在ff下 没有图片过度特效，其实也没什么，
还是很流畅，不过就是看不到ie里面的美而已。
11.ff 下链接的onclick事件不起作用
<div id="bigwhatwedo" ><a href="javascript:onclick = display('whatwedo')" target="">我们做什么</a></div> 在ie下没有问题，在ff下点击了没有反应。作了多次尝试，换成onclick="display('whatwedo')"仍然不行，后来通过多次检查，搜索仍然找不到门路，最后采用惯用的方法－－一步一步alert();出来看效果，原来他妈的是一个id的值写错了，但奇怪的是ie下面没有关系？是 ie的容错内容太强了还是火狐的容错内容太差了？不过还是喜欢火狐的严谨和标准哈。可以让人发现不少深层次的东西。哈哈。
12.ff中div 定位不能通过js初始化 必须先设定值并且要设定度量单位 top:80px;left:212px;
13.ff不能用.click();方法打开链接，终于暂时性的解决了
<div><a href="#" onclick="test1(2)" id="a3_a">hello</a> </div>
<div>
<a href="" onclick ="test2(1)" id="b3">hello2</a></div>
<div><a href="javascript:onclick =test2(1)" id="b3">hello3</a>触发事件放在href="javascript:onclick =test2(1)" 里面ff无效</div>
<div onclick="test2(1)" id="b3">hello3</div>
<script language="javascript">
<!--
function test1(num)
{
window.alert(num);
}
function test2(num)
{
var aaa_a = document.getElementByIdx_x("a3_a");
if(document.all) {//if(getOs()=="MSIE"){//IE的处理
aaa_a.click();
}
else
{
var evt = document.createEvent("MouseEvents");
evt.initEvent("click",true,true);
aaa_a.dispatchEvent(evt);
}
}

function getOs()
{
var OsObject = "";
if(navigator.userAgent.indexOf("MSIE")>0) {
return "MSIE";
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
return "Firefox";
}
if(isSafari=navigator.userAgent.indexOf("Safari")>0) {
return "Safari";
}
if(isCamino=navigator.userAgent.indexOf("Camino")>0){
return "Camino";
}
if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){
return "Gecko";
}
}
//--> </script>
<!-- 由于这里的链接是index的iframe用href="#" 在ie中无法正常显示，
而用 href="javascript:onclick = display('whatwedo')"的方式火狐不支持打开第一个链接，火狐必须用onclick="display('whoweare')"
本以为火狐浏览器使用的人很多，但从网站的统计分析来看火狐只有可怜的3.18%，但兼容他的标准确花费不少精力！不过标准化有利于以后的维护和扩展，有利于技术的不断提示。
-->
14.OVERFLOW-Y:auto;OVERFLOW-X:hidden;在ie里面可以用no 表示隐藏，但在ff里面必须用hidden
－－－－－－－－－－－－－－－－－－－－－－－－－
总结一下：目前有十个不兼容问题，还没解决的有：
4.ff不支持div滚动条的颜色设置，目前还没有找到替换的好方法，在许多标准化的网站看到也是没有解决这个问题。
7.ff 不支持数据岛绑定<xml id="news" src="news.xml" ></xml>在ie下可以加载进数据，但到了火狐就加载不进数据了，开始以为可能是因为内容行文字太多导致不能断行不能加载，但删除只剩几个字以后一样不行。用w3c代码检测软件检测了一下，原来是自定义的xml标签通不过，所以火狐就不认了。
10.火狐不支持滤镜 filter，无法实现图片切换中间变换的效果，只能通过透明度来设置，但很麻烦.（这个目前暂不实现了）



木木伏 2011-08-04 10:04 发表评论
]]>CSS在IE浏览与Firefox间最常见的不兼容性问题http://www.blogjava.net/jayexx/archive/2011/08/04/355728.html木木伏木木伏Thu, 04 Aug 2011 02:03:00 GMThttp://www.blogjava.net/jayexx/archive/2011/08/04/355728.htmlhttp://www.blogjava.net/jayexx/comments/355728.htmlhttp://www.blogjava.net/jayexx/archive/2011/08/04/355728.html#Feedback0http://www.blogjava.net/jayexx/comments/commentRss/355728.htmlhttp://www.blogjava.net/jayexx/services/trackbacks/355728.html
DOCTYPE 影响 CSS 处理

FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行

FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中

FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width

FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

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

cursor: pointer 可以同时在 IE FF 中显示， hand 仅 IE 可以

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

这里只考虑 IE5.5+ 的情况，有些教程还在讨论 IE5 的兼容性，我觉得就没有什么必要了
1、使整个块在页面居中对齐
IE浏览器：先设定 body 的样式为 text-align: center; 然后指定区块的样式 margin: auto ; text-align: left ;
FF浏览器：指定区块的样式 margin: auto ; 即可
2、使用 XHTML 1.0 Transitional 标准时， width 与 height 不兼容
FF浏览器：用 !important width: width + padding + border;
如：
div.test {
   border:25px solid;
   background: #ffc;
   padding:25px;
   width:400px;
   width:300px !important;
}
IE是不能识别   width:300px !important; 的，但在 Firefox 中能识别，从而达到两者兼容的目的。
如果这个元素设定了float属性，还可以使用一个更简单的办法使之兼容
加上 display:inline;
即是：
div.test {
   border:25px solid;
   background: #ffc;
   padding:25px;
   width:400px;
   float:left;
   display:inline;
}
注意：在没有指定 float 的时候使用 display:inline; 在FF中是无效的。

3、hand 指针图标属性
FF是不能识别 cursor: hand; 的，可以用   cursor: pointer ，这样两个浏览器都能识别。
4、脚本引入的书写方式
这里讨论的主要是 XHTML 1.0 标准，据说在 1.1 中，脚本引入必须写成
<script type="text/javascript">
为了兼容，可以写成
<script language="text/javascript" type="text/javascript">
因为按XML的标准，多一个无关的属性是不影响解析的，但能达到两者兼容的目的。
5、嵌套DIV：父DIV的高度不能根据子DIV自动变化的解决方案
IE 浏览器对于多重DIV嵌套自适应高度是非常理想的，不管使用百分比还是固定值父DIV都会根据子DIV变化而变化，但在FF浏览等，子DIV如果比父 DIV高则会越过父DIV，从而影响总体排版，必须指定父ID为float,然后通过在子DIV后加一个clear的DIV来解决，如：
<div id="parent" style="float:left">
<div id="content"></div>
</div>
<div style="clear: both;"></div>

对高度的解析
IE：将根据内容的高度变化，包括未定义高度的图片内容，即使定义了高度，当内容超过高度时，将使用实际高度
Firefox：没有定义高度时，如果内容中包括了图片内容，MF的高度解析是根据印刷标准，这样就会造成和实际内容高度不符合的情况；当定义了高度，但是内容超过高度时，内容会超出定义的高度，但是区域使用的样式不会变化，造成样式错位。
结论：大家在可以确定内容高度的情况下最好定义高度，如果真的没有办法定义高度，最好不用使用边框样式，否则样式肯定会出现混乱！

img对象alt和title的解析
alt：当照片不存在或者load错误时的提示；
title：照片的tip说明。
在IE中如果没有定义title，alt也可以作为img的tip使用，但是在MF中，两者完全按照标准中的定义使用

结论：大家在定义img对象时，最后将alt和title对象都写全，保证在各种浏览器中都能正常使用

其他的细节差别
当你在写css的时候，特别是用float: left（或right）排列一窜图片时，会发现在firefox里面正常而IE里面有问题。无论你用margin:0,还是border: 0来约束，都无济于事。

其实这里还有另外一个问题，就是IE对于空格的处理，firefox是忽略的而IE对于块与块之间的空格是处理的。也就是说一个div结束后要紧接着一个div写，中间不要有回车或者空格。不然也许会有问题，比如3px的偏差，而且这个原因很难发现。

非常不走运的是我又碰到了这样的问题，多个img标签连着，然后定义的float: left，希望这些图片可以连起来。但是结果在firefox里面正常而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。

后来的解决方法是在img外面套li，并且对li定义margin: 0，这样就解决了IE和firefox的显示偏差。IE对于一些模型的解释会产生很多错误问题，只有多多尝试才能发现原因。

2、嵌套DIV:父DIV的高度不能根据子DIV自动变化的解决方案
<div id="parent">
<div id="content"> </div>
</div>

当Content内容多时，即使parent设置了高度100%或auto,在不同浏览器下还是不能完好的自动伸展。 解决方案

<div id="parent">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>

在层的最下方产生一个高度为1的空格，可解除这个问题

3、CSS DIV 学习笔记
一、基本上每个区块的div 都要有自己的id，杜绝不同功能的区块用同一个id/class

二、每个稍大的区块div 后面都跟一个<!-- /id -->标记开始、结束

三、隐藏文字的又一种方法 TEXT-INDENT: -9999px; LINE-HEIGHT: 0

四、巧妙地处理并列的两列:
1)
右列为P, width=44.5%, float=left
左列为P.first, border-right: #a7a7a7 1px solid, width=45%
2)
右列#right, margin-left:50%
左列#left, float=left,width=50% border-right:#a7a7a7 1px solid

以上两种方法关键点在于选择其中一个为float=left

五、随机的切换图片：
#random {
BACKGROUND: url(/rotate.php);
}
这个方法很巧妙。

4、关于div的高度自适应
今天小尿让我帮他的页子解决一个问题，就是div的高度自适应，也就是在一个父级div中嵌套一左一右两个子div，右边的子div内容可无限扩展，而可以使得父级div的高度能被无限拉长，用一般的布局方法，在IE中可以正确浏览，在Mozilla中父级 div的高度就固定在10px左右，无法自适应高度，height:auto也不行，怎么办呢。网上参考到一篇资料，要实现自适应高度，div层必须具有 float属性，于是我开始动手试验，float:left的话，div就跑到页面最左边去了，这好办，我在它的外面再套一层div，把位置定好，那么里面的就算float:left也不会被移动位置了。

xhtml:
==========================================================

<div id="container_father">
<div id="container">
    <div id="panel"> test<br />
     test<br />
     test<br />
      <!-- id="panel" -->
    </div>
    <div id="sidebar">
     <ul>
       <li class="current">预安装检查</li>
       <li>阅读 PFC 授权协议</li>
       <li>初始化数据库</li>
       <li>完成安装</li>
      </ul>
      <!-- id="sidebar" -->
    </div>
    <!-- id="container" -->
</div>
</div>

CSS
=================================================
#container_father {
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 750px;
}

#container {
   width: 750px;
   border: 1px solid #cccccc;
   padding: 8px;
   margin: 0px;
   background-color: #F1F3F5;
   float: left;
}

FRom: http://ulean.zg163.net/

5、 深入标准 ~ The IE Doubled Float-Margin Bug(IE双倍浮动边界Bug)
什么发生故障？

一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box)，并在浮动元素上使用了左边界(margin-left) 来令它和容器的左边产生一段距离。看起来相当的简单，对吗？但直至它被在IE/Win中浏览为止，在浏览器中居左浮动元素的边界长度被神秘地翻了一倍！

情况应该如何？

下面的图释展示了一个简单的div(茶色的盒子)包含着一个居左浮动的div(绿色的盒子)。浮动元素有一个100px的左边界，使容器盒与它的左边缘之间产生了一个100px的间隙。到现在为止，一直都还不错。

.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;

}

陈旧的IE“双倍占据”

原样的相同代码被在IE/Win中浏览时以些微不同的方式显示，下面的图释展示了IE/Win在布局上所做的。

这为什么会发生？别问这种傻问题！这就是IE，记得吗？符合标准只是理想的状况，不指望实现，这个简单的事实正验证了。

重点

这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间，在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样，双倍边界同样神秘地显示在居右的相同方式。

最后，修复办法！

直到现在(04年1月)这个Bug一直被认为是无法修复的，通常用来替代错误的边界的控制方法如：一个不可视浮动元素的左边距，连同一个内嵌的盒子一起，可视的盒子装在不可视浮动元素里；或者使用技巧仅对IE/Win设定边界的1/2值。这办法生效了，但是是混乱的而且搞糟了干净的源代码。不过现在全部结束了。

Steve Clason发现了一个修复办法，描述在他的Guest Demo里，修复了双倍边界和围绕文字缩进Bug。这是一个经典的IE的Bug修复办法，使用一个属性来修复影响不相关属性的Bug。

现在如何来做？

研究它，简单地将{display: inline;}设置给浮动元素就是全部所需做的！是的，听起来太简单了，不是吗？不过这是真的，仅仅一个display的"inline"声明已经能够胜任了。

熟悉规则的人知道浮动元素自动设置为"block"元素，而不管他们之前是什么。就如Steve从W3C里指出：

9.5.1 Positioning the float: the 'float' property

"This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate
boxes that are not absolutely positioned. The values of this property have the following meanings:

left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top
(subject to the 'clear' property). The 'display' is ignored, unless it has the value 'none'.

right
Same as 'left', but content flows on the left side of the box, starting at the top.

none
The box is not floated. "

这说明浮动元素上的{display: inline;}会被忽略，事实上所有的浏览器没有呈现任何改变，包括IE。但是，它不知何故让IE停止将浮动元素的边界翻倍。因而，这个修复办法可以被直接应用，而没有任何繁琐的隐藏方法。如果将来的一款浏览器决定对这个修复办法抱恙，只要把这个修复装入IE独用的Tan Hack里，细节如同IE Three Pixel Text-Jog Demo。

下面是两个使用了前面相同代码的生动演示，第一个照常显示了IE的Bug，下一个对浮动元素使用了"inline"修复。
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}

firefox和IE对某些css样式的认定有不少区别，包括：

ul和ol的默认padding值是不一样的，在Firefox中，padding-left默认值为40px左右，而IE中为0，一般设置ul{margin:0;padding:0;}就能解决大部分问题
对字体大小small的定义不同，Firefox中为13px，而IE中为16px，差别挺大，也只能设置为14px了事；(暂时没有发现)
并列排列的多个元素（图片或者链接）的代码中的空格和回车会造成元素之间的间隙，而在firefox中和在IE中显示是不一样的，IE显示空格（约8px）、firefox显示空格（约4px）
对不规范代码的兼容情况不同，IE中漏掉的关闭符号对显示不造成影响，而firefox中就会形成错乱的布局，而在ie中用到的padding和margin的负值都会被firefox解析为0，易造成布局的混乱；（我觉得好像负值在firefox中也是有显示的）
firefox对于长高尺寸的严格解析会造成与设置不匹配（超出）的图片或表格将原设置div撑大；
！important属性可以在除IE浏览器的其他浏览器中起作用，因此有人利用这种差别来令一个CSS兼容多种浏览器；
未定义id的div，在IE中会与div属性中的其他设置有关，而在firefox中的位置会于div在文件中位置有关，紧随前一个div出现……（有待尝试）
设置为float的div在ie下设置的margin会加倍的，特别是margin-left，这是ie6的一个bug。解决的方法是在这个div里面加上display:inline;
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）
FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行。IE里设置text-align:center，就居中了，但在FF中不行。所以一般两个都要设置。
FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width（也没感觉，觉得设了padding，大家的高宽都变了）
在FF中可以实现的div 垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行。这种方法在IE中实现不了。（已试过！有用）
FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。
在浮动（float）的div后加clear属性，这可以解决背景的自适应高度问题。怎么加才能让不同浏览器都好使？IE中有默认行高，这是要解决的问题。
FF中不支持文字的自动转行；什么word-wrap:break-word;word-break:break-all都是IE搞的鬼，根本就不符合css标准。（现在看到的解决办法都是通过编程实现）


ul和ol的默认padding值是不一样的，在Firefox中，padding-left默认值为40px左右，而IE中为0，一般设置ul{margin:0;padding:0;}就能解决大部分问题
对字体大小small的定义不同，Firefox中为13px，而IE中为16px，差别挺大，也只能设置为14px了事；(暂时没有发现)
并列排列的多个元素（图片或者链接）的代码中的空格和回车会造成元素之间的间隙，而在firefox中和在IE中显示是不一样的，IE显示空格（约8px）、firefox显示空格（约4px）
对不规范代码的兼容情况不同，IE中漏掉的关闭符号对显示不造成影响，而firefox中就会形成错乱的布局，而在ie中用到的padding和margin的负值都会被firefox解析为0，易造成布局的混乱；（我觉得好像负值在firefox中也是有显示的）
firefox对于长高尺寸的严格解析会造成与设置不匹配（超出）的图片或表格将原设置div撑大；
！important属性可以在除IE浏览器的其他浏览器中起作用，因此有人利用这种差别来令一个CSS兼容多种浏览器；
未定义id的div，在IE中会与div属性中的其他设置有关，而在firefox中的位置会于div在文件中位置有关，紧随前一个div出现……（有待尝试）
设置为float的div在ie下设置的margin会加倍的，特别是margin-left，这是ie6的一个bug。解决的方法是在这个div里面加上display:inline;
如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）
FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行。IE里设置text-align:center，就居中了，但在FF中不行。所以一般两个都要设置。
FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width（也没感觉，觉得设了padding，大家的高宽都变了）
在FF中可以实现的div 垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行。这种方法在IE中实现不了。（已试过！有用）
FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。
在浮动（float）的div后加clear属性，这可以解决背景的自适应高度问题。怎么加才能让不同浏览器都好使？IE中有默认行高，这是要解决的问题。
FF中不支持文字的自动转行；什么word-wrap:break-word;word-break:break-all都是IE搞的鬼，根本就不符合css标准。（现在看到的解决办法都是通过编程实现）

css解决不同浏览器的兼容问题的方法:

（不是我们需要的方法，我们要达到的要求是尽量不写!important也能解决）

解决这种问题可以通过规范css代码，使其符合两种规范的标准样式，也可以在差别处利用！important对firefox设置属性，或者针对多种浏览器分别各自配置合适的CSS文件，再通过判断浏览器选择不同CSS实现兼容性。

代码如下：

<!--[endif]-->

<!--[endif]-->

#example { color: #333; }
* html #example { color: #666; }
*+html #example { color: #999; }

这样在IE6中显示字体颜色是#666；在IE7中显示的字体颜色是#999；在FF中显示的颜色是#333

3.FF解决背景的自适应高度问题

①对于背景不能自动延伸的原因上面说的很清楚，解决方法是多嵌套一个层,这个层设置浮动，并承担背景，就ok了。
下面就简单示意一下

本行代码就是让背景颜色自动延续


可以这么理解：float使得层自动获得宽和高

但是有了第三种方法，这种方法好像并不值得推荐。

②另一种方法就是给第一个div赋予属性值：display:table；但这种方法会造成另外一些布局上的错误。可以考虑使用，但不建议使用。

③我想这是最重要的一种方法，但是中间问题很多。方法就是clear:both。

.clear{clear:both}可以使高度向下延续，但是会自动产生行高；

.clear{clear:both;height:0}在FF中清除了行高，但是IE里不认；

.clear{clear:both;height:1%}在FF和IE中仍然不认；

像之前写的.clear{clear:both;height:1%;font-size:0px;overflow:hidden}在IE中好使，但在FF中却不能让背景颜色延续，除非加上边框。！挺有意思，还是不太懂

.clear{clear:both;line-height:1px}好使！我理解是清的这个容器默认是行元素，所以高对它不起作用，所以你无论把height设置为几都没有效果，而line-height本身就是作用于行元素的，所以好使！

上面理解的不对!重新理解是：IE里面有默认的行高，必须把行高给清掉，可以用font-size:0px或line-height:0px；但是这里又有一个问题，就是height的值不要用百分数，没有用！

本行代码就是让背景颜色自动延续


代码如下：

<!--[endif]-->

<!--[endif]-->

#example { color: #333; }
* html #example { color: #666; }
*+html #example { color: #999; }

这样在IE6中显示字体颜色是#666；在IE7中显示的字体颜色是#999；在FF中显示的颜色是#333


木木伏 2011-08-04 10:03 发表评论
]]>