HTML兼容与CSS兼容

HTML兼容写法

html 中可以使用条件注释的方法，对 IE 进行特殊处理。

条件注释通过注释演变而来：普通的浏览器认为内部内容为注释，不进行加载，而指定的浏览器会正常加载代码内容。

<!--[if lte IE 9]>
	<h2>小于等于IE9的浏览器可以看到</h2>
<![endif]-->

注：if 如果、endif 结束如果

IE <= 9的版本可以识别条件注释，> 9 的版本会默认为注释处理

比较符号：

lt less than 小于

lte less than or equal 小于等于

gt greater than 大于

gte greater than or equal 大于等于

相等设置，不需要加任何比较符号即可。

CSS兼容写法——CSS hack

为了保证所有用户浏览器加载效果相同，需要在同一份代码中书写不同的结构给不同的浏览器，这种方法就叫做 hack 方法（Hacker 黑客）。

hack 方法就是在同一份代码中给不同的浏览器书写不同的 css，保证最终加载效果一致。

属性：

- _ （属性名前面） —— 兼容IE6及以下

! $ & * ( ) = % + @ , . / ` [ ] # ~ ? : < > | （属性名后面）—— 兼容IE7及以下

\0/（属性值后面）—— 仅兼容IE8

\0（属性值后面）—— 兼容IE8及以上

\9（属性值后面）—— 兼容IE10及以下

选择器：

* html .selector {} ——兼容IE6及以下

.selector, {} —— 兼容IE7及以下

html > body .selector {} —— 不兼容IE6及以下

html > /**/ body .selector {} —— 不兼容IE7及以下

head ~ /* */ body .selector {} —— 不兼容IE7及以下

注：属性方法是微软公司提出来的
选择器的方法是程序员利用语法的漏洞想出来的
IE6浏览器认为在html之上有一个虚幻的父级存在
IE7可以容忍并集选择器逗号后不写内容，可以加载
IE6不支持子级选择器和子级选择器
IE7支持兄弟选择器和子级选择器，但不允许在选择器之间出现注释

常见网页布局

\1. 两列自适应布局：一列由内容撑开，另一列撑满剩余宽度

左侧盒子：设置左浮动，宽度自适应内容宽度

右侧盒子：设置overflow: hidden; 触发BFC,不会与浮动的元素重叠，从而占有父级剩余的宽度部分

\2. 圣杯布局/双飞翼布局：两边固定宽度，中间自适应

父级盒子：设置相对定位，且盒模型自动内减box-sizing : border-box; 设置左右内边距——为左右固定的两个子元素留空位，设置高度及一个最大宽度

左侧盒子：绝对定位到左侧padding区域，left: 0; top: 0;

中间盒子：设置盒子宽度为100%，标准流，撑开父级的content区域

右侧盒子：绝对定位到右侧padding区域，right: 0; top: 0;

\3. 等高布局：子元素在父元素中高度相等

根据圣杯布局做一个变化

给中间标准流盒子一个高度，父级不设置高度，被中间标准流内容撑开，同时设置左右侧盒子高度为父级的100%，与父级共同变化

\4. 粘连布局：垂直方向，后面的元素在前面元素足够高时，紧跟在前面元素底部，前面元素高度不够时，后面的元素自动加载到页面的底部。

常见于移动端

前面的盒子：设置最小高度为100%，盒模型自动内减，设置溢出隐藏，设置下内边距padding-bottom: 100px;

后面的盒子：设置上外边距的值为前面盒子下内边距的负值，margin-top: -100px;

设置负值就是把后面的盒子往上拽，正好重叠住前面盒子的内边距，使两者粘连