HTML&&CSS基础知识点整理

2024年2月4日 82次阅读来源: youqingyi

HTML&&CSS基础知识点整理

一、WEB标准：一系列标准的集合

1. 结构（Structure）：html   语言：XHTML[可扩展超文本标识语言]和XML[可扩展标记语言]
2. 表现（Preasentation）:css
3. 行为（Behavior）：JS[DOM+ES]

其中一些小的具体要求：

结构：标签小写、闭合、不能随意嵌套
CSS+JS：精良使用外链，不用行内

优点：

1. 易于维护
2. 页面响应快
3. 可访问性高
4. 提高设备兼容性
5. 易被解析（搜索引擎）

Ps：

可维护性：出现问题时，修复Bug成本低且维护性好，还有一点是代码能够被其他开发人员理解。
可访问性：所有人都能理解，解析

二、浏览器内核

> - IE：Trident内核(多称：IE内核)
> - Chrome：Webkit内核 ==>  Blink内核
> - Firefox：Gecko内核(多称：IE内核)
> - Safari：Webkit内核
> - Opear：Preato====>Webkit内核  ====>  Blink内核

三、渲染原理

1、涉及到的概念

Dom Tree：浏览器将Html解析成属性的数据结构
Parse(构建Dom树)：生成Dom树的行为
Css Rule Tree：浏览器将Css解析成属性的数据结构
Render Tree：DOM和CSSOM合并后生成Render Tree
Construct(构建渲染树)：解析对应的CSS样式文件信息（包括js生成的样式和外部css文件），而这些文件信息以及HTML中可见的指令（如），构建渲染树
Layout：根据Render Tree已知各个节点以及节点之间的从属关系，计算节点在屏幕中的位置
Painting：根据Layout算出来的结果，通过显卡，把内容滑倒屏幕上
Reflow(回流)：当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，这个回退的过程

2、==步骤==

解析HTML：浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
解析CSS：将CSS解析成 CSS Rule Tree 。
生成渲染树：根据DOM树和CSSOM来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
布局渲染树：已知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点所应该在屏幕上出现的精确坐标
绘制渲染树：遍历render树，并使用UI后端层绘制每个节点。

《HTML&&CSS基础知识点整理》

3、Reflow{重构/回流/重排}(对应Layout 改变了计算结果)

当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。==
每个页面至少需要一次回流，就是在页面第一次加载的时候(第一次布局也称作回流)==。
reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显示与隐藏：display:none和visibility:hidden）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。

4、Repaint/Redraw{重绘}(对应Painting 改变了屏幕显示样式)

改变某个元素的背景色、文字颜色、边框颜色等等==
(外观属性)==不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸==
(布局)==没有变。

5、触发Reflow条件

页面渲染初始化；(无法避免)
添加或删除可见的DOM元素；
元素位置的改变，或者使用动画；
元素尺寸的改变——大小，外边距，边框；
浏览器窗口尺寸的变化（resize事件发生时）；
填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变；
读取某些元素属性：（offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,　scrollTop/Left/Width/Height,　width/height,　getComputedStyle(),　currentStyle(IE)

6、触发Repaint条件

改变元素外观属性。如：color，background-color等。

7、Reflow和Repaint的关系

在回流(重排)的时候，浏览器会使布局发生变化。完成回流将变化后的新页面绘制到页面上，则触发重绘。
反之，重绘时不会不一定会使布局发生变化，这不一定触发重排(回流)
有些情况下，比如修改了元素的样式，浏览器并不会立刻reflow 或 repaint 一次，而是会把这样的操作积攒一批，然后做一次 reflow，这又叫==异步 reflow 或增量异步 reflow==。但是在有些情况下，比如==resize== 窗口，改变了页面默认的字体等。对于这些操作，==浏览器会马上进行 reflow==。
==重排(回流)必定会引发重绘，但重绘不一定会引发重排(回流)==

8、display:none和visibility:hidden

display:none 的节点不会被加入Render Tree，如果某个节点最开始是不显示的，设为display:none是更优的
visibility: hidden 的节点会被加入Render Tree
display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发现位置变化。

