浏览器之间 区别_百度知道
浏览器之间 区别
不同的浏览器的区别到底是什么啊？ 如果我用网页看时视频不同的浏览器会给相应的加速吗？我希望回答的专业些 分我自然会给 如果没用的话 我会选择无满意答案 这样将来再有遇到同样问题的人就不会有迷惑 谢谢 非诚勿扰
我有更好的答案
介绍5种主流的浏览器之间的区别　　1. IE8.0　　经典之作，它以与windows融为一体的界面给人的视觉非常好，但是它的速度较慢，但也不是太慢，用得不让你蛋疼，另外就是它不支持第三方插件，它的插件叫做加速器，只有微软自己提供的，作用当然也就很小了，对于我们中国用户，那几乎就是没用，所以，我一般都是禁用所有加速器。IE9是新出来的，界面非常简洁，功能当然也就小了，这也与它只是测试版有关，正式版还没有出来，所以，这里不作评论，你也不要用，用着看看可以。　　下面几个浏览器都是非IE内核的，也就是说，不是像搜狗，360那些浏览器只是给IE换了个马甲加了几个附加功能。它们有自己的内核，也就是自己的代码处理机制，比IE快是必然的，也是毫无疑问的。但是，目前国内好多网站都是用针对IE内核的写法写的，因为IE对代码规格要求十分不严格，所以，写出来的网站，多数功能强大的网站，在非IE内核的高速浏览器中出现了不兼容情况，也就是说，不显示东西，或者显示不正常，或者按键无反应，或者不能下载东西，等等。所以，后来出现了IE插件，也就是说，你在用非IE内核浏览器看网页的时候，如果出现了不兼容，你可以用浏览器上的IE插件，让浏览器临时用IE内核浏览，但是，你得重新登陆那个网站，这样显得比较乱。　　2. 谷歌浏览器(Chrome)　　如今，Chrome 已进入版本 2，并继续如火如荼地发展。它的浏览器作为平台的想法很吸引人，就速度，设计以及内置开发工具而言，它是个很好的浏览器。 在让 Chrome 成为一个不错的浏览器的众多因素中，最主要的一个是它的内部设计，多标签，每个标签使用独立的 Windows 进程，任何一个标签的崩溃不会影响到别的标签，在先进多核系统中，这些标签或窗口运行十分流畅。　　IE 的类似功能也出来一些时日了，尽管实现方式有别，Firefox 也在向这个方向努力，但仍在计划阶段， Chrome 是个好浏览器，但它的真正目的是成为一个平台，Google 希望籍此发行那些不必依赖特定 OS 的 Web 引用，如 Gmail, Google Docs 等，在这个方向上，它最好的功能都是面向开发者的，它的 JavaScript 引擎，尤其是它的 Web 页面对象探测器，你可以直接为页面中的对象设置属性，并立即看到结果或与之交互。　　Chrome 下一个版本的 Beta 版已经大体上稳定，不过比起正式版仍有些粗糙，它的速度非常可观，Chrome 最新的 Beta 3 比 Chrome 2 快了30%。到目前为止，Chrome 最弱的地方是缺乏 Firefox 以及 IE 那样的扩展，不过，鉴于 Chrome 核心技术将用来构建 Google 操作系统，我们也不愁看不到其扩展遍地开花的那一天，如果你是 Google 的粉丝，而且并不需要那些 Firefox 扩展，那 Chrome 很值得一看。　　3. 火狐浏览器(Firefox)　　Firefox 最吸引人的地方是它庞大的第三方扩展库，这使 Firefox 变成一个平台。　　比如 Greasemonkey，通过编写一些脚本改变网页的行为，其它实用的 Firefox 扩展包括 Twitterfox, Yoono, FireFTP, NoScript 等等。从 3.0 到 3.5， Firefox 开发团队实现了众多改进，更快递渲染速度，更稳定的运行，更快更智能的 JavaScript。Firefox 的弱项是其内置的开发工具不够强大，只有一个 JavaScript 控制台与错误窗口，不过可以很容易通过第三方扩展，如 Firebug 实现，Firefox 的理念是将周边功能尽可能留给第三方扩展去做，而保持自身尽可能小巧。Firefox 获得忠诚度的方法是对传统的浏览方式做了细致入微的改进，比如，在地址栏输入地址，Firefox 会从浏览历史或书签中很准确地帮你完成完整地址，很多人喜欢在地址栏输入几个字母直接进入网站。　　4.Opera　　尽管 Opera 市场份额很小，仍有一个非常忠实的粉丝群，很难说为什么，它很快，干净，兼容，还包含一些让人喜出望外的小功能。 Opera 最值得一提的是他们为那些拥有低带宽，慢电脑的人所作的努力，他们是 Opera 最大的粉丝，而每个 Opera 的新版本都包含一些让他们爱不释手的功能，如 Trubo 功能可以让那些需要高带宽的网站在 Opera 的代理服务器那里重新处理，变成低带宽以实现快速浏览，虽然会降低图片质量，但你可以很容易让浏览器重新加载原始高质量图片。　　打开 Opera, 不浏览任何网站，首页会显示你最近浏览过的9个站点的缩略图，这个功能 Chrome 和 Safari 也有，但 Opera 是最早这样做的，另外， Opera 好像也是最早实现标签式浏览的浏览器。在实际浏览中，地址栏会显示详细的进度状况，我们可以籍此知道现在在加载什么内容，如果某项内容卡住，我们会很清楚它是什么。　　它的书签管理也可圈可点，可以在书签中全局搜索或者接在地址栏输入，象 Firefox 一样，Opera 也没有标签式书签，但书签可以命名别称，在地址栏输入地址的时候，也可以使用别称。书签还可以按字母顺序排序，或按你实际拖放数序排序。接着，是众多的小功能，弹出窗口默认是弹出到新标签的，而不是新窗口，在访问那些喜欢弹窗的网站时这可以防止你的桌面变得乱七八糟。　　内置的 BT 支持可以直接在 Opera 中 BT 下载，Opera 使用 widgets 实现对内核功能的扩展，我本人喜欢 Google Translator gadget，在访问 Amazon.co.jp 的时候，这很有用。目前 Opera 10 已经推出，可以和 Opera 9 共存。.　　5. Safari浏览器　　苹果的 Safari 可谓一个另类，一个从苹果移植到 Windows 的浏览器，尽管并没有多少人有这样的需求。它的金属拉丝风格的界面后面，零零星星的总有那么一些别的浏览器应该借鉴的东西，但总体上让人印象并不深刻。　　首先，它的 “Top Sites”功能类似 Chrome 的首页缩略图，但使用 3D 技术看上去很酷，在查看浏览历史的时候，同样漂亮的 3D 风格的界面也很漂亮，对于那些只记得网站的样子，但忘记了网站名字的人来说，这很实用。　　其它的一些功能则很鸡肋，尤其是跟 Firefox 与 Chrome 相比，它的书签管理，虽然有全局搜索，很不好用，你甚至无法直接右击一个书签给它改名。从 Firefox 导入书签功能也很鸡肋，导入功能居然不在书签管理中，却放在“文件”菜单下，Safari 在导入书签的时候，还莫名其妙地把一些书签的名字搞乱了。
风险评估家
浏览器应该从以下方面比较：1、速度——打开网页的速度2、资源占用率——占用CPU和内存的程度，分单页和多页比较3、安全性——抵御和拦截木马、恶意网页的能力4、内容展现——完整展现网页布局、元素、脚本的能力5、插件扩展——自由扩展功能插件的能力6、广告拦截功能——自定义拦截广告及其他内容的能力7、个人需要——其他一些根据个人需要的功能决定这些功能之间差异的，首先是浏览器的内核，比如速度、资源占用、安全性；其次是浏览器外壳的扩展功能，比如插件、广告拦截、个人需要。目前使用独立内核的主流浏览器有：IE、Chrome、Opera、Firefox，而国内的众多浏览器基本上都是在它们的内核上编写的外壳，主要是使用IE内核。IE内核公认是速度最慢、安全性最低的内核，但它在内容展现上应该是最好的（对于国内网站），主要原因是IE的普及度最高。在速度上，Chrome、Opera都是名副其实的极速（相对于那些号称极速的外壳浏览器来说），其中Chrome速度要更快一点。在资源占用上，单页面两者都差不多，但多页面（开多个网页）上明显是Opera更有优势。Firefox速度比不上前两者，资源占用不如Opera低，可能比Chrome好一点。但Firefox的插件扩展能力比前两者强，特别对于程序开发人员来说，它在这方面有优势。在安全性上，这三者都明显优于IE内核，Firefox曾经就以安全性来作宣传。Chrome采用了一种沙盒技术，安全性上也表现不俗。我个人觉得Opera在安全性上也很不错。广告拦截方面，对于非IE内核来讲，Opera应该是最好的，可以自定义拦截内容。Firefox有这方面的插件，实际上它的很多功能是要靠插件才能实现的。Chrome没有多少设置选项，也要靠插件。其他的方面根据个人需要进行选择，个人推荐Opera，其次Chrome。至于IE内核的浏览器，我倾向于作为次要浏览器使用，用来浏览一些必须使用IE浏览器的网站，推荐使用GreenBrowser。 PS.今天把Opera升级到11.10，感觉速度又快了不少，强烈建议使用Opera！
本回答被提问者采纳
qq浏览器 等一些国内的浏览器都是采用 IE内核
也就是说 用这些浏览器 就是用 IE火狐 (firefox)
谷歌浏览器
和 ie 浏览器三者之间 截然不同
火狐浏览器 稳定性 比后面2个强ie是微软自家产品很多功能和系统结合很好 但是
ie和谷歌浏览器的 稳定性不是很好
网页开多了就会出现卡机的现象谷歌就是界面简介， 火狐和谷歌的扩展性能很好
而 ie 基本没有扩展新能如果是平时使用的 话
内存占用比较多 而且 启动时 速度比前2这都要慢
如果您感到满意 请采纳
很多浏览器速度真的不行、还会卡、然后功能不多
其他1条回答
为您推荐：
其他类似问题
浏览器的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。火狐与IE浏览器之间的一些差别_百度文库
您的浏览器Javascript被禁用，需开启后体验完整功能，
享专业文档下载特权
&赠共享文档下载特权
&10W篇文档免费专享
&每天抽奖多种福利
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
火狐与IE浏览器之间的一些差别
&&火狐与IE浏览器之间的一些差别
你可能喜欢火狐与IE浏览器之间的一些差别收集 - 冰危节奏 - 博客园
随笔 - 53, 文章 - 180, 评论 - 29, 引用 - 0
一、IE与FireFox的js和css
png透明 AlphaImageLoader
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod=sSize,src=sURL)
enabled：可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true：默认值。滤镜激活。false：滤镜被禁止。
sizingMethod：可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。crop：剪切图片以适应对象尺寸。image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。scale：缩放图片以适应对象的尺寸边界。
src：必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
firefox不能对innerText支持
firefox支持innerHTML但却不支持innerText，它支持textContent来实现innerText，不过默认把多余的空格也保留了。如果不用textContent，如果字符串里面不包含HTML代码也可以用innerHTML代替。
禁止选取网页内容
在IE中一般用js：obj.onselectstart=function(){}
而firefox用CSS:-moz-user-select:none
滤镜的支持(例：透明滤镜)
IE:filter：alpha(opacity=10);
firefox：-moz-opacity:.10;
IE：obj.setCapture() 、obj.releaseCapture()
Firefox：document.addEventListener(”mousemove”,mousemovefunction,true);
document.removeEventListener(”mousemove”,mousemovefunction,true);
获取鼠标位置
IE:event.clientX、event.clientY
firefox：需要事件函数传递事件对象
obj.onmousemove=function(ev){
X= ev.pageX;Y=ev.pageY;
DIV等元素的边界问题
比如：设置一个div的CSS:：{width:100height:100border:#}
IE中：div的宽度（包括边框宽度）：100px，div的高度（包括边框宽度）：100px；
而firefox：div的宽度（包括边框宽度）：102px，div的高度（包括边框宽度）：102px；
判断浏览器类型
var isIE=document.all ? true :
我写了一个变量，如果支持document.all语法那么isIE=true，否则isIE=false
在不同浏览器下的CSS处理
一般可以用!important来优先使用css语句（仅firefox支持）
比如：{border-width:0px!border-width:1}
在firefox下这个元素是没有边框的，在IE下边框宽度是1px
document.formName.item(”itemName”) 问题
问题说明：IE下，可以
使用 document.formName.item(”itemName”) 或 document.formName.elements
[”elementName”]；Firefox下，只能使用document.formName.elements[”elementName”]。
解决方法：统一使用document.formName.elements[”elementName”]。
集合类对象问题
问题说明：IE下，可以使用()或[]获取集合类对象；Firefox下，只能使用[]获取集合类对象。
解决方法：统一使用 [] 获取集合类对象。
自定义属性问题
问题说明：IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox下，只能使用 getAttribute() 获取自定义属性。
解决方法：统一通过 getAttribute() 获取自定义属性。
eval(”idName”)问题
问题说明：IE下，可以使用 eval(”idName”) 或
getElementById(”idName”) 来取得 id 为 idName 的HTML对象；Firefox下，只能使用
getElementById(”idName”) 来取得 id 为 idName 的HTML对象。
解决方法：统一用 getElementById(”idName”) 来取得 id 为 idName 的HTML对象。
变量名与某HTML对象ID相同的问题
问题说明：IE下，HTML对象的ID可以作为 document 的下属对象变量名直接使用，Firefox下则不能；Firefox下，可以使用与HTML对象ID相同的变量名，IE下则不能。
解决方法：使用 document.getElementById(”idName”) 代替 document.idName。最好不要取HTML对象ID相同的变量名，以减少错误；在声明变量时，一律加上var关键字，以避免歧义。
问题说明：Firefox下，可以使用const关键字或var关键字来定义常量；IE下，只能使用var关键字来定义常量。
解决方法：统一使用var关键字来定义常量。
input.type属性问题
问题说明：IE下 input.type 属性为只读；但是Firefox下 input.type 属性为读写。
解决办法：不修改 input.type 属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素。
window.event问题
问题说明：window.event 只能在IE下运行，而不能在Firefox下运行，这是因为Firefox的event只能在事件发生的现场使用。
解决方法：在事件发生的函数上加上event参数，在函数体内(假设形参为evt)使用 var myEvent = evt?evt:(window.event?window.event:null)
示例：&input type=”button” onclick=”doSomething(event)”/&
&script language=”javascript”&
function doSomething(evt) {
var myEvent = evt ? evt: (window.event ? window.event : null)
event.x与event.y问题
问题说明：IE下，even对象有x、y属性，但是没有pageX、pageY属性；Firefox下，even对象有pageX、pageY属性，但是没有x、y属性。
解决方法：var myX = event.x ? event.x : event.pageX;var myY = event.y ? event.y:event.pageY;
如果考虑第8条问题，就改用myEvent代替event即可。
event.srcElement问题
问题说明：IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。
解决方法：使用srcObj = event.srcElement ? event.srcElement : event.
如果考虑第8条问题，就改用myEvent代替event即可。
window.location.href问题
问题说明：IE或者Firefox2.0.x下，可以使用window.location或window.location.href；Firefox1.5.x下，只能使用window.location。
解决方法：使用 window.location 来代替 window.location.href。当然也可以考虑使用 location.replace()方法。
模态和非模态窗口问题
问题说明：IE下，可以通过showModalDialog和showModelessDialog打开模态和非模态窗口；Firefox下则不能。
解决方法：直接使用 window.open(pageURL,name,parameters) 方式打开新窗口。
果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用window.opener来访问父窗口。如果需要父窗口控制子窗口的话，使用var
subWindow = window.open(pageURL,name,parameters);来获得新开的窗口对象。
frame和iframe问题
以下面的frame为例：
&frame src=”xxx.html” id=”frameId” name=”frameName” /&
(1)访问frame对象
IE：使用window.frameId或者window.frameName来访问这个frame对象；
Firefox：使用window.frameName来访问这个frame对象；
解决方法：统一使用 window.document.getElementById(”frameId”) 来访问这个frame对象；
(2)切换frame内容
在IE和Firefox中都可以使用window.document.getElementById(”frameId”).src = “xxx.html”或window.frameName.location = “xxx.html”来切换frame的内容；
如果需要将frame中的参数传回父窗口，可以在frame中使用parent关键字来访问父窗口。
body载入问题
问题说明：Firefox的body对象在body标签没有被浏览器完全读入之前就存在；而IE的body对象则必须在body标签被浏览器完全读入之后才存在。
[注] 这个问题尚未实际验证，待验证后再来修改。
[注] 经验证，IE6、Opera9以及FireFox2中不存在上述问题，单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素，即使这个元素还没有载入完成。
事件委托方法
问题说明：IE下，使用 document.body.onload =其中function inject()在这之前已被实现；在Firefox下，使用 document.body.onload = inject();
解决方法：统一使用 document.body.onload=new Function(”inject()”);或者 document.body.onload = function(){/* 这里是代码 */}
[注意] Function和function的区别
访问的父元素的区别
问题说明：在IE下，使用 obj.parentElement 或 obj.parentNode 访问obj的父结点；在firefox下，使用 obj.parentNode 访问obj的父结点。
解决方法：因为firefox与IE都支持DOM，因此统一使用obj.parentNode 来访问obj的父结点。
cursor:hand VS cursor:pointer
问题说明：firefox不支持hand，但ie支持pointer ，两者都是手形指示。
解决方法：统一使用pointer。
innerText的问题
问题说明：innerText在IE中能正常工作，但是innerText在FireFox中却不行。
解决方法：在非IE浏览器中使用textContent代替innerText。
if(navigator.appName.indexOf(”Explorer”) &-1){
document.getElementById(”element”).innerText = “my text”;
document.getElementById(”element”).textContent = “my text”;
[注] innerHTML 同时被ie、firefox等浏览器支持，其他的，如outerHTML等只被ie支持，最好不用。
对象宽高赋值问题
问题说明：FireFox中类似 obj.style.height = imgObj.height 的语句无效。
解决方法：统一使用 obj.style.height = imgObj.height + “px”;
Table操作问题
问题说明：ie、firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChild方法也不管用。
解决方法：
//向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement(”td”);
cell.innerHTML = “”;
cell.className = “XXXX”;
row.appendChild(cell);
[注] 由于俺很少使用JS直接操作表格，这个问题没有遇见过。建议使用JS框架集来操作table，如JQuery。
ul和ol列表缩进问题
消除ul、ol等列表的缩进时，样式应写成：list-style:margin:0padding:0
其中margin属性对IE有效，padding属性对FireFox有效。← 此句表述有误，详细见↓
[注] 这个问题尚未实际验证，待验证后再来修改。
经验证，在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在Firefox
中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list-style:none才
能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、
padding:0px以及list-style:none三项才能达到最终效果。
CSS透明问题
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
[注] 最好两个都写，并将opacity属性放在下面。
CSS圆角问题
IE：ie7以下版本不支持圆角。
FF：-moz-border-
radius:4px，或者-moz-border-radius-topleft:4-moz-border-
radius-topright:4-moz-border-radius-bottomleft:4-moz-border-
radius- bottomright:4。
[注] 圆角问题是CSS中的经典问题，建议使用JQuery框架集来设置圆角，让这些复杂的问题留给别人去想吧。
二、IE6/IE7和Firefox对Div处理的差异
基本HTML代码
&!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“-transitional.dtd”&
&html xmlns=”” &
&title&Div Float Sample&/title&
&style type=”text/css”&
div { margin:3 }
.d1 { width:250 min-height:20 border:1px solid #00cc00; }
.d2 { width:130 min-height:40 border:1px solid #0000 }
.d3 { width:100 min-height:40 border:1px solid #cc0000; }
&div class=”d1″&
&div class=”d2″& &/div&
&div class=”d3″& &/div&
以上代码显示的结果如下，很正常，结果相同。
当然所有这些情况也许是有合理解释的，说不定增加某一个style的设置。
下面会在这个基础上进行修改，修改的内容都在style中，其他代码就不再重复写了。
请注意，这里的Style中用到了min-height，这个和height是不同的，min-height指定了对象的一个最小高度，当对象的子
内容高度超过这个最小高度是，这个对象会自动撑大。这是一个非常牛的style，可惜的是，在这个style和float这个同样牛的style一起使用
的时候，就会出现各种问题。
内部一个Div修改成为float:left
.d1 { width:250 min-height:20 border:1px solid #00cc00; }
.d2 { width:130 min-height:40 border:1px solid #0000 float: }
.d3 { width:100 min-height:40 border:1px solid #cc0000; }
显示结果如下。
显示结果如下，显示结果如下！
显示结果如下。:left的情况相同？
这个结果中，Firefox有点离谱了，两个框叠在一起也就罢了，为什么那个红框会变大捏？而且变的大小也很诡异，不知道是按照什么公式计算出来的。IE在这里的显示应当是附和标准的。
内部两个Div都修改成为float:left
.d1 { width:250 min-height:20 border:1px solid #00cc00; }
.d2 { width:130 min-height:40 border:1px solid #0000 float: }
.d3 { width:100 min-height:40 border:1px solid #cc0000; float: }
这和前面第一种加float:left的情况相同。
显示结果如下。
在这种情况下，Firefox的结果尚能解释，可能是float把外层的Div也作为内层float影响的范围，这样内层的就不会将外层的Div撑大了。IE在这里出现了Margin失效的情况，可以解释为内层第二个float造成了影响。
干脆把外层的Div也修改成为float:left
.d1 { width:250 min-height:20 border:1px solid #00cc00; float: }
.d2 { width:130 min-height:40 border:1px solid #0000 float: }
.d3 { width:100 min-height:40 border:1px solid #cc0000; float: }
以上代码在下面这些Doctype下试验过，结果相同。
显示结果如下，
这种情况下，Firefox正常了，而IE延续了前面的不正常情况。
外层是float:left，内层最后一个不再float:left
.d1 { width:250 min-height:20 border:1px solid #00cc00; float: }
.d2 { width:130 min-height:40 border:1px solid #0000 float: }
.d3 { width:100 min-height:40 border:1px solid #cc0000; }
left的情况相同。所以最好是padding和margin都不用?
显示结果如下，
IE在这里的显示应当是附和标准的。
这和前面第一种加float:left的情况相同。
再重申一次，本文讨论的是一个比较高级的话题。如果在style中用height而不是min-height来设定高度，是不会出现以上这些问题的。不过，不用min-height就失去了div自动撑大这一个很有必要的特性。
在min-height和float:left的情况下，没有一种完美的写法让Firefox和IE结果相同。不过仍然可以发现绕开的方法。
进一步试验可以发现，margin遭到的影响在padding上比较好，所以最好是padding和margin都不用，或者只用padding。
两者相同的代码如下，
div { padding:3 }
.d1 { width:250 min-height:20 border:1px solid #00cc00; float: }
.d2 { width:130 min-height:40 border:1px solid #0000 float: }
.d3 { width:100 min-height:40 border:1px solid #cc0000; float: }
left的情况相同。当对象的子内容高度超过这个最小高度是。
显示结果如下，
呵呵，总算是一样了，虽然是凑合着一样了。幸好一样了，否则只好用table了。
当然所有这些情况也许是有合理解释的，说不定增加某一个style的设置，这些问题都迎刃而解了，不过目前我还没有找到这个设置。
关于Doctype
可惜的是，在这个style和float这个同样牛的style一起使用的时候。
以上代码在下面这些Doctype下试验过，结果相同。
&!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
&!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
&!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“-strict.dtd”&
&!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“-transitional.dtd”&
三、CSS完美兼容IE6/IE7/FF的通用方法
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助.
一、CSS HACK
以下两种方法几乎能解决现今所有HACK.
1, !important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
2, IE6/IE77对FireFox
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
*+html 对IE7的HACK 必须保证HTML顶部有如下声明：
二、万能 float 闭合
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.
三、其他兼容技巧
1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0(当然不是万能)
3, 若需给 a 标签内内容加上 样式, 需要设置 display:(常见于导航标签)
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.
1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，
但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针
对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。
2 css布局中的居中问题
主要的样式定义如下：
body {TEXT-ALIGN:}
#center { MARGIN-RIGHT: MARGIN-LEFT: }
首先在父级元素定义TEXT-ALIGN:这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:MARGIN-LEFT: ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，
只要在每个拆出的div里定义MARGIN-RIGHT:MARGIN-LEFT: 就可以了。
3 盒模型不同解释
#box{ width:600 //for ie6.0- w\idth:500 //for ff+ie6.0}
#box{ width:600px!important //for ff width:600 //for ff+ie6.0 width /**/:500 //for ie6.0-}
4 浮动ie产生的双倍距离
#box{ float: width:100 margin:0 0 0 100 //这种情况之下IE会产生200px的距离 display: //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{ display: //可以为内嵌元素模拟为块元素 display: //实现同一行排列的的效果 diplay:
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，
正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{ width: 80 height: 35}html&body #box{ width: height: min-width: 80 min-height: 35}
6 页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，
而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个
放到 标签下，然后为div指定一个类：
然后CSS这样设计：
#container{ min-width: 600 width:expression(document.body.clientWidth & 600? &600px&: &auto& );}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
7 清除浮动
.hackbox{ display: //将对象作为块元素级的表格显示}或者.hackbox{ clear:}
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，
所 以并不影响到IE/WIN浏览器。这种的最麻烦的......#box:after{ content: &.&; display: height: 0; clear: visibility:}
8 DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{ float: width:800}#left{ float: width:50%;}#right{ width:50%;}*html #left{ margin-right:-3 //这句是关键}
9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)
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 时。
p对象中的内容
CSS：#box {background-color:# }
#box p {margin-top: 20margin-bottom: 20 text-align: }
解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0overflow:}或者为DIV加上border属性。
六、CSS兼容要点分析IE vs FF
CSS 兼容要点：
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: 将行距增加到和整个DIV一样高 line-height:200 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格XHTML+CSS兼容性解决方案小集
使用XHTML＋CSS构架好处不少，但也确实存在一些问题，不论是因为使用不熟练还是思路不清晰，我就先把一些我遇到的问题写在下面，省的大家四处找^^
1、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：
div{margin:30px!margin:28}
注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：
div{maring:30margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!
2、IE5 和IE6的BOX解释不一致IE5 下div{width:300margin:0 10px 0 10}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则 是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改
div{width:300px!width /**/:340margin:0 10px 0 10px}
，关于这个/**/是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）
3、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
ul{margin:0;padding:0;}
就能解决大部分问题
4、关于脚本，在xhtml1.1中不支持language属性，只需要把代码改为
& type=&text/java&&
七、10个你未必知道的CSS技巧
1、CSS字体属性简写规则
一般用CSS设定字体属性是这样做的：
font-weight:
font-style:
font-varient:small-
font-size:1
line-height:1.5
font-family:verdana,sans-
但也可以把它们全部写到一行上去：
font: bold italic small-caps 1em/1.5em verdana,sans-
真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。
2、同时使用两个类
一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：
同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。
补充：对于一个ID，不能这样写
也不能这样写
3、CSS border的缺省值
通常可以设定边界的颜色，宽度和风格，如：
border: 3px solid #000
这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。
如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。
4、CSS用于文档打印
许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。
也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：
第1行就是显示，第2行是打印，注意其中的media属性。
但应该在打印 CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。
5、图片替换技巧
一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。
比如你想整个卖东西的图标，你就用了这个图片：
这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：
Buy widgets
但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：
h1 { background: url(/blog/widget-image.gif) no- height: image height text-indent: -2000px }
注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。
6、CSS box模型的另一种调整技巧
这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：
#box { width: 100 border: 5 padding: 20px }
这样调用它：
这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。
但用CSS也可以达到同样的目的，让它们显示效果一致。
#box { width: 150px } #box div { border: 5 padding: 20px }
这样调用：
这样，不管什么浏览器，宽度都是150点了。
7、块元素居中对齐
如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：
#content { width: 700 margin: 0 auto }
来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下：
body { text-align: center } #content { text-align: width: 700 margin: 0 auto }
这会把网页内容都居中，所以在Content中又加入了
text-align: left 。
8、用CSS来处理垂直对齐
垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。
CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。
9、CSS在容器内定位
CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：
#container { position: relative }
这样容器内所有的元素都会相对定位，可以这样用：
如果想定位到距左30点，距上5点，可以这样：
#navigation { position: left: 30 top: 5px }
当然，你还可以这样：
margin: 5px 0 0 30px
注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。
10、直通到屏幕底部的背景色
在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：
#navigation { background: width: 150px }
较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？
不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。
body { background: url(/blog/blue-image.gif) 0 0 repeat-y }
此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。