社区微信群开通啦，扫一扫抢先加入社区官方微信群
社区微信群
IE调试的一般方法（css）：
使用高版本IE控制台（对于IE7以上）
border: 1px solid red;（对于IE6以下没有开发者工具，可以使用此方法。看边界来进行调试，这也是调试的重要手段。border不行就再加上background。）outline: 1px solid red;（IE6不支持。）javascript: alert (document.get ...) （在IE里面执行JS，在JS里面写样式进行调试。）
由于我的jQuery被墙了 ，所以没有看到结果，也是蛮崩溃的。
安装多个虚拟机，每个虚拟机安装不同版本的IE浏览器进行测试。
*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css">
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css">
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
CSS hack现在用的越来越少，能不用尽量不用，可以用最少的hack去实现多浏览器兼容的页面。所以不需要花很大精力去记，有这个概念，知道一些常见的就行。i知道星号是做ie67的hack，下划线是ie6的hack就行。浏览器越老，bug越多，但是越来越不关注这个了。关于CSS hack，可以直接在browserhacks查询。
条件注释可以参考资料史上最全的CSS hack方式一览和条件注释与CSS hack。
下面的测试结果都是在IE7和chrome下测试的，其他版本的IE结果就不贴出来了。
opacity: 0.4;
如果发现样式效果没有出来，先在Can I use上面查一下是否兼容，再搜一下解决方案。
filter:alpha(opacity=50);
zoom: 1; /* IE7需要加上这句，来触发hasLayout，不然没有效果。*/
display: inline-block
inline元素的display属性设置为inline-block时，所有的浏览器都支持；
block元素的display属性设置为inline-block时，IE6/IE7浏览器是不支持的。
*display: inline; /* 将块级元素设置为内联对象呈递。*/
*zoom: 1; /* 触发haslayout */
display: inline-block;属性触发块级元素，然后再定义display:inline;，让块元素呈递为内联对象。需要注意的是，两个display 要先后放在两个CSS声明中才有效果，顺序也不能反了。div{
display: inline-block;
}
div{
*display: inline;
}
overflow: hidden;或者overflow: auto;。
解决方案2：
height: 1%; /* 父元素上面 */
zoom: 1; /* 父元素上面 */
display: inline;。zoom: 1;，否则没有效果。
vertical-align: middle;。
reset.css和normalize.css分别是做什么的？为什么推荐用nomalize.css?reset.css和normalize.cssreset.css和normalize.css就是去掉默认样式的。当然它们也有区别，normalize.css是一种reset.css的替代方案。normalize.css的作用有：保护有用的浏览器的一些默认样式，而不是完全重置；修复浏览器自身的一些bug；优化css可用性；解释代码。nomalize.css的原因有以下几点：normalize.css对一些浏览器的 bug 进行修复；而reset.css是无法做到的。normalilze.css不会让调试工具变得杂乱；而reset.css在浏览器调试工具中有大段的继承链，显得比较杂乱，难看。综上所述，多种原因导致推荐使用nomalize.css。
具体的还可以参考来，让我们谈一谈 Normalize.css以及知乎: Normalize.css 与传统的 CSS Reset 有哪些区别。
box-sizing: border-box;计算方法为width/height=content+padding+border，表示指定的宽度和高度包含边框、内边距和内容区域。这就是上面提到的IE盒模型。
ie6
ie7
ie8
这里一开始我没有注意，幸亏智远发现了。在上面的截图中，可以看到当IE为IE盒模型的时候，它变成了长方形，高度变高了。因为在盒模型中，撑起高度的就是line-height，所以这里的高度应该就是字体（这里为空白字符）的line-height造成的。经过测试，发现IE678以及11都有这种情况，这应该是IE的一个bug。
inline-block
ie6
ie7
ie8
行内元素
* ie6
可以看到在ie6中，行内元素可以设置宽高。所以在ie6中，行内元素支持inline-block。
ie7
同理，行内元素在ie7中也支持inline-block。
max-width
ie6
ie7
ie8
写在后面的话：由于我自己以前没有安装过系统，一开始这里的xp系统安装花了蛮久的时间，打开系统的界面总是卡住，无法安装。差点就要放弃的时候，换了官方系统光盘镜像结果就真的安装好了。看见蓝天白云的那个桌面的时候心里还是很激动的，花了那么久的时间总算是没有白费。
从这件事上，就感悟到一点。没有什么事会难到你无法完成的地步，只要你肯坚持。所以希望自己加油，以后做事也能做到坚持两个字。
如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！