9、优化重排重绘

==重绘重排的代价：耗时，导致浏览器卡慢==

需要大量重绘重排的场景，例如：动画

优化：

==浏览器==自己的优化：==(多次攒一次)==浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。
==程序员==注意的优化：减少重绘和重排就是要==减少对渲染树的操作==，可以合并多次的DOM和样式的修改。并减少对style样式的请求。以下：

直接改变元素的className(==一次改变多个需要同样的样式变化的元素==)
display：none；先设置元素为display：none；然后进行页面布局等操作；设置完成后将元素设置为display：block；这样的话就只引发两次重绘和重排；(将重绘重排隐藏起来操作)
不要经常访问浏览器的flush队列属性；如果一定要访问，可以利用缓存。将访问的值存储起来，接下来使用就不会再引发回流
使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；(==操作复制节点，将改变后的节点一次重新绘制==)
将需要多次重排的元素，position属性设为absolute或fixed，元素脱离了文档流，它的变化不会影响到其他元素；(==脱离文档会不会再影响页面布局==)
如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document；(==一次改变多个==)
==尽量不要使用table布局==

四、依赖管理

五、AMD、CMD和CommonJs

1. 前端模块规范有三种：CommonJs,AMD和CMD。

* CommonJs用在服务器端，AMD和CMD用在浏览器环境
* AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
* MD 是 SeaJS 在推广过程中对模块定义的规范化产出。
* AMD:提前执行（异步加载：依赖先执行）+延迟执行
* CMD:延迟执行（运行到需加载，根据顺序执行）

2. 模块

模块就是实现特定功能的文件，把几个函数放在一个文件里就构成了一个模块。
需要的时候加载这个文件，调用其中的函数即可。

（1）函数写法

   function f1(){
　　　　//...
　　}
　　function f2(){
　　　　//...
　　}

==缺点==：
这样做会==污染全局变量==，无法保证不与其他模块发生==变量名冲突==，而且==模块成员之间没什么关系==。

（2）对象写法

 var module = {
　　　　star : 0,
　　　　f1 : function (){
　　　　　　//...
　　　　},
　　　　f2 : function (){
　　　　　　//...
　　　　}
　　};
 module.f1();
 module.star = 1;

==优点==：模块写成一个对象，模块成员都封装在对象里，通过调用对象属性，访问使用模块成员。
==缺点==：==暴露了模块成员==，==外部可以修改模块内部状态==。

（3）立即执行函数

   var module = (function(){
　　　　var star = 0;
　　　　var f1 = function (){
　　　　　　console.log('ok');
　　　　};
　　　　var f2 = function (){
　　　　　　//...
　　　　};
         return {
            f1:f1,
            f2:f2
         };
　　})();
    module.f1();  //ok
    console.log(module.star)  //undefined

==优点==：外部无法访问内部私有变量

3.CommonJs

CommonJS是服务器端模块的规范，由Node推广使用。
由于服务端编程的复杂性，如果==没有模块很难与操作系统及其他应用程序互动==。

CommonJS规范:

一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该==模块内部定义的变量，无法被其他模块读取==，除非定义为==global==对象的属性。
==输出模块变量==的最好方法是使用==module.exports==对象。
==加载模块使用require==方法，该方法==读取一个文件并执行==，==返回文件内部module.exports对象==

使用方法如下：

//math.js
exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
      sum += args[i++];
    }
    return sum;
};

//increment.js
var add = require('math').add;
exports.increment = function(val) {
    return add(val, 1);
};

//index.js
var increment = require('increment').increment;
var a = increment(1); //2

问题：

require 是同步的。模块系统需要同步读取模块文件内容，并编译执行以得到模块接口。
但在浏览器端问题多多。

原因：

浏览器端，加载 JavaScript 最佳、最容易的方式是在 document 中插入script标签。
但脚本标签天生异步，传统 CommonJS 模块在浏览器环境中无法正常加载。

解决思路

