CSS-项目中遇到IE兼容问题，处理随笔

总是忘记给ie做特殊样式处理，以前打游击，不做也就算了，以后可不行，得对自己的“孩子”负责。。

一、先说IE老大的兼容

知道了一些常用的css属性兼容方法确实可以解决问题，

但我不知道我自己的ieTester是不是假的，很多网上说的ie8能识别、ie6,7不能识别的符号，我的ieTester6,7还是能识别。针对ie的兼容还有后缀\9\0写道一起的方法，说是只针对ie9，其实ie8也可以、怀疑自己用的是假的ie9。

总结了一些，常见的IE hack写法，对比正常写法，列表及实际功能如下

  1. 　　　　　　background: red;            ~非ie
  2.                 background: blue\9;         ~ie所有
  3.                 background: black\0;        ~ie8及以上
  4. 　　　　　　background: blue\9\0;     ~ie8及以上
  5.                 background: yelow\9\0;    ~没用　　
  6. 　　　　     background: blue\0/;        ~ie8 独有
  7.                 +background: grey;         ~没用
  8.                 *background: deeppink;   ~ie7及以下
  9. 　　           _background: green;        ~ie6及以下

总的来说就是，顺序就是：

  1. background: red;
  2.  background: blue\9;
  3. background: goldenrod\0/;
  4. *background: deeppink;
  5.  _background: green;

代码测试如下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>IEHackTest</title>
 6          <meta name="author" content="郭菊锋702004176@qq.com"/>
 7          <style type="text/css">
 8              div{
 9                 width: 300px;
10                 height: 300px;
11                 background: red; 
12                 
13                 background: blue\9;
14                 
15                 background: goldenrod\0/;
16                 
17                  *background: deeppink;
18                 
19                 _background: green; 
20                 }
21          </style>
22     </head>
23     <body>
24         <div></div>
25     </body>
26 </html>
IEhackTest

至于，有了\9，也就没必要有\0了。因为二者只差ie6,7不同，而ie6,7又可以单独设置，所以这里就看自己想要什么了。

\9是针对全部，如果不用单独写ie6,7，当然更好。

 二、ie6下absolute定位BUG，top，left等方位没用的解决方法:

(1):给父元素（有relative的父元素）添加*zoom:1；触发layout层解决问题。所以，遇到relative的设置，必加一句*zoom:1;

(2)：给父元素（同上）设置width，不必要精确像素，可以是99%。【试了没用】

另外，写了absolute，就一定要有top和left值，哪怕他们是0也要写，因为不同浏览器的处理方式是不同的，如果你不设置出来，他们默认的就会千奇百怪，位置也会四零八落。

 

三、ie6下transparent没用的原因：解决方法：

 

（1）：在可以的地方，设置transparent为与背景相同的颜色即可

 

（2）：在背景色错综复杂额地方，

看来*zoom的作用很大啊，不仅可以解决absolute的问题，还解决了透明的问题。

 

四、display: inline-block;设置后，必须有的hack写法

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

发现自己写的hack里，凡是用了inline-block的地方，因为ie6,7不支持，我就得加上*display: inline;zoom: 1;

inline-block和后边这两句是一家，固定搭配别拆掉。

 不过也不是遇到inline-block写hack就一定要*display：inline；也要视情况而定的。

如果你那个元素需要设置宽高，很明显，你设置了inline在ie6,7里他会缩成一个肉眼看不到的小圆点。所以必要时候，还是需要设置成block的。

 

五、ie9下的微软雅黑字体没触发，而是用衬线字体：

对那个div单独设置后就解决了。

 

六、ie9下的间距，和其他不一样，差几像素

ie9与其他几个版本对文字样式的处理特别不一样

 

七、让ie支持圆角：核心方法就是利用border的dotted样式

http://www.zhangxinxu.com/study/201607/ie7-ie8-border-radius.html

 

八、怎么写针对ie9的hack，因为他总是和ie8共用样式，或者单独针对ie8的也行。

 

  1. background: blue\9;
  2. background: goldenrod\0/;

今天用颜色做测试的时候，这么写，确实可以让ie8和9的样式不一样。可是前天做页面的时候我也针对性写过不一样的样式，但是没起作用。让我静静。肯定是哪里出了问题。

————————————————————————————————————————————————————————————

 2017-04-17 17:10:05  今天遇到一件奇怪的事

