常用的兼容IE6及小技巧

为什么会出现浏览器兼容问题

由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各种莫名其妙的Bug(代码错误）提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒，都让CSS应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去克服的。

关于浏览器

主流浏览器

浏览器	中文名	内核
Internet Explorer	IE浏览器	内核: Trident
Safari	苹果浏览器	webkit
Google Chrome	谷歌浏览器	blink
Mozilla Firefox	火狐浏览器	Gecko
opera	欧朋	prsto

常见Bug及解决方案

如何在IE6及更早的浏览器中定义小高度的容器
IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高

hack:
#test{overflow:hidden;height:1px;font-size:0;line-height:0;}

如何在IE6及更早的浏览器产生双编剧的Bug
当IE6及更早浏览器出现浮动后margin值解析为双倍的情况，设置该元素的display属性为inline即可

#test{display:inline;}

如何在IE6及更早的浏览器模拟min-height效果
注意此时#test不能再设置overflow的值为hidden，否则模拟min-height效果将失效

#test{min-height:100px;_height:100px;}

如何解决按钮在IE7及更早浏览器下随着value增多两边留白也随着增加的问题？
input,button{overflow:visible

如何解决按钮在IE7及更早浏览器下随着value增多两边留白也随着增加的问题？如何解决IE7及更早浏览器下当li中出现2个或以上的浮动时，li之间产生的空白间隙的BUG？
input,button{overflow:visibleli{vertical-align:top;}
除了top值，还可以设置为text-top/middle/bottom /text-bottom

如何解决按钮在IE7及更早浏览器下随着value增多两边留白也随着增加的问题？
input,button{overflow:visible;}

经验和技巧

1.如何清除图片下方出现几像素的空白间隙？

方法1：
img{display:block;}
方法2：
img{vertical-align:top;}

2.如何让文本垂直对齐文本输入框？
方法：
input{vertical-align:middle;}

3.如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果？

方法：
a:link{color:#03c;}
a:visited{color:#666;}
a:hover{color:#f30;}
a:active{color:#c30;}

4.如何使文本溢出边界显示为省略号？

方法：
test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

5.如何使连续的长字符串自动换行？

方法：
test{width:150px;word-wrap:break-word;}

6.如何让未知尺寸的图片在已知宽高的容器内水平垂直居中？

方法：
test{display:table-cell;display:block;position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}
test p{position:absolute;top:50%;left:50%;margin:0;}
test p img{position:relative;top:-50%;left:-50%;vertical-align:middle;}

说明：#test是img的祖父节点，p是img的父节点。Know More：未知尺寸的图片如何水平垂直居中

7.如何去掉超链接的虚线框？

方法：
a{outline:none;}

8.为什么2个相邻div的margin只有1个生效？

.box1{margin:10px 0;}
.box2{margin:20px 0;}

<div class="box1">box1</div>
<div class="box2">box2</div>

本例中box1的底部margin为10px，box2的顶部margin为20px，但表现在页面上2者之间的间隔为20px，而不是预想中的10+20px=30px，结果是选择2者之间最大的那个margin，我们把这种机制称之为“外边距合并”；外边距合并不仅仅出现在相邻的元素间，父子间同样会出现。

简单列举几点注意事项:
　外边距合并只出现在块级元素上；
　浮动元素不会和相邻的元素产生外边距合并；
　绝对定位元素不会和相邻的元素产生外边距合并；
　内联块级元素间不会产生外边距合并；
　根元素间不会不会产生外边距合并（如html与body间）；
　设置了属性overflow且值不为visible的块级元素不会与它的子元素发生外边距合并；

9.如何在文本框中禁用中文输入法？

方法：
input,textarea{ime-mode:disabled;}

ime-mode为非标准属性，写该文档时只有IE和Firefox支持