开发一个服务器端组件，对模块代码作静态分析，将模块与它的依赖列表一起返回给浏览器端。这很好使，但需要服务器安装额外的组件，并因此要调整一系列底层架构。
另一种解决思路是，用一套标准模板来封装模块定义：

define(function(require, exports, module) {

  // The module code goes here

});

这套模板代码为模块加载器提供了机会，使其能在模块代码执行之前，对模块代码进行静态分析，并动态生成==依赖列表==。

//math.js
define(function(require, exports, module) {
  exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;
    while (i < l) {
      sum += args[i++];
    }
    return sum;
  };
});

//increment.js
define(function(require, exports, module) {
  var add = require('math').add;
  exports.increment = function(val) {
    return add(val, 1);
  };
});

//index.js
define(function(require, exports, module) {
  var inc = require('increment').increment;
  inc(1); // 2
});

4.AMD(异步模块定义)

* AMD是"Asynchronous Module Definition"的缩写。

* 由于不是JavaScript原生支持，使用AMD规范进行页面开发需要用到对应的库函数RequireJS

* AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出

* 采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

==RequireJS主要解决两个问题：==

多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器
js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长

==RequireJs采用require()语句加载模块，不同于CommonJS，它要求两个参数：==

第一个参数[module]，是一个数组，里面的成员就是要加载的模块；
第二个参数callback，则是加载成功之后的回调函数。math.add()与math模块加载不是同步的，浏览器不会发生假死。

require([module], callback);

require([increment'], function (increment) {
　   increment.add(1);
});

==define()函数==

RequireJS定义了一个函数 define，它是全局变量，用来定义模块:
define(id?, dependencies?, factory);

==参数说明：==

id：指定义中模块的名字，可选；如果没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数，模块名必须是“顶级”的和绝对的（不允许相对名字）。
依赖dependencies：是一个当前模块依赖的，已被模块定义的模块标识的数组字面量。

依赖参数是可选的，如果忽略此参数，它应该默认为[“require”, “exports”, “module”]。然而，如果工厂方法的长度属性小于3，加载器会选择以函数的长度属性指定的参数个数调用工厂方法。

工厂方法factory，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值。

define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
      exports.verb = function() {
          return beta.verb();
          //Or:
          return require("beta").verb();
      }
  });

==RequireJs使用例子==

require.config是用来定义别名的，在paths属性下配置别名。然后通过requirejs(参数一，参数二)；
第一个参数是数组，传入我们需要引用的模块名
第二个参数是个回调函数，回调函数传入一个变量，代替刚才所引入的模块。

main.js
//别名配置
requirejs.config({
    paths: {
        jquery: 'jquery.min' //可以省略.js
    }
});
//引入模块，用变量$表示jquery模块
requirejs(['jquery'], function ($) {
    $('body').css('background-color','red');
});

引入模块也可以只写require()。requirejs通过define()定义模块，定义的参数上同。在==此模块内的方法和变量外部是无法访问的==，只有通过return返回才行.

//将该模块命名为math.js保存。
//math.js
define('math',['jquery'], function ($) {//引入jQuery模块
    return {
        add: function(x,y){
            return x + y;
        }
    };
});

//main.js引入模块方法
require(['jquery','math'], function ($,math) {
    console.log(math.add(10,100));//110
});

5.CMD

* CMD 即Common Module Definition通用模块定义
* CMD规范是国内发展出来的
* CMD有个浏览器的实现SeaJS
* SeaJS要解决的问题和requireJS一样，只在🌟模块定义方式和模块加载（可以说运行、解析时机上有所不同。

==CMD规范：==

（1）一个模块就是一个文件。代码的书写格式如下:

define(function(require, exports, module) {

  // 模块代码

});

require是可以把其他模块导入进来的一个参数;
exports是可以把模块内的一些属性和方法导出的;
module 是一个对象，上面存储了与当前模块相关联的一些属性和方法。

🌟🌟==AMD是依赖关系前置,在定义模块的时候就要声明其依赖的模块;==
🌟🌟==CMD是按需加载依赖就近,只有在用到某个模块的时候再去require：==

