项目中关于IE7的兼容问题

最新推荐文章于 2023-02-26 19:33:16 发布

changreal

最新推荐文章于 2023-02-26 19:33:16 发布

阅读量630

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/changreal/article/details/50995246

CSS 同时被 2 个专栏收录

4 篇文章

订阅专栏

1 篇文章

订阅专栏

首先，如果是HTML5写的代码，IE7这些LOW逼读不懂，所以要加个翻译来帮助理解诸如<nav><footer>这些标签，引入如下：

html5shiv.js作用是让IE7等浏览器对HTML5兼容， respond是对响应式的兼容，这个下次做响应式了再来好好补全。

接下去要说到代码，还有很多不完善的地方，会慢慢领悟到过来更新的。

BTW， ie7的前缀是*，比如*margin-left:0 auto;

刚刚突然发现了haslayout 觉得下面写的太小儿科了。贴上地址http://www.cnblogs.com/ideaplusl/archive/2011/07/07/2099843.html 。即可以尝试触发父容器及其中的子容器的haslayout属性，通常可以通过加上zoom: 1（zoom是IE的私生子属性）来调试。还有推荐为这个元素设定初始尺寸，但是，有时不便指定尺寸属性的情况下，就只能寻找替代方案了。对于ie7 ，最好的办法是设置最小高度属性为0；

(1)关于relative 和absolute

网上都说说IE7对margin 0 auto不管用的方法是修改头部和让整个BODY内容居中，这个网上都有参考就不写了。

个人觉得比较好的方法是是先指定外容器的宽度, 如:100%，width:998px;等; 然后在里面有要居中的容器设置这个样式就可以实现居中效果了。PS：margin-left:auto;margin-right:auto 分开写。

(2)关于两个含absolute的relative的遮盖问题

这个可以参考http://www.jb51.net/css/148606.html 一看就懂。项目中导航就是这种问题。所以把导航和下面内容区域的z-index改了就好了，记得不要改absolute的z-index！！无效。

(3)关于inline-block

首先有一种黑方法叫结构中先写inline-block的部分，再写别的内容，这样就不会跑掉。

还有一种方法是inline-block 改成inline（不推荐）

还有的是方法在这里。http://www.cnblogs.com/leejersey/archive/2012/07/11/2586506.html

参考别人总结一下： http://blog.youkuaiyun.com/linlin_juejue/article/details/6622756

第一种：专门为IE7写Hack

   display:inline-block;
   *display:inline;
   *zoom:1;

特别是 ZOOM:1 这个必须的

第二种：

.selector { display: inline-block }
.selector { *display: inline }
注意这两个 display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将 display设回inline或block，layout不会消失。不能写进一个声明中。

(4)ul ol中的list-type:decimal问题

没找到有效解法找到了加（微笑）

(5) 双倍边距

Ie6有著名的左右双倍外边距问题，解决办法最常用的就是给产生双倍margin的对象 display:inline;就可以了。

还有就是给受双倍边距影响的块元素单独设置样式，_margin-left或_margin-right，其值是正常显示值的一半，这个样式只有IE6可以解释，这样在IE6中产生双倍边距，正好是我们想要的效果。

关于margin-bottom的边距问题下面文章

http://blog.163.com/zx_1258/blog/static/13323379920121030104652854/

文章总结一下：a.变margin-bottom为margin-top或者使用padding外，b.在浮动的div下面加上一个占位符&nbsp；来解决, c.也可以在下面加上清除浮动<div >来解决。

还有学到的后面慢慢补充吧。先到这里。诶。心累