[k]web页面-browser兼容问题-1

1：空的a标签在IE7/8下不能点击（2015-05-22）

html代码：

<ul class='oUl'>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
<li><a href="#"> </a></li>
</ul>

CSS样式：.oUl li a{width:60px;height:60px;display:block;cursor:pointer;}

问题描述：在ie8和ie7下，鼠标悬浮在<a>上时没有任何反应，也没有<a>的手型图案，更不能点击。

解决方案：给a标签随便添加背景色或者背景图片，然后将a标签的透明度设置为0，在IE中使用滤镜的方法让背景色不显示！

.oUl li a{width:60px;height:60px;display:block;cursor:pointer;background:#fff; opacity:0;filter:alpha(opacity=0);}

[转自]：http://www.csshello.com/jcdivcss/284.html

2: IE7下遇到的z-index问题与解决方法(2015-06-07)

写CSS的时候，在position的情况下，明明把z-index设置很高的数值，比方说z-index:1000000;在IE7下运行的时候往往不是我们想要的效果，不管设置z-index多高的数值仍然被层遮挡住了，这是IE7渲染DOM的问题，我们把父层的容器用position定位的时候（position:relative;），子层的z-index不管设置多高数值都会被重置。

既然问题找到了，我们也就知道解决的方法了，只要把父层加上z-index值就OK了，z-index一定要和position同时使用，否则无效。

最后我发现，在引用的CSS中写z-index属性有时候会不起作用，要写到标签里……

[转自]：http://www.toyean.com/post/211.html

3：FireFox5 下selected = selected失效(2015-07-23)

问题描述：使用js动态改变select的selected属性时，发现不起作用。可能的原因是FF5出于性能考虑，将一开始加载的dom元素的一些属性缓存起来了，而当使用F5刷新的时候，FF依然使用缓存中的属性，而不使用新的属性。 只有使用CTRL+F5强制刷新时，才能渲染新的属性。

解决方案：在select标签中加autocomplete ="off" 就行了

[转自]：http://www.jb51.net/css/141554.html

4：Reset.css(2015-12-23)

 ;;}
 ul,ol{list-style:none;}
 body{font-size:12px;font-family:"Microsoft yahei";}
 a{text-decoration:none;}

5、IE7不支持 box-sizing: border-box(2015-12-24)

下面的demo：对 .box元素添加样式，需引入boxsizing.htc这个文件，兼容到IE7+，Chrome，Firefox。

.box{width:100%;margin:30px auto;padding:20px;border:1px solid #ccc;overflow:hidden;box-sizing:border-box;*behavior:url(boxsizing.htc);}

[参考]：https://github.com/Schepp/box-sizing-polyfill

6、Reset.css(2015-12-25)

 html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,
 a,em,img,strong,sub,sup,i,dl,dt,dd,ol,ul,li,fieldset,
 form,label,table,caption,tbody,tfoot,thead,tr,th,td {
 ;
 ;
 }
 body {
   font-family: "Microsoft yahei", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 1.42857143;
   background-color: #fff;
 }
 ol,ul {
     list-style: none;
 }
 table {
     border-collapse: collapse;
 ;
 }
 caption,th,td {
     text-align: left;
     font-weight: normal;
     vertical-align: middle;
 }
 a{
   text-decoration:none;
 }
 a img {
     border: none;
 }
 article,aside,footer,header,menu,nav,section,summary {
     display: block;
 }

7、设置z-index属性无效(2016-02-03)

在CSS中，只能通过代码改变层级，这个属性就是z-index，要让z-index起作用有个小小前提，就是元素的position属性要是relative，absolute或是fixed。

1：第一种情况（z-index无论设置多高都不起作用情况）：

这种情况发生的条件有三个：

(1)、父标签 position属性为relative；

(2)、问题标签无position属性（不包括static）；

(3)、问题标签含有浮动(float)属性。

解决办法有三个（任一即可）：

(1)、position:relative改为position:absolute；

(2)、浮动元素添加position属性（如relative，absolute等）；

(3)、去除浮动。

2：第二种情况：IE6下，层级的表现有时候不是看子标签的z-index多高，而要看整个DOM tree（节点树）的第一个relative属性的父标签的层级。

8、让IE7/IE8支持CSS3 background-size属性

 .box{
     background:url(bg.jpg) no-repeat center center;
     background-size:100% 100%;
     -ms-behavior:url(backgroundsize.min.htc);
     behavior:url(backgroundsize.min.htc);
 }

由于 background-size 是 CSS3 新增的属性，所以 IE 低版本自然就不支持了，但是老外写了一个 htc 文件，名叫 background-size polyfill，使用该文件能够让 IE7、IE8 支持 background-size 属性。其原理是创建一个 img 元素插入到容器中，并重新计算宽度、高度、left、top 等值，模拟 background-size 的效果。

[参考]：http://www.dowebok.com/139.html

9、img与div(block类型元素)下边界有距离(缝隙)的解决方法

 <div style="padding:0;margin:0;border:1px solid orange;">
     <img src="demo.png" />
 </div>

解决方案：

方法一：给图片img标签display:block

方法二：定义图片img标签vertical-align:bottom，vertical-align:middle，vertical-align:top。

img{vertical-align:bottom;}

方法三：定义容器里的字体大小为0。

 div { font-size:0 } 

 

参考链接：http://www.cnblogs.com/JoannaQ/archive/2013/03/16/2962443.html

 

 

10、scss编译报字符不合法的错误

解决办法：在scss文件的最上方加上 @charset "utf-8";  最好使用双引号。