//CMD（seajs）使用例子
// 定义模块  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js')
  $('div').addClass('active');
  exports.data = 1;
});

// 加载模块
seajs.use(['myModule.js'], function(my){
    var star= my.data;
    console.log(star);  //1
});




// CMD
define(function(require, exports, module) {
  var a = require('./a')
  a.doSomething()
  // 此处略去 100 行
  var b = require('./b') // 依赖可以就近书写
  b.doSomething()
  // ... 
})


// AMD 
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
  a.doSomething()
  // 此处略去 100 行
  b.doSomething()
  ...
})

🌟==以上明显的不同就是依赖加载方式不同，具体表现在define的参数构成上，但AMD和CMD都是异步加载==

六、兼容性

1. HTML对象获取问题

FireFox：document.getElementById(“idName”);
ie:document.idname或者document.getElementById(“idName”).

==解决办法：统一使用document.getElementById(“idName”);==

2. const问题

Firefox下,可以使用const关键字或var关键字来定义常量;
IE下,只能使用var关键字来定义常量.

==解决方法：统一使用var关键字来定义常量==

3. event.x与event.y问题

IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

==解决方法：使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX==

4. window.location.href问题

IE或者Firefox2.0.x下,可以使用window.location或window.location.href;
Firefox1.5.x下,只能使用window.location.

==解决方法：使用window.location来代替window.location.href.==

5. frame问题

以下面的frame为例：

(1)访问frame对象:

IE:使用window.frameId或者window.frameName来访问这个frame对象. frameId和frameName可以同名。
Firefox:只能使用window.frameName来访问这个frame对象.

==另外，在IE和Firefox中都可以使用window.document.getElementById(“frameId”)来访问这个frame对象.==

(2)切换frame内容:

在 IE和Firefox中都可以使用window.document.getElementById(“testFrame”).src = “xxx.html”或window.frameName.location = “xxx.html”来切换frame的内容.

如果需要将frame中的参数传回父窗口(注意不是opener,而是parent frame)，可以在frame中使用parent来访问父窗口。例如：parent.document.form1.filename.value=”Aqing”;

6. 模态和非模态窗口问题

IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.

==解决方法：直接使用window.open(pageURL,name,parameters)方式打开新窗口。
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口.==

例如：var parWin = window.opener; parWin.document.getElementById(“Aqing”).value = “Aqing”;

7. firefox与IE的父元素(parentElement)的区别

IE：obj.parentElement

firefox：obj.parentNode

==解决方法: 因为firefox与IE都支持DOM,因此使用obj.parentNode是不错选择.==

8. document.formName.item(”itemName”) 问题

问题说明：IE下，可以使用document.formName.item(”itemName”) 或document.formName.elements [“elementName”];Firefox 下，只能使用document.formName.elements[“elementName”]。

==解决方法：统一使用document.formName.elements[“elementName”]。==

9. 集合类对象问题

问题说明：IE下，可以使用 () 或 [] 获取集合类对象;Firefox下，只能使用 [ ]获取集合类对象。

==解决方法：统一使用 [] 获取集合类对象==。

10. 自定义属性问题

IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute() 获取自定义属性;
Firefox下，只能使用getAttribute() 获取自定义属性。

==解决方法：统一通过getAttribute() 获取自定义属性。==

11. input.type属性问题

问题说明：IE下input.type属性为只读;但是Firefox下input.type属性为读写。

==解决办法：不修改input.type属性。如果必须要修改，可以先隐藏原来的input，然后在同样的位置再插入一个新的input元素。==

12. event.srcElement问题

IE下，even对象有srcElement属性，但是没有target属性;
Firefox下，even对象有target属性，但是没有srcElement属性。

==解决方法：使用srcObj = event.srcElement ?event.srcElement : event.target;==

如果考虑第8条问题，就改用myEvent代替event即可。

13. body载入问题

Firefox的body对象在body标签没有被浏览器完全读入之前就存在;
IE的body对象则必须在body标签被浏览器完全读入之后才存在。

Ps：经验证，IE6、Opera9以及FireFox2中不存在上述问题，单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素，即使这个元素还没有载入完成。

