网页制作之浏览器各大兼容

合集下载

WEB前端开发必备之浏览器兼容性处理方法大全

WEB前端开发必备之浏览器兼容性处理方法大全在Web前端开发中，浏览器兼容性是一个常见且重要的问题。

不同的浏览器对HTML、CSS和JavaScript的解析和渲染有一些差异，因此我们需要采取一些特定的处理方法来确保我们的代码在不同的浏览器上都能够正确地运行和显示。

1.使用浏览器兼容性前缀：许多CSS属性在不同的浏览器上有不同的前缀，例如"-webkit-"、"-moz-"和"-o-"等。

在使用这些属性时，需要添加适当的前缀以确保在各个浏览器上都能够正确地解析和渲染。

2. 使用CSS Reset：不同的浏览器对元素的默认样式有一些差异，使用CSS Reset可以将这些默认样式重置为统一的值，以便我们在不同的浏览器上呈现相同的效果。

3.引入浏览器兼容性CSS库：有许多流行的CSS库，如Normalize.css和Reset.css，可以自动处理不同浏览器之间的兼容性问题。

通过引入这些库，我们可以简化兼容性处理的工作量。

4. 使用CSS Hack：CSS Hack是一种使用特定的CSS语法来针对特定浏览器写入样式的方法。

例如，可以使用"\*html"来针对IE6编写特定的样式，或者使用"\_property: value"来针对IE7编写特定的样式。

然而，CSS Hack并不推荐使用，因为它会使代码复杂且难以维护。

5. 使用JavaScript兼容性库：有许多流行的JavaScript库，如jQuery和Modernizr，可以自动处理不同浏览器之间的兼容性问题。

这些库提供了一些常用的功能和方法，并通过检测浏览器的能力来提供相应的兼容性支持。

6. 使用Polyfill和Shim：Polyfill和Shim是一种使用JavaScript代码来实现一些浏览器不支持的功能的方法。

通过使用Polyfill和Shim，我们可以在不支持一些功能的浏览器上模拟这些功能，从而实现兼容性支持。

网站制作中遇到的浏览器兼容问题解决方法

网站制作中遇到的浏览器兼容问题解决方法自从Div+CSS布置网站页面的程序走入网站设计制作领域，因自身的优点，不断的得到网站设计制作工作者的青睐。

使用Div+CSS布局网页可以大大缩减页面代码，并且可以很快的提高网页的打开速度，并且能够获得搜索引擎很高的认可。

但是Div+CSS布置网页也有它天生的缺陷，那就是网站与各大主流浏览器的兼容问题，如果不能够解决网站的兼容问题，那么在使用上会给企业带来很大的负面影响。

解决浏览器兼容问题也是程序员或者是网站制作人员必修的一门功课。

作为使用Div+CSS布局网站页面的设计师来说，尤其是新手在写代码时切忌要在IE和FF两个环境下去测试。

Div+CSS布局网站页面造成各大主流浏览器不兼容的问题主要是各个浏览器给CSS程序默认属性值不同而引起的兼容问题。

如何解决网站在各个不同浏览器下的兼容问题呢？有以下五种办法可以解决网站兼容问题；1，通过给CSS写属性值来调整兼容问题。

通过调整一下属性值；body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin:0;pa dding:0;} img{border:0px;} ul {margin:0px;padding:0px;}/ ul li{list-style:none;} 上面的建站常用代码好比是格式化CSS样式，让各浏览器按照我们设置的属性值渲染网页2，微软IE浏览器和火狐浏览器的对象居中问题；IE浏览器下设计师应该知道只要设置body{text-align:center;}这样就可以居中显示。

相同的办法在火狐浏览器上就行不通了。

这里就需要修改成；body:{text-align:center;margin:0px auto;}Margin，而它的意思就是上下距离值为0像素，左右为自动。

所以FF就会居中显示，这样就能够解决IE浏览器与火狐浏览器的兼容问题了。

网页上漂浮的客服代码(漂浮框架兼容各大浏览器)

常见网页上的漂浮客服窗口，是一个漂浮框架，各位可以拿去用。

在chrome、ie、firefox下测试正常。

