1. Png-24的透明兼容问题：在IE6下，png-24图片的透明效果会消失，变成白底。
a) 解决办法：运用插件或者是别人写的文件来将png图片的透明效果显现回来。
2. 条件注释语句：“<!--[if IE number]> xxx<![endif]-->”，number可以不填，也可以填上数字。不填，则表示整条语句为：当浏览器为IE浏览器时，就执行这个标签对内的xxx代码；当number为具体数字时，则整条语句表示：当浏览器是IE浏览器下的number版本时，就执行这个标签对内的xxx代码。
3. CSSHack：
a) 在某一条样式后面直接加“\9”，表示该条样式只在IE10之前包括IE10的IE浏览器下才会被解析；
b) 在某一条样式最前面直接加“+”或者是“*”，表示该条样式只在IE7之前包括IE7的IE浏览器下才会被解析；
c) 在某一条样式最前面直接加“_”，表示该条样式只在IE6之前包括IE6的IE浏览器下才会被解析；
4. 运用CSS Hack的风险：代码会显得非常乱；后期维护会比较麻烦。所以远离CSS hack，有益身心健康。
5. 提升样式优先级的代码：“！important”，它表示将该条样式提升优先级，提升到比行间样式还高的优先级。
6. 样式与提升样式优先级后的优先级高低：默认 < 类型 < class < id < style(行间) < !important
7. ！important的兼容性问题：在IE6下，假如在！important后边在加一条同样优先级的样式之后，它会破坏掉！important的作用，所以所有样式会按照默认的优先级顺序进行样式布置。
8. 圣杯布局，也叫双飞翼布局：左右宽度固定，中间宽度自适应伸缩；并且中间先加载。其内部样式表为：
<style>
body{ margin:0;}
.center{height:600px; background:#f60; margin:0 200px;}
.left{width:200px; background:#fc0; height:600px; position:absolute; left:0; top:0;}
.right{width:200px; background:#fcc; height:600px; position:absolute; right:0; top:0;}
</style>
其结构为：
<body>
<divclass="center"></div>
<divclass="left"></div>
<divclass="right"></div>
</body>
9. 等高布局：左右两列高度自适应，并且相等。
其内部样式表为：
<style>
body{margin:0;}
.wrap{width:900px; margin:0 auto; overflow:hidden;}
.left{width:200px; background:red; float:left; padding-bottom:10000px;margin-bottom:-10000px;}
.right{width:700px; background:blue; float:right; padding-bottom:10000px;margin-bottom:-10000px;}
</style>
其结构为：
<body>
<div class="wrap">
<div class="left">
页面内容<br/>
</div>
<div class="right">
页面内容<br/>
</div>
</div>
</body>
10. Margin负值会让元素向负方向移动，本身宽高不变，但是父级的宽或高会相应的减少。再IE6下，父级的宽或高不仅会减少，还会截去元素本身向负方向移出的部分。这个兼容性问题，只需在每个元素本身上加“ position:relative;”。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