14. 事件委托方法

IE下，使用document.body.onload = inject; 其中function inject()在这之前已被实现;
在Firefox下，使用document.body.onload = inject();

==解决方法：统一使用document.body.onload=new Function(’inject()’); 或者document.body.onload = function(){}==

[注意] Function和function的区别。

15. 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框架集来操作table，如JQuery。

16. 对象宽高赋值问题

FireFox中类似obj.style.height = imgObj.height的语句无效。
cursor:hand VS cursor:pointer

firefox不支持hand，但ie支持pointer

==解决方法: 统一使用pointer==

17. innerText在IE中能正常工作，但在FireFox中却不行.需用textContent。

解决方法:

if(navigator.appName.indexOf("Explorer") > -1){

    document.getElementById('element').innerText = "my text";

} else{

    document.getElementById('element').textContent = "my text";

}

18. CSS透明

IE：

filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)

FF：opacity:0.6。
opacity 透明，子元素会继承透明属性。

==解决方式：
1、使用 background:rgba(0,0,0,0.6) //IE8及以下无效果。
2、使用定位，背景色与子元素处于同级关系。==

19. css中的width和padding

==在IE7和FF中width宽度不包括padding，在Ie6中包括padding.==

20. FF和IEBOX模型解释不一致导致相差2px

box.style{width:100;border 1px;}

ie理解为box.width = 100
ff理解为box.width = 100 + 1*2 = 102//加上边框2px

==解决方法：p{margin:30px!important;margin:28px;}==

Ps：这两个margin的顺序一定不能写反， IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：p{maring:30px;margin:28px}

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

21. IE5 和IE6的BOX解释不一致

IE5下p{width:300px;margin:0 10px 0 10px;}

p 的宽度会被解释为300px-10px(右填充)-10px(左填充)，最终p的宽度为280px

在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。

==修改 p{width:300px!important;width :340px;margin:0 10px 0 10px}==

22. ul和ol列表缩进问题

消除ul、ol等列表的缩进时，样式应写成：

list-style:none;margin:0px;padding:0px;

经验证，

在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响;
在 Firefox 中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list- style:none才能去除列表编号或圆点。

==在IE中仅仅设置margin:0px即可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。==

23. 元素水平居中问题

FF: margin:0 auto;
IE: 父级{ text-align:center; }

24. p的垂直居中问题

vertical-align:middle;
line-height:200px; //将行距增加到和整个p一样高

然后插入文字，就垂直居中了。缺点是要控制内容不要换行。

25. margin加倍的问题

设置为float的p在ie下设置的margin会加倍。这是一个ie6都存在的bug。

==解决方案是在这个p里面加上display:inline;块变行==

例如：
相应的css为

#imfloat{

   float:left;

   margin:5px;

   display:inline;
}

26. IE与宽度和高度的问题

IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

==解决：设置在html上==

#box{ 
   width: 80px; 
   height: 35px;
}
html>body #box{ 
   width: auto; 
   height: auto; 
   min-width: 80px; 
  min-height: 35px;
}

27. 页面的最小宽度

IE不识别min，要实现最小宽度，可用下面的方法：

#container{ 
   min-width: 600px;
   width:expression(document.body.clientWidth< 600? "600px": "auto" );
}

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

28. p浮动IE文本产生3象素的bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.

#box{ float:left; width:800px;}

#left{ float:left; width:50%;}

#right{ width:50%;}

🌟html #left{ margin-right:-3px; //这句是关键}

29. IE捉迷藏的问题
当p应用复杂的时候每个栏中又有一些链接，p等这个时候容易发生捉迷藏的问题。

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

解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。

30. float的p闭合;清除浮动;自适应高度

？（1）例如：

这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为float:left;)

这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在

之间加上

这个p一定要注意位置，而且必须与两个具有float属性的p同级，之间不能存在嵌套关系，否则会产生异常。并且将clear这种样式定义为为如下即可：==.clear{clear:both;}==