以下是部分代码（可点击演示查看或直接下载源代码）：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>网站客服漂浮框架（兼容各大浏览器）-网页特效代码()</title><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><style type="text/css">.kfoutbox{position:absolute;z-index:10000;right:5px;margin:0px;width:80px;height:150p x;background:#ff0000;}</style></head><body style="margin:0px;padding:0px;font-size:12px;"><div style="margin:0pxauto;padding-top:200px;width:980px;height:800px;text-align:center;background:#f2f2f2 ;">这里是网页的内容区<br><a href="/">网页特效代码</a></div><div id="kfoutbox" class="kfoutbox"><span id="kfboxclose" style="color:#ffffff">关闭按钮</span></div><script language="javascript">var default_top_ps = 100;var evans_agt = erAgent.toLowerCase();var evans_ie = ((evans_agt.indexOf("msie") != -1) && (evans_agt.indexOf("opera") == -1) && (evans_agt.indexOf("omniweb") == -1));var evans_mymovey = new Number();function evans_IeTrueBody() {return (patMode && patMode != "BackCompat") ? document.documentElement: document.body}function evans_GetScrollTop() {return evans_ie ? evans_IeTrueBody().scrollTop: window.pageYOffset}function evans_heartBeat() {evans_diffY = evans_GetScrollTop();evans_mymovey += Math.floor((evans_diffY -document.getElementById('kfoutbox').style.top.replace("px", "") + default_top_ps) * 0.1); document.getElementById('kfoutbox').style.top = evans_mymovey + "px"}var evans_tmpintval = window.setInterval("evans_heartBeat()", 1);if (document.getElementById('kfboxclose')) {document.getElementById('kfboxclose').onclick = function() {window.clearInterval(evans_tmpintval);document.getElementById('kfoutbox').style.display = 'none'}}var popupdelay = 0;var maxpoptimes = 3;var prepoptime = '10';function Tong_MoveDiv() {this.Move = function(Id, Evt, T) {if (Id == "") {return}var o = document.getElementById(Id);if (!o) {return}evt = Evt ? Evt: window.event;o.style.position = "absolute";o.style.zIndex = 200;var obj = evt.srcElement ? evt.srcElement: evt.target;var w = o.offsetWidth;var h = o.offsetHeight;var l = o.offsetLeft;var t = o.offsetTop;var div = document.createElement("DIV");document.body.appendChild(div);div.style.cssText = "filter:alpha(Opacity=10,style=0);opacity:0.2;width:" + w + "px;height:" + h + "px;top:" + t + "px;left:" + l + "px;position:absolute;background:#000";div.setAttribute("id", Id + "temp");this.Move_OnlyMove(Id, evt, T)};this.Move_OnlyMove = function(Id, Evt, T) {var o = document.getElementById(Id + "temp");if (!o) {return}var evt = Evt ? Evt: window.event;var relLeft = evt.clientX - o.offsetLeft;var relTop = evt.clientY - o.offsetTop;if (!window.captureEvents) {o.setCapture()} else {window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP)}document.onmousemove = function(e) {if (!o) {return}e = e ? e: window.event;var bh = Math.max(document.body.scrollHeight, document.body.clientHeight, document.body.offsetHeight, document.documentElement.scrollHeight,document.documentElement.clientHeight, document.documentElement.offsetHeight);var bw = Math.max(document.body.scrollWidth, document.body.clientWidth, document.body.offsetWidth, document.documentElement.scrollWidth,document.documentElement.clientWidth, document.documentElement.offsetWidth);var sbw = 0;if (document.body.scrollWidth < bw) sbw = document.body.scrollWidth;if (document.body.clientWidth < bw && sbw < document.body.clientWidth) sbw = document.body.clientWidth;if (document.body.offsetWidth < bw && sbw < document.body.offsetWidth) sbw = document.body.offsetWidth;if (document.documentElement.scrollWidth < bw && sbw <document.documentElement.scrollWidth) sbw = document.documentElement.scrollWidth;if (document.documentElement.clientWidth < bw && sbw <document.documentElement.clientWidth) sbw = document.documentElement.clientWidth;if (document.documentElement.offsetWidth < bw && sbw <document.documentElement.offsetWidth) sbw = document.documentElement.offsetWidth;if (e.clientX - relLeft <= 0) {o.style.left = 0 + "px"} else if (e.clientX - relLeft >= bw - o.offsetWidth - 2) {o.style.left = (sbw - o.offsetWidth - 2) + "px"} else {o.style.left = e.clientX - relLeft + "px"}if (e.clientY - relTop <= 1) {o.style.top = 1 + "px"} else if (e.clientY - relTop >= bh - o.offsetHeight - 30) {o.style.top = (bh - o.offsetHeight) + "px"} else {o.style.top = e.clientY - relTop + "px"}};document.onmouseup = function() {if (!o) return;if (!window.captureEvents) {o.releaseCapture()} else {window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP) }var o1 = document.getElementById(Id);if (!o1) {return}var l0 = o.offsetLeft;var t0 = o.offsetTop;var l = o1.offsetLeft;var t = o1.offsetTop;Kf54MyMove.Move_e(Id, l0, t0, l, t, T);document.body.removeChild(o);o = null}};this.Move_e = function(Id, l0, t0, l, t, T) {if (typeof(window["ct" + Id]) != "undefined") {clearTimeout(window["ct" + Id])}var o = document.getElementById(Id);if (!o) return;var sl = st = 8;var s_l = Math.abs(l0 - l);var s_t = Math.abs(t0 - t);if (s_l - s_t > 0) {if (s_t) {sl = Math.round(s_l / s_t) > 8 ? 8 : Math.round(s_l / s_t) * 6 } else {sl = 0}} else {if (s_l) {st = Math.round(s_t / s_l) > 8 ? 8 : Math.round(s_t / s_l) * 6 } else {st = 0}}if (l0 - l < 0) {sl *= -1}if (t0 - t < 0) {st *= -1}if (Math.abs(l + sl - l0) < 52 && sl) {sl = sl > 0 ? 2 : -2}if (Math.abs(t + st - t0) < 52 && st) {st = st > 0 ? 2 : -2}if (Math.abs(l + sl - l0) < 16 && sl) {sl = sl > 0 ? 1 : -1}if (Math.abs(t + st - t0) < 16 && st) {st = st > 0 ? 1 : -1}if (s_l == 0 && s_t == 0) {return}if (T) {o.style.left = l0 + "px";o.style.top = t0 + "px";return} else {if (Math.abs(l + sl - l0) < 2) {o.style.left = l0 + "px"} else {o.style.left = l + sl + "px"}if (Math.abs(t + st - t0) < 2) {o.style.top = t0 + "px"} else {o.style.top = t + st + "px"}window["ct" + Id] = window.setTimeout("Kf54MyMove.Move_e('" + Id + "', " + l0 + " , " + t0 + ", " + (l + sl) + ", " + (t + st) + "," + T + ")", 1)}}};</script></body></html>。

史上最全IE6.IE7.IE9.IE10.谷哥.火狐各浏览器网页兼容性介绍总结

兼，是什么！你会想到是什么，作为一个跟HMTL+CSS打交道的人来说，我只能说，我想到的只有兼容性了，兼容性自始至终困惑着许多人，例如坑爹的IE，是纵多主流浏览器中比较戳的那一个，因BUG手下纵多而闻名，家族几代问题层出不穷。

最坑爹的那个就是IE6，被纵多开发人员包括前端人员所憎恶。

却受许多企业的爱戴。

顺便说一下为什么IE6还在中国活得好好的，IE6是Windows XP中自带的一种浏览器，而Windows XP目前来说是微软开发得比较好也是比较成功的系统，使用人数多。

IE6的稳定性也比较好，目前，大多数企业特别是银行和政府的系统还是使用IE6而不愿升级也是有这方面的原因，IE6之所以盛行当然不只这一些原因，至少IE6什么时候会死那只是时间的问题罢了，在没死之前，我们得保证我们能活着。

好了，接下来来看一下一些兼容性的问题吧，这里只列出数项，日后继续完善。

1.注释引起的血案（1）在注释的时候，如果注释不当，部分浏览器会将会解析错误。

（demo1）如：正常显示；<!-- 这里是注释内容- ->时则在IE浏览器下正常显示，在Chrome、Firefox、Safari下不可显示。

或者->也是如此。

解决方法：在进行注释时切记不要着急，看好是否注释有问题，最好能够用VS中自带的注释，以保万无一失。

详见demo1。

（2）注释引发的血案（demo11）文字溢出：问题见demo11,test1：去掉<div style=”float:left;”></div> 中的“float:left”，就会发现多出来的字不见了，页面正常显示；同样去除<div style=”width:350px;float:right;”>中的“float:right”，多余的字也同样消失，页面正常显示。

分析：文字溢出与区块的浮动有关。

test2：把注释放到<div style=”float:left”></div>前面，多余的字消失，页面正常显示把注释放到<div style=”width:350px;float:right;”>我就只有一行字</div>后面，多余的字也同样消失，页面正常显示。

浏览器兼容性大全

浏览器兼容性浏览器的内核Mozilla Firefox ( Gecko )Internet Explorer ( Trident )Opera ( Presto )Safari ( WebKit )Google Chrome ( WebKit )腾讯TT、世界之窗、360浏览器、遨游浏览器都是给IE加了个外壳，不过如果电脑上装的是ie8的话，这些浏览器还是调用ie7的内核。

搜狗浏览器比较特殊，它有两种浏览模式：一是兼容模式，该模式使用IE内核；二是高速模式，该模式使用WebKit内核。

解决ie7、ie8兼容性最好的办法是在head标签中加入meta 类型<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />，只要IE8一读到这个标签,它就会自动启动IE7兼容模式CSS Hack解决浏览器兼容性问题的主要方法是CSS hack。

由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack,也叫写CSS hack。

CSS Hack的原理是什么由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。

我们就可以根据这个来针对不同的浏览器来写不同的CSS。

比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox 两个都不能认识。

前端开发中的兼容性处理与浏览器兼容列表

前端开发中的兼容性处理与浏览器兼容列表在前端开发中，兼容性处理是一项至关重要的工作。

由于不同浏览器的差异以及不同设备的支持情况，所以要保证网站或应用在各种环境下正常运行，需要对兼容性进行处理。

一、兼容性处理的重要性在现代互联网时代，人们使用各种设备和浏览器来浏览网页或使用应用程序。

浏览器有 Chrome、Safari、Firefox、Internet Explorer、Edge 等，而设备有计算机、手机、平板等。

每个浏览器和设备都有自己的特性和支持程度，所以在进行网页开发时需要对这些差异进行兼容性处理，以确保用户在不同环境下都能正常使用。

如果不进行兼容性处理，网页可能会在某些浏览器或设备上显示异常，用户体验将大打折扣。

二、兼容性处理的方法1. 代码规范和标准编写符合标准的代码可以减少浏览器的差异性带来的影响。

W3C 组织发布的HTML、CSS 和 JavaScript 标准，是在不同浏览器中获得一致性的基础。

开发人员应该编写遵循这些标准的代码，避免使用浏览器私有的属性或方法。

2. 使用浏览器重置样式表不同浏览器对默认样式的处理方式可能存在差异，使用浏览器重置样式表可以消除这些差异，让网页在各个浏览器中的显示情况更加一致。

3. CSS Hack在某些情况下，可能需要使用 CSS Hack 来针对不同浏览器写不同的样式。

CSS Hack 是一种根据浏览器特殊属性或特殊写法来实现对不同浏览器的兼容性处理的技巧。

但是，使用 Hack 会增加代码的可读性和维护性的难度，所以应该尽量避免使用。

4. 使用媒体查询媒体查询可以根据设备的屏幕大小和特性来加载不同的 CSS 样式，从而实现针对不同设备的兼容性处理。

通过媒体查询，可以对手机、平板和电脑等设备进行适配，提升用户体验。

三、浏览器兼容列表虽然各种兼容性处理可以尽量减少在不同浏览器上的差异，但我们仍然需要关注各浏览器的市场份额以及不同版本的差异，以确定需要兼容的浏览器范围。

制作网页时的跨浏览器兼容性处理方法

制作网页时的跨浏览器兼容性处理方法在制作网页时，跨浏览器兼容性是一个重要的问题，因为不同的浏览器会以不同的方式解释网页代码。

为了确保网页在各种浏览器中都能正常显示和运行，我们需要采取一些跨浏览器兼容性处理方法。

首先，应当尽量遵循Web标准。

Web标准是由W3C（World Wide Web Consortium）制定的规范，它规定了网页应该如何编写和显示。

遵循Web标准可以确保网页在不同浏览器中拥有一致的显示效果。

其次，我们可以使用CSS reset来统一各个浏览器的默认样式。

不同浏览器对元素的默认样式有所差异，使用CSS reset可以将这些差异统一，使得网页在不同浏览器中显示效果更加一致。

另外，我们还可以使用CSS hack来解决浏览器兼容性问题。

CSS hack是指通过针对不同浏览器的特定CSS代码来实现样式的差异化，从而解决特定浏览器的显示问题。

但需要注意的是，使用CSS hack可能会导致代码的可读性和维护性下降，应谨慎使用。

同时，我们还可以使用JavaScript来进行浏览器兼容性处理。

通过检测浏览器的类型和版本，我们可以针对不同浏览器提供不同的代码或样式，以确保网页在各种浏览器中都能正确显示和运行。

最后，我们还可以通过测试工具来检测网页在不同浏览器中的显示效果。

例如可以使用BrowserStack等在线工具来模拟各种浏览器和设备，以确保网页在各种环境下都能正常运行。

总之，跨浏览器兼容性处理是网页制作过程中必须重视的问题，通过遵循Web 标准、使用CSS reset、CSS hack、JavaScript以及测试工具等方法，我们可以有效地解决不同浏览器带来的显示差异，从而提高网页的兼容性和稳定性。

网页排版中IE6,IE7,Firefox浏览器兼容性写法

网页排版中IE6，IE7，Firefox浏览器兼容性写法本文向大家简单介绍一下DIV+CSS网页排版中IE6，IE7，firefox火狐浏览器兼容性写法，希望本文介绍对你的学习有所帮助。

AD：你知道DIV+CSS网页排版中IE6，IE7，Firefox火狐浏览器兼容性写法吗，这里和大家分享一下，DIV+CSS浏览器兼容问题一直困绕着许多从事DIV＋CSS网页排版的美工人员，尤其是IE与火狐的兼容。

DIV+CSS网页排版中IE6，IE7，firefox火狐浏览器兼容性写法DIV+CSS浏览器兼容问题一直困绕着许多从事DIV＋CSS网页排版的美工人员，尤其是IE与火狐的兼容。

用DIV+CSS布局的网页在IE下显示一切正常，可是在火狐（FireFox）浏览器里打开，本来好好网页一下子就全乱了.让人怎么看?这一定会影响到你的网站的推广,seo优化,不利于搜所引擎的搜索.所以解决DIV+CSS浏览器兼容的问题是完全必须的.下面来看一下DIV+CSS浏览器兼容的实例，区分IE6，IE7，Firefox火狐浏览器CSS的写法：先来分开区分一下。

◆首先声明DIV+CSS浏览器兼容性IE6与IE7与火狐(firefox)的一些识别规则：1.IE都能识别*，标准浏览器(如Firefox)不能识别*；2.IE6能识别*，但不能识别!important,3.IE7能识别*，也能识别!important;4.firefox不能识别*，但能识别!important;◆请看下简单的DIV+CSS浏览器兼容实例:1．IE6和firefox的区别：background:orange;*background:blue;意思就是火狐浏览器的背景颜色是橙色,而IE浏览器的背景色是蓝色.2.IE6和IE7的区别：background:green!important;background:blue;意思指的是:IE7的背景颜色是绿色,IE6的背景颜色是蓝色3.区别IE7与Firefox：background:orange;*background:green;意思指的是:火狐浏览器的背景颜色是橙色,而IE7的背景颜色是绿色4.Firefox，IE7，IE6：background:orange;*background:green!important;*background:blue;意思是火狐浏览器的的背景橙色,IE7浏览器的背景颜色是绿色,而IE6浏览器的颜色是蓝色.为了更加清楚的来表达说明DIV+CSS浏览器兼容下面表格是更加清楚的能表达IE6,IE7,Firefox之间的识别标识区别:IE6 IE7 Firefox* √√×important ×√√。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

CSS兼容常用技巧请尽量用xhtml格式写代码，而且DOCTYPE影响 CSS 处理，作为W3C标准，一定要加DOCTYPE声明。

1.div的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。

缺点是要控制内容不要换行 2. margin加倍的问题设置为float的div在ie下设置的margin会加倍。

这是一个ie6都存在的bug。

解决方案是在这个div里面加上display:inline;例如：<#div id=”imfloat”>相应的css为#imfloat{float:left;margin:5px;display:inline;}3.浮动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;4 IE与CSS宽度和CSS高度的问题div css技巧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;}5.页面的最小宽度min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。

但IE不认得这个，而它实际上把 width当做最小宽度来使。

为了让这一命令在IE上也能用，可以把一个＜div> 放到＜body> 标签下，然后为div指定一个类,然后CSS这样设计：#container{ min-width: 600px;width:expression_r(document.body.clientWidth ＜ 600? "600px": "auto" );} 第一个min-width是正常的；css制作但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。

它实际上通过Javascript的判断来实现最小宽度。

6.DIV浮动IE文本产生3象素的bug左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px 的间距.#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}<div id="box"><div id="left">＜/div><div id="right">＜/div></div>7.IE捉迷藏的问题当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。

有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。

页面结构尽量简单。

8.float的div闭合;清除浮动;自适应高度①例如：＜#div id=”floatA” >＜#div id=”floatB” >＜#div id=”NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。

(其中floatA、floatB的属性已经设置为float:left;)这段代码在IE中毫无问题，问题出在FF。

原因是NOTfloatC并非float标签，必须将float标签闭合。

在＜#div class=”floatB”>＜#div class=”NOTfloatC”>之间加上＜#div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。

并且将clear这种样式定义为为如下即可： .clear{ clear:both;}②作为外部 wrapper 的 div 不要定死高度,div css制作为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。

例如某一个wrapper如下定义：.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:<div id=”page”><div id=”left”>＜/div><div id=”center”>＜/div><div id=”right”>＜/div></div>比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而page居然保存高度不变,问题来了css 制作,原因在于page不是float属性,而我们的page由于要居中,不能设置成 float,所以我们应该这样解决<div id=”page”><div id=”bg” style=”float:left;width:100%”><div id=”left”>＜/div><div id=”center”>＜/div><div id=”right”>＜/div></div></div>再嵌入一个float left而宽度是100%的DIV解决之道。

④万能float 闭合(非常重要!)关于 clear CSS float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽..clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }.clearfix { display:inline-block; }.clearfix {display:block;}或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示} 9．高度不能自适应高度不能自适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。

