测试IE6及IE6+
推荐：良心总结
-
IE8中input[button|submit]不能用margin:0 auto;居中
div{ width:100px;margin:0 auto;}
对于块级元素，当我想让他居中时，我会这样做，先设置宽度，再设置自动边距。因为如果不设置宽度，他将占据一行，就谈不上居中布局中啦。
a{
display: block;
margin: 0 auto;
width: 100px;
}
对于行内非替换元素，当我想让他居中时，我发现①他设置不了宽度②设置自动边距无反应。解决办法：将行内非替换元素设为块级元素，该元素会立马将宽度填充“父元素的当前宽度”，当前两个字，需要着重理解。然后就和对待块级元素一样的办法，设置自动边距就有效果啦。
div input[type=button]{
width: 200px;
margin: 0 auto;
display: block;
border: 0;
}
对于行内替换元素，当我想让他居中时，就有差异啦。他们的默认display:inline-block，所以宽度，高度都可以设置。
1、对于非[button||submit]的行内替换元素，首先：这些元素同行内元素一样需要转换为块级元素，但是，不同的是，他们的宽度，并不会充斥父元素。然后通过设置自动边距，就会达到居中的效果。
2、对于[button||submit]的行内替换元素，其实要想达到居中的效果，同1的做法一样，但是，在IE8会出现bug，为了兼容IE8，需要为该元素设置宽度，就可以很好地兼容。 -
body{overflow:hidden;}没有去掉IE6、7的滚动条
这个bug，怎么说呢，一般的网页内容肯定是需要翻页的，需要拖动滚动条的，所以这个bug有没有必要解决，就看个人在网站设计时，的需要了。
解决办法：
html{ overflow:hidden}
haslayout是IE的专有属性，当该值为true时，他可以自己控制自己自身的内容。现代浏览器，IE8+都不会考虑这个属性。举个例子。
我们希望为行内元素设置宽高，习惯上，我们会将其转换为块级元素，然后再设置。但是IE6/7只需要通过启动hasLayout的值为true就可以为行内元素布局。启动该属性的属性为：display:inline-blockwidth\heightpositon:ansolutefloatzoom:1
对于行内元素，只需要
a{*zoom:1;width:100px;height:100px}
这样一想其实有没有这个属性也都完全可以实现么，但是就是因为这个属性的出现，所以就带来了一系列的问题。
-
IE6/7hasLayout的标签拥有高度
在IE6、7中如果触发一个元素的hasLayout会使他拥有高度，即使内容为零。
div{ width: 100%;*height: 0;_overflow:hidden;}
设置完宽度后，会触发hasLayou，然后需要做的就是设置高度为0，设置溢出为隐藏。 -
IE6、7当：form>[haslayout]元素有margin-left时，子元素中的[input|textarea]出现2×margin-left。
form div{
width: 100%;
margin-left: 100px;
}
input,textarea{//解决办法
*margin-left: -100px;
} -
IE6、7 中4条边框，其中一条宽度明显大于其他三条边，效果误差
p{
width: 100px;
border: 1px dotted #000;
border-left-width:4px ;
}
IE9
IE678.jpg
解决办法：
<div><p>ddededede</p></div>
p{
width: 100px;
border: 1px dotted #000;
border-left-width:0px ;
}
div{
border-left: 4px dotted #000;
}
解决.jpg
- ** IE：6、7当子元素有position:relative的时候，父元素设置overflow:[hidden|auto]相当于给子元素设置overflow：visible**
解决办法：给父元素设置position:relative -
IE:7
:hover伪类不能改变有position：absolute的子元素的left与top值
.con:hover .vise{
left: 0;
}
解决办法：
1、把top/left的值设置成初0%外所有百分值。
2、或添加一个margin-[所有方向]除零与0%外所有值。
.con:hover .vise{
left: 0;
margin-left: 1px;
}
但是IE6不支持这个选择器。 -
IE8:focus+selector{}选择器失败
:focus+p{
font-weight:bold ;
font-size: 200%;
}
当一个元素获得焦点后，让他的下一个兄弟元素进行加粗与放大。但是在IE6、7中均不能实现。在IE8中只有当元素获得焦点又失去焦点时，才显示。解决办法：
:focus+p{
font-weight:bold ;
font-size: 200%;
}
:focus{}
在之后在添加一个空选择器。 -
列表中混乱的浮动：在list中浮动图片时，图片溢出正常位置，或没有list-style
解决办法：
1、li{overflow:hidden}包围列表内的浮动元素。
2、li{background:url() left norepeat 0.5em}左置为图标。
3、li{padding-left：2em；}设置左边的内边距，流出背景图片显示。
这个问题比较普遍，就不区分浏览器啦。 -
th不会继承上级元素的text-align
这个我在IE8以上的IE浏览进行测试，发现th内的文本总是居中。
table{text-align:left};th{text-align:inherit} -
样式（link、style、@import）的个数
在IE6~9这几版浏览器中只支持31个这样的样式标签，到第32个就不支持啦。 -
IE7：hover时若background-color：#fff失效
这个我测试之后，发现IE7是可以的，可能我的ietester有问题，不知道啊，但是原文作者给的解决方法有两个
1、写成background
2、#fff或#fffffff改为其他颜色。
IE6不支持这个选择器 -
IE6、7忽略>后有注释的选择器
html>/**/body div{……}
IE6、7浏览器渲染时，忽略注释后面的选择器，导致结果渲染不到IE6、7 -
IE6中PNG图片中的颜色和背景色的值相同，但显示不同
div{ height:100px;background: url(../../../LG/image/arr.png) red no-repeat;} -
IE8使用伪类[first-line|first-letter]属性的值中出现！important会使属性失效
解决办法：那就不用呗，专家建议，说还是少用比较好。
这个选择器IE6不支持这个选择器 -
IE6 :first-letter失效
这个测试时，我的IEtester是不是真的有问题，我的IE6根本就不支持：first-letter这个伪类。刚刚查了w3c说所有主流浏览器都支持这个，还有刚才那个hover也都支持，莫非我的ietester真的出了问题。
直接解决办法吧：h1，p:first-letter{……}
原文作者描述出现问题的原因是p:first-letter，h1{……} -
IE6position:absolute元素中，a：display:block,在非：hover时，只有文本可以点击
解决办法：background:url(任何页面中已经缓存的文件链接)，不推荐，因为会增加以下http请求。 -
IE6、7在ul>li>a中，li不设置float，a设置display:block;float:left,li不水平对齐
解决办法：给li设置display:inline;或float方向。 -
IE6dt,dd,li{background:red}背景失效
这个我的IE6也没出问题，估计真的是有毛病，大家可以自己测试。
解决办法：dt,dd,li{background:red;position:relaitive} -
IE6/7/8<noscript>元素在启用js的情况下显示了样式
利用js为<noscript>动态添加display：none样式 -
IE6、7、8使用filter处理的透明背景图片的透明部分不可点击
解决办法：把background：none变为background：url（#）链接到图片与本身之外的任何文件。 -
IE li内元素偏离baseline向下偏离
这个最头痛，因为一般我都是将li设置浮动，所以基本上就没有考虑过这个。大家测试一下就知道了，在IE上会吓一跳的
解决办法就是
li{
float: left;
width: 100%;
}
li a{
display: block;
background: red;
}
这样就能达到最简单的垂直菜单的效果。
但是水平菜单时，
li{
float: left;
padding-left:2px ;
}
li a{
display: block;
padding:0 20px;
background: brown;
height: 40px;
_float:left;
line-height: 40px;
color: #fff;
text-decoration: none;
}
这个之前做导航的时候发现的 -
在IE6、7中，当为ul与ol设置宽度后，会导致list-style不显示
解决办法：给li添加margin-left，留出地方显示，不是给ul啊 -
IE6、7图片不能垂直居中
div {
width: 150px;
height: 155px;
line-height: 155px;
border: 1px solid #000;
background: #f00;
text-align: center;
}
img {
vertical-align: middle;
}
span {
display: inline-block;
}
解决办法：在img标签后，加一个空标签，并使他拥有布局。
<div>
<img src="../../../LG/image/ff8080814ae248bd014ae65dcc97004e.jpg"/>
<span id=""></span>
</div> - ** IE6、7、8不能自定义指针样式**
引起兼容问题的写法：
div{
height: 500px;
width: 500px;
margin: 20px auto;
cursor: url(cursor.cur), crosshair;
background: #f00;
}
解决办法：给指针文件设置绝对路径
div{
height: 500px;
width: 500px;
margin: 20px auto;
cursor: url(/demos/cursor/b/cursor.cur), crosshair;
background: #f00;
} -
IE6背景溢出，拖动滚动条后显示正常。
这个说的太含糊啦，我还是上图吧
<div id='container' style="background: #abc;">
<p id='bugger'>floated</p>
<p>
ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffddddddddddddddddddddd
</p>
<div style="clear: both;"></div>
</div>
<div>give me</div>
#bugger{float:left;backgroung:red}
IE6是这样呈现的.jpg
IE6拖动左边垂直滚动条.jpg
解决办法：
#container:{overflow:hidden;zoom:1;}
-
IE6中将height与width当做min-height与min-width渲染
解决办法：_overflow:hidden; -
IE6双倍边距
这个是最经典的IE6最经典的bug之一。
出现在父元素与子元素之间，子元素同时设置了浮动与边距属性，那么IE6中子元素会出现双倍边距的现象。
解决办法：为浮动元素设置为行内元素 -
IE6、7margin负值隐藏，haslayout的父元素内非haslayout元素，使用负边距，超出父元素部分可见
<div id='container'>
<div id="inner">
<p>1</p> <br />
<p>2</p> <br />
<p>3</p> <br />
</div>
</div>
#container{
margin: 2em auto 0.5em;
padding: 2em 0;
width: 80%;
border: 1px solid red;
}
#inner{
margin: -4em 2em 0;
} -
在IE6、7中子元素超出父元素的部分不可见。
这个出现的原因是，为父元素设置了宽度后，导致父元素拥有布局，隐藏了超出父元素的内容。
解决办法：为子元素赋予布局，然后设为相对定位。 -
IE6中两个浮动元素，被放在一个固定宽度的容器内，且二者都被固定了宽度，这时候左边浮动元素内布置斜体内容，会将右边浮动元素挤下去
原因：斜体元素靠近在靠近右边界是，会由于自身斜体原因，扩出边界，进而导致在IE6中宽度会自增，导致把右边浮动元素挤下去。
解决办法：为斜体所在容器设置：overflow:hidden. -
IE6/7float元素后可能会有3px间隔
当一个元素设置了宽高后，再设置内部元素浮动，连续几个这样的设置，有么能造成他们之间有3px的间隔。
解决办法：为包围浮动的元素设置浮动，然后为了保持依旧的垂直排列，可以使的浮动元素的宽度为100%。 -
IE6/7text-align
<div style="text-align: center; background: blue;">
ddd
<p style="width: 100px;background: red;">dd</p>
</div>
在现代浏览器中，p里面的内容会居中，但是p这个块级元素并不会居中。
IE6、7,P这个块级元素也被居中啦。
解决办法，设置p浮动。 -
IE6、7中li内放置内容后，会在自身高度外流出一些空白
解决办法：overflow:hidden; -
IE6/7存在浮动元素折行
css2.1中说：如果一个行内元素浮动，则该元素浮动后，顶部与之前所在行对齐。
在现代浏览其中，就是照这样的标准渲染的，如果在一对行内元素后，来浮动一个块级元素，该块级元素也会与行内元素所在行的顶部对齐。
但是IE6、7中，却表现出，折行之后又浮动的现象。
触发原因：同一个复容器内，有多个行内元素，某些为浮动，某些为非浮动，当浮动的子元素不都是位于非浮动的子元素之前时，会触发折行。
解决办法：1、将浮动元素放在非浮动元素之前。（推荐）
2、使用绝对定位，会导致破坏文档结构（不推荐）
3、使用csshack，利用负边距实现。
我目前见过的，和在之前推荐的那篇文章里学到的，大多，都在这里啦，总结：实践出真知
明年就要开始找工作啦，作为应届生，没有经验，只能多看书，看那些有经验的人的总结！
fighting！
网友评论