（2）作为外部 wrapper 的 p 不要定死高度,为了让高度能自适应，要在wrapper里面加上overflow:hidden; 当包含float的box的时候，高度自适应在IE下无效，这时候应该触发==IE的layout私有属性(万恶的IE啊!)用zoom:1;==可以做到，这样就达到了兼容。

例如某一个wrapper如下定义：

.colwrapper{overflow:hidden; zoom:1; margin:5px auto;}

（3）对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float p后面做一个统一的背景,譬如:

比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决：

再嵌入一个float left而宽度是100%的p解决之。

或者另一种方法：用选择器(：after)在page之后插入一个空标签,并清除浮动

.page:after {content: “”; display: table; clear: both; }

（4）万能float 闭合(非常重要!)

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的p加上class=”clearfix” 即可,屡试不爽。

.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

.clearfix { display:inline-block; }

.clearfix {display:block;}

或者这样设置：`.hackbox{ display:table; //将对象作为块元素级的表格显示}
`
31. 高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或padding时。

例：

#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

p对象中的内容

==解决技巧：在P对象上下各加2个空的p对象CSS代码
{height:0px;overflow:hidden;}
或者为p加上border属性。==

32. IE6下图片下有空隙产生

解决这个BUG的技巧有很多,可以是
==改变html的排版
或者设置img为display:block
或者设置vertical-align属性为vertical-align:top/bottom/middle/text-bottom 都可以解决.==

33. 对齐文本与文本输入框

==加上vertical-align:middle;==

Ps：经验证，在IE下任一版本都不适用，而ff、opera、safari、chrome均OK!

34. li中内容超过长度后以省略号显示

此技巧适用与IE、Opera、safari、chrom浏览器，FF暂不支持。

35. 为什么web标准中IE无法设置滚动条颜色了

==解决办法是将body换成html==

39. FORM标签

这个标签

在IE中,将会自动margin一些边距
在FF中margin则是0
因此,如果想显示一致,所以最好在css中指定margin和 padding,

==css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}。==

40. 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}p[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏
FF和OPera作用.属性选择器和子选择器还是有区别的，子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

41. 为什么FF下文本无法撑开容器的高度

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?

==去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:==

{

height:auto!important;

height:200px;

min-height:200px;

}

43. IE和FireFox 对空格的尺寸解释不同

FireFox为4px,IE为8px;
FireFox对p与p之间的空格是忽略的，但是IE是处理的。
在两个相邻p之间不要有空格跟回车，否则可能造成不同浏览间之间格式不正确，比如著名的3px偏差而且原因难以查明。
多个img标签连着，然后定义float: left;结果在firefox里面正常，而IE里面显示的每个img都相隔了3px。我把标签之间的空格都删除都没有作用。

==解决方法是在img外面套li，并且对li定义margin: 0; 避免方式：在必要的时候不要无视 list 标签)==

44. 条件注释

lte — 小于等于

lt– 小于

gte –大于等于

gt–大于

! –不等于

45.强制渲染

//这句话的意思是强制使用IE7模式来解析网页代码!

//Google Chrome Frame也可以让IE用上Chrome的引擎

或者//强制IE8使用IE7模式来解析

//强制IE8使用IE6或IE5模式来解析

//一个特定版本的IE支持所要求的兼容性模式多于一种

46.js兼容文件

使IE5,IE6兼容到IE7模式(推荐)

使IE5,IE6,IE7兼容到IE8模式

使IE5,IE6,IE7,IE8兼容到IE9模式

47.浏览器识别符

p{ _color:red; } IE6 专用

*html p{ color:#red; }IE6 专用

p{ +color:red; } IE6,7 专用

p{ *color:red; } IE6,7 专用

*html p{ color:red; } IE6,7 专用

p{*+color: red;} IE7 专用

Body> p{ color: red; }屏蔽 IE6

p{ color:red9; } IE8

Firefox: -moz-

Safari: -webkit-

Opera: -o-

IE: -ms-

整理时有一些用到了别人的文章，需要标注版权的请联系

    原文作者：youqingyi
    原文地址: https://segmentfault.com/a/1190000016542675
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。