1.网页制作,IE7、IE6和火狐兼容性问题
一、CSS HACK
以下两种方法几乎能解决现今所有HACK。
1、!important
随着IE7对!important的支持，!important 方法现在只针对IE6的HACK。
（注意写法.记得该声明位置需要提前）
程序代码<style>
#wrapper
{
width: 100px!important;
width: 80px;
}
</style>2、IE6/IE77对FireFox
*+html 与 *html 是IE特有的标签，firefox 暂不支持。
而*+html 又为 IE7特有标签。
程序代码<style>
#wrapper
{
#wrapper { width: 120px; }
*html #wrapper { width: 80px;}
*+html #wrapper { width: 60px;}
}
</style>注意，*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
程序代码<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
二、万能 float 闭合（非常重要）
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中，给需要闭合的div加上 class="clearfix" 即可，屡试不爽。
程序代码<style>
.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
.clearfix {display:block;}
</style>
三、其他兼容技巧（再次啰嗦）
1、FF下给 div 设置 padding 后会导致 width 和 height 增加，但IE不会。（可用!important解决）
2、居中问题。
1) 垂直居中。将 line-height 设置为 当前 div 相同的高度，再通过 vertical-align: middle. （注意内容不要换行）
2) 水平居中。 margin: 0 auto; （当然不是万能）
3、若需给 a 标签内内容加上 样式，需要设置 display: block; （常见于导航标签）
4、FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float 的 div 在 ie 下 margin 加倍等问题。
5、ul 标签在 FF 下面默认有 list-style 和 padding 。最好事先声明，以避免不必要的麻烦。（常见于导航标签和内容列表）
6、作为外部 wrapper 的 div 不要定死高度，最好还加上 overflow: hidden ，以达到高度自适应。
7、关于手形光标。 cursor: pointer ，而 hand 只适用于 IE。
8、至于IE5以及其他浏览器就没有必要兼顾了，在这上面花时间不值得。
下面这段可执行的码可以很形象的说明问题...当然前提是你有IE6 IE7和火狐浏览器...
不过我还是没有研究透...需要注意的是...在<body>标签里加了 lang="zh" 的定义...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>通过CSS Hack 区分 FX/IE7/IE6/IE5.5/IE5</title>
<style type="text/css">
<!--
#fx {
display: none;
border: 3px double #999;
width:300px;
height:200px;
padding:10px;
}
#ie6{
display:none !important;
display:none;
font-size:54px;
border:10px solid #CCC;
padding:100px;
}
#ie6{
display:block;
display :none;
}
#ie7 {
display:block !important;
display:none;
background-color:#69f;
border:1px dashed #63c;
padding:50px;
width:200px;
height:150px;
}
*:lang(zh) #ie7{
display:none !important;
}
*:lang(zh) #fx{
display:block !important;
}
-->
#example{color:red ;}
* html #example{color:blue;}
*+html #example{color:green;}
</style>
</head>
<body lang="zh">
<div id="fx">这是在 FireFox 或者 Opera 下面的效果</div>
<div id="ie6">这是在 IE 6 下面的效果</div>
<div id="ie7">这是在 IE 7 下面的效果</div>
<div>以下为简单区分FF/IE6/IE7示例</div>
<div id="example">这行文字在FF下应为红色，在IE6下应为蓝色，在IE7下应为绿色。</div>
</body>
</html>
2.div+css实现类似圆角表格效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div+css实现类似圆角表格效果</title>
<style type="text/css">
.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}
.b1,.b2,.b3,.b1b,.b2b,.b3b{height:1px;}
.b2,.b3,.b4,.b2b,.b3b,.b4b,.b{border-left:1px solid #999;border-right:1px solid #999;}
.b1,.b1b{margin:0 5px;background:#999;}
.b2,.b2b{margin:0 3px;border-width:2px;}
.b3,.b3b{margin:0 2px;}
.b4,.b4b{height:2px;margin:0 1px;}
.d1{background:#F7F8F9;}
</style>
</head>
<body>
<div>
<b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b>
<div class="b d1">
<a href="http://www.365css.cn">div+css</a>实现类似圆角表格效果 www.365css.cn </div>
<b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b>
</div>
</body>
</html>
1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：
#1 { color: #333; }
* html #1 { color: #666; }
*+html #1 { color: #999; }
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。
2 css布局中的居中问题
主要的样式定义如下：
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
3 盒模型不同解释.
#box{
width:600px;
//for ie6.0- w\idth:500px;
//for ff+ie6.0
}
#box{
width:600px!important
//for ff
width:600px;
//for ff+ie6.0
width :500px;
//for ie6.0-
}
4 浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;
5 IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6 页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：
然后CSS这样设计：
#container{
min-width: 600px;
width:e-xpression(document.body.clientWidth < 600? "600px": "auto" );
}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
7 清除浮动
.hackbox{
display:table;
//将对象作为块元素级的表格显示
}
或者
.hackbox{
clear:both;
}
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦的
......#box:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
8 DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}
HTML代码
<DIV id=box>
<DIV id=left></DIV>
<DIV id=right></DIV>
</DIV>
9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{}
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
10 IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
11 高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用
margin 或paddign 时。例：
<div id="box">
<p>p对象中的内容</p>
</div>
CSS：
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
本文来自: 脚本之家(www.jb51.net) 详细出处参考：http://www.jb51.net/article/11297.htm
分享到：
相关推荐
以下是一些解决IE6、IE7、IE8和Firefox兼容性问题的方法和知识点： 1. **条件注释和doctype声明**： 在HTML中，可以使用条件注释（Conditional Comments）来针对特定版本的IE应用特定的CSS或脚本。例如，`...
利用`*`和`_`，可以实现对IE6、IE7与Firefox的样式区分： ```css #divcss5 { background: blue; /* Firefox背景变蓝色 */ *background: black; /* IE7背景变黑色 */ _background: orange; /* IE6背景变橘色 */ }...
### CSS解决IE6、IE7及Firefox兼容性问题详解 #### 一、引言 随着互联网技术的发展，浏览器种类日益增多，其中Internet Explorer (IE) 和 Firefox 是早期非常流行的两款浏览器。尤其在2000年代中期，IE6、IE7 和 ...
本篇将主要探讨JavaScript在Internet Explorer (IE) 和Firefox之间的兼容性挑战，并通过给出的文件名列表解析这些测试用例所涉及的知识点。 1. **createDocument测试.html** 在IE和Firefox中，创建XML文档的方法...
本文将重点探讨IE6、IE7以及Firefox之间的CSS兼容性写法，帮助开发者更好地解决实际项目中的兼容性问题。 #### 二、CSS Hack技术概述 为了确保网页在不同浏览器中的表现一致，开发者常常会采用一种名为“CSS Hack”...
CSS 兼容大全是指在不同的浏览器中，例如 IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari 等，如何使网页正常显示的技术。这个技术的核心是 CSS Hack，即针对不同的浏览器写不同的 CSS 代码，使得网页在不同的浏览器中都能...
本文将深入探讨“IE FIREFOX兼容性测试”这一主题，旨在帮助开发者更好地理解和解决不同浏览器间存在的兼容性问题。 首先，我们来理解标题“IE FIREFOX兼容性测试”的含义。这指的是针对Internet Explorer（IE）和...
本文将针对Javascript在IE与Firefox中的兼容性问题进行深入探讨，并提供一系列解决方案。 #### 一、关键兼容性问题及解决方法 ##### 1. 文本内容获取与修改 **问题描述**：IE浏览器支持`innerText`属性来获取和...
然而，由于不同的浏览器对JavaScript的支持程度和实现方式存在差异，尤其是Internet Explorer（IE）和Firefox这两款流行浏览器，开发者经常需要面对兼容性问题。以下是一些常见的JavaScript在IE和Firefox上的兼容性...
特别是在早期的Web时代，Internet Explorer（简称IE）与Mozilla Firefox（简称火狐）这两款浏览器之间存在着显著的差异，这使得页面设计师不得不花费大量时间去解决它们之间的兼容性问题。本文将详细介绍如何使网站...
标题提到的"兼容IE6,IE7,IE8和Firefox的图片上传预览效果"直指浏览器兼容性问题，这是一个在过去很长一段时间内困扰开发者的关键挑战。由于早期的Internet Explorer（IE6, IE7, IE8）对现代Web标准的支持不足，而...
以上所述只是部分解决`div+css`在IE6-9和Firefox兼容性问题的方法，实际开发中可能还需要针对具体情况进行调整。不断学习和实践，才能更好地掌握兼容性问题的解决技巧。阅读提供的资料如"十年积累)div+css 完全兼容...
以下是一些常见的JavaScript在IE和Firefox中的兼容性问题及解决方案： 1. **document.form.item问题** - 在IE中，可以通过`document.formName.item("itemName")`来访问表单元素，但在Firefox中不支持。推荐使用...
### IE与Firefox兼容性问题详解 #### 一、概述 在网页开发过程中，浏览器兼容性问题一直是前端开发者面临的重要挑战之一。尤其是对于早期版本的Internet Explorer（简称IE）与Mozilla Firefox（简称Firefox）来说...
### 解决多浏览器下IE6、IE7及Firefox中`<li>`元素间距兼容...通过以上方法，我们可以有效地解决多浏览器下尤其是IE5、IE5.5、IE6、IE7及Firefox中`<li>`元素间距兼容性问题，确保页面在各种浏览器中的一致性和美观性。
在网页设计中，CSS（层叠样式表）的兼容性问题常常困扰着开发者，尤其是在处理IE6.0、IE7.0与Firefox等不同浏览器之间的差异。以下是一些解决这些浏览器间CSS兼容问题的方法： 1. **DOCTYPE声明**：DOCTYPE声明会...
然而，在实际应用中，由于不同浏览器的解析和渲染机制存在差异，尤其是在IE（Internet Explorer）和Firefox之间，这种差异可能导致兼容性问题。以下是对这些兼容性问题的详细梳理和解决策略。 1. **盒模型差异** -...
这里我们将深入探讨标题中提到的`ie6`到`ie10`以及`Firefox`和`Google Chrome`浏览器的兼容性问题，以及它们所基于的`Gecko`和`WebKit`内核。 首先，`IE6`至`IE10`是微软公司推出的一系列Internet Explorer浏览器，...
IE（Internet Explorer）浏览器和Firefox浏览器作为市场上较为流行的两种浏览器，在处理CSS样式时存在一些差异，导致开发者在进行网页布局时可能会遇到兼容性问题。本文将详细探讨IE浏览器和Firefox浏览器之间的兼容...
浏览器兼容性问题一直是前端开发中的一个痛点，尤其是在处理老版本的 Internet Explorer（IE6、7、8）和 Firefox 等浏览器时。这些浏览器对于 CSS 规则的解析和执行存在差异，导致开发者需要采取一些特定的“hack”...