例：#box {background-color:#eee; }#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } <div id="box"><p>p对象中的内容＜/p></div>解决技巧：在P对象上下各加2个空的div对象CSS代码：.1{height:0px;overflow:hidden;}或者为DIV加上border属性。

10 .div+css之IE6下为什么图片下有空隙产生解决这个BUG的技巧也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为vertical-align:topbottom middle text-bottom 都可以解决.11.如何对齐文本与文本输入框加上 vertical-align:middle;<style type="text/css"></style>12.web标准中定义id与class区别吗(1).web标准中是不容许重复ID的,比如 div id="aa" 不容许重复2次,而CSS class定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.(2).属性的优先级问题CSS ID的优先级要高于class,看上面的例子(3).方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单。

13. LI中内容超过长度后以省略号显示的技巧此技巧适用与IE与OP浏览器<style type="text/css"></style>14.为什么web标准中IE无法设置滚动条颜色了解决办法是将body换成html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Strict//EN"/TR/xhtml1/DTD/xhtml1-strict.dtd> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style type="text/css">＜/style>15.为什么无法定义1px左右高度的容器IE6下这个问题是因为默认的行高造成的,解决的技巧也有很多,例如:overflow:hidden zoom:0.08 line-height:1px16.怎么样才能让层显示在FLASH之上呢解决的办法是给FLASH设置透明<param name="wmode" value="transparent" />17.怎样使一个层垂直居中于浏览器中这里我们使用百分比绝对定位,与外补丁负值的技巧,负值的大小为其自身宽度高度除以二<style type="text/css"></style>Firefox与IE的CSS兼容CSS HACK技巧1. Div居中问题div设置 margin-left, margin-right 为 auto 时已经居中，IE 不行，IE需要设定body居中，首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。