我在input上加了width，height，和line-height，但是却都没用。当然，只是在ie姥爷家里没用。不明所以。最后实在没办法了，是通过加了一个！important，但是我知道以前看过一篇文章说 ，尽量不要用这个玩意儿。可能是我样式覆盖了？反正问题源头没找出来，工作需要就不得以先及时解决了那个问题。

————————————————————————————————————————————————————————————

2017-04-28  13:59:05

ie总是能愁死我

一个动画效果，想要去掉jq的代码，用css3的trasition来写，但是ie不支持css3的，尤其是动画，那么问题是怎么让ie支持css3动画呢？

另外，不支持动画也就算了，hover你好歹支持一下吧，ie8下（所以不要拿ie6,7不支持不是a的hover这个借口来挡我）你都不支持hover？

或者说有时候支持有时候不支持，我都要崩溃了！！！

一个测试用过的代码

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             ._mCS_1{    display: block;width: 300px;height: 300px;background: green;position: relative;}
 8             ._mCS_1 p{width: 300px; height: 200px; background: #ff0;position: absolute;top: 0px;left:/*-30*/0px;opacity: 0; filter: alpha(opacity=0);visibility: visible;}
 9             /*._mCS_1 p:hover{opacity: 1; filter: alpha(opacity=1);}*/
10             ._mCS_1:hover p{left: 0;opacity: 1; filter: alpha(opacity=1);}
11             /*._mCS_1:hover p{left: -300px;top: 0;}*/
12         </style>
13     </head>
14     <body>
15         <a class="_mCS_1" href="javascript:viod(0);">
16             <p></p>
17         </a>
18         <!-- JiaThis Button BEGIN -->
19         <script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?type=left&amp;move=0&amp;btn=l4.gif" charset="utf-8"></script>
20         <!-- JiaThis Button END -->
21         
22     </body>
23 </html>
View Code

2017-07-05  11:28:18 

九、z-index在ie和火狐中的不同解析：

在日常布局中一定少不了有隐藏的弹窗、下拉框啥的，然后需要让他出来的时候他才出来。这种情况下势必用到浮动布局，让他脱离文档流隐藏。

在css处理上：父元素position需要用relative、子元素用absolute（再配合方向值来定位）。

同样，子元素也会用到一个必要的属性：z-index——用来设定在所有浮动元素中的高低层级、以及比不浮动的元素要高一点以达到遮挡的效果。

我按常理出牌设置css，但是ie他不按常理出牌啊！

先来看一个案例的效果图：

这是我ff中的正常效果

但到了ie中就成了这样：

浮动的白框，被下边正常文档流中的banner图给遮挡了！

exceme me！！

起初我还以为是，当然我也80%肯定是层级的问题，想到的是*zoom，毕竟这个属性作用大大的好。

触发IE浏览器的haslayout 。。。
解决ie下的浮动，margin重叠等一些问题。 。。

但是设置了，给父元素、子元素都设置了都没用！

ie这个独立团团长！

后来就想，既然是层级，那会不会是z-index的问题？

网上百度果不其然：不同的浏览器对他（z-index）的解析有分歧（不同的浏览器，指的当然是ie和现代浏览器，也就ie特立独行，）

具体分歧如下：

FF：对z-index的解释是：叠放的顺序取决于z-index值得大小

IE：对z-index的解释是：叠放顺序不仅取决于z-index值得大小、还要看父级position属性为relative的层的z-index得属性

于是，死马当作活马医的我，尝试着给父元素加了个z-index:1;

他竟然好了！好了！好了！

可是后来ff又不行了。。。父元素竟然比子元素高了，尽管子元素的z-index远远超出父元素

于是，最终给z-index加了一个ie的特殊标志，只有ie才能解析的那种

最终解决了问题：

ie中，父元素加了*z-index的效果。

所以：总结就是：用了relative，一定后边跟一个*z-index：1；来处理兼容，基本算固定搭配了吧。【补充说明：也不是所有用了relative的都要加这个，但是即使加了，用不到的还是不会被他影响，所以傻瓜机似得，可以都加上，单位了代码优化，一般是指在需要浮动起来后，被下边的层遮挡了的情况，而这种情况多发生在溢出父元素并与其父元素下边的盒模型发生叠加效应时。如果是在自己家里随便浮动定位的话，只要不出家门，都不用给他披这个“斗篷”】

父元素{

　　position:relative;

　　*z-index:1;

}

 

十、背景图铺满

 

1 background-size: 100%;
2 // 兼容ie8以下
3 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg-banner.jpg',sizingMethod='scale');

 

posted @ 2017-03-29 16:26  xing.org1^  阅读(483)  评论(0)  编辑  收藏  举报