从Chrome到IE8
这是我第一次写网站网页，由于有一个前端大佬舍友，让我觉得网站前端肯定特别简单（不然我的舍友为什么总是能够在一天之内完成老师给她的一周的前端工作量呢？）。
当然，结局就是我这个人——想得太简单。且不说前面是怎么辛辛苦苦把一个网页照着UI写出来的，写出来之后，明明高高兴兴，放到公司电脑上的IE浏览器一看，哇！惊为天页，我竟能从那背景色里隐约看出这的确是我一手码出的页面（我也是很聪慧了），下面是我从自己电脑的Chrome浏览器移动到公司电脑的IE8里面遇到的问题：
- display:inline-block不起作用
- float:right导致界面混乱
- width,height设置的数值与页面的高度数值不一致
- 百分比不起作用
- box-shadow不兼容
以上问题的解决方法：
- display:inline-block
经检验，IE8可以兼容inline，如果对元素高度宽度不做要求的可以用
display:inline;
如果对元素高宽有要求，就将元素设置为
display:block;
width:...px;
height:...px;
当然，我们之所以想用inline-block，大多是因为想要撑出大小又能够在行内显 示，那么就必须用到float，将所有要放在一行的元素都设置为块并加上float。此时要注意将所有一行的元素高度设置一致，否则由于元素的浮动，若是不一致，下面的元素可能会浮动到能容纳下它的离兄弟元素最近的位置。 - float导致页面混乱
如果既有float:left，又有float:right，按照我们的常规思维是从左到右，但IE8中float:right位置会混乱，所以需要将float:right的元素在html中顺序放在float:left前面，如下：
<html>
<head>......</head>
<body>
...
<div>
<div style="float:right;..."></div>
<div style="float:left;..."></div>
</div>
...
</body>
- width,height设置的数值与页面的高度数值不一致
是的，作为一个新手，我不知道为什么，但是就是不一致，所以我手调了元素高宽，使其在页面上高度与UI一致，我这里不是指看上去一致，而是用IETester调试查看元素高度展示的高度与UI设计一致，也就是说，工具告诉我IE8上这个元素高度为height:60px时，我写的代码其实是height:40px。 - 百分比不起作用
是的，设置宽度、高度、Top、Left等等的百分比都不起作用了，必须将其设置为固定大小。 关于想要兼容Chrome和IE8两者
然而，我不想为了IE8放弃很多在Chrome上能够显示的好的界面，那么就可以告诉它，如果你不能显示我这个，你再用另一个方法吧，例如，在Chrome中显示inline-bliock在IE8中为inline，如下：
display:inline-block;
_zoom:1;
*display:inline;
box-shadow不兼容
呵呵，岂止是shadow不兼容，radius，rgba()……都不兼容好吗！！！跟我喊：PIE.htc!!!PIE.htc!!!PIE.htc!!!
PIE.htc棒棒哒。先下载一下，下载地址：PIE.htc
然后解压，文件如下：
将里面的PIE.htc文件复制到html文件同目录下，也就是这样：
最后在会用到不兼容的样式的地方加上一句behavior: url(PIE.htc)，如下：
.subNav{
...
behavior: url(PIE.htc);
-moz-box-shadow: 0 4px 20px 5px #aaaaaa;
-webkit-box-shadow: 0 4px 20px 5px #aaaaaa;
box-shadow: 0 4px 20px 5px #aaaaaa;
}
从IE8到Chrome
事情总会一件一件一件一件一件一件一件一件一件一件一件一件一件一件一件一件一件一件一件一件一件一件……解决的。 —— [ 是哪个人说出的真相？？？ ]
如此聪慧（辣鸡）的我在这个过程中明白了，我必须以公司IE浏览器为标准来修改我的代码，于是我机智的又完成了网页上的一些动作，比如点击向下滑动之类的，甚至有点小兴奋。抱着想要看看比较好的界面是什么样的想法用Chrome打开了我的页面，嗯！好看！向下滚滚，向下滚…向下…向…你给我滚呀！！！IE8我都过去了！！！Chrome你在干什么！！！
是的，Chrome不兼容offsetHeight，准确来说是没有明确定义高度的offsetHeight。
最终我用scrollHeight解决了这个问题。
731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
