前端常见问题汇总(CSS)

1.html5手机键盘影响页面布局解决方法：

/*
    * 解决输入法弹出遮住页面问题
    * */
    ( function () {
        // 处理安卓手机输入法遮挡输入框问题 这里的scrollIntoViewIfNeeded方法可以看MDN介绍，是一个webkit内核的方法，将元素滚动到可视区域
        if ((/Android/gi).test(navigator.userAgent)) {
            window.addEventListener('resize', function () {
                if (document.activeElement.tagName == 'INPUT' ||
                    document.activeElement.tagName == 'TEXTAREA') {
                    window.setTimeout(function () {
                        document.activeElement.scrollIntoViewIfNeeded();
                    }, 0);
                }
            });
        } else {
            /* ios  键盘弹出之后body高度变化了，将body的高度设置为变形之后的高度即可  */

            $('body').height($('body')[0].clientHeight);
        }
    })()

2. IE8及以下浏览器z-index

IE8（混杂模式）及以下浏览器的z-index 是拼爹的。 也就是说 一个元素的z-index并没有多大用处。 他的层叠顺序取决于他的最高级父元素的z-index。除此之外同级父元素的z-index一样 。后面的层叠等级高于前面。

如下面代码  ，层叠等级依次是： 从高到低 ： 4 > 3 > 2 > 1;
也就是说 4 会覆盖3， 3会覆盖2， 2 会覆盖 1 。

<div style="position:relative; z-index:1;">
  1     <div style="position:absolute; z-index:9999;">
             2
       </div>
</div>
<div style="position:relative; z-index:1;">
  3     <div style="position:absolute; z-index:9999;">
             4
       </div>
</div>

3. 用font-face导入外部字体，兼容各大浏览器写法

@font-face {
font-family: 'fontNameRegular';
src: url('fontName.eot');
src: local('fontName Regular'),
local('fontName'),
url('fontName.woff') format('woff'),
url('fontName.ttf') format('truetype'),
url('fontName.svg#fontName') format('svg');
}

4. 兼容IE6, 7的 自适应高度文本居中
IE7+：

css:

.dtable {

display:table;

}

.dcell {

display:table-cell;

vertical-align:middle;

}

html:

<p class="dtable">
<span class="dcell">测试文本</span>
</p>

IE6及以下（需要用到IE hack）：

.dtable {

display:table;

_position:relative

}

.dcell {

display:table-cell;

vertical-align:middle;

_position:absolute;

_top:50%;

}

.content {

_position:relative;

_top:-50%;

}

.pr {
  position:relative;
}

<div class="dtable">
 <p class="dcell">
<span class="content ">测试文本</span>
 </p>
</div>

或者 
 

<div class="dtable pr">      
<div class="dcell" style="vertical-align:middle; *position:absolute;*top:50%; *left:50%; width:100%; text-align:center;">        
<p style="position:relative; *top:-50%; *left:-50%;">文本</p>       
  </div>
</div>

5. 高度固定下的单行及多行文本居中
单行： 设置 line-height 等于height

多行： 

.mulit_line{line-height:150px; width:200px; border:1px dashed #cccccc; padding-left:5px;}
.mulit_line span{ display:inline-block; line-height:1.4em; vertical-align:middle;}
<p class="mulit_line"> <span style="font-size:12px;">
 这里是高度为150像素的标签内的多行文字，文字大小为12像素。这里是第二行，用来测试多行的显示效果。
</span> </p>

6. H5页面禁止选中文本



moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

7. div 左右垂直居中实现方法 
Old : 
position:absolute; 
left:50%;
top:50%;
margin-left:-(box.width)/2 px;
margin-top:-(box.width)/2 px;
CSS3 :
position:absolute; 
left:50%;
top:50%;
transform : translate3d(-50%,-50%,0);
-webkit-transform : translate3d(-50%,-50%,0);

总结 :
position:absolute; left:50%; top:50%; margin-left:-当前元素宽/2; margin-top:-当前元素高/2;
position:absolute; left:0; top:0; right:0; bottom:0; margin:auto;
position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);
display:inline-block; 父元素: line-height:元素的高; text-align:center;

	8. float的情况下 div设置width:auto; 会使元素width宽度缩小到内容宽度

9. css样式命名遵循“三无原则”。 无id 无标签 无层级。CSS 渲染模式是从右到做， 如 .box p {} 是先找到p再从p里面找类名为box的元素。 而js则是从左到右。 先找到.box 再从box里面找到p元素。 
10. 安卓微信中H5无法调用摄像头拍照上传，需要在html加上 'capture="camera"' 属性.  不过发现 capture="camera" 会导致Iphone中直接调出相机。而不是文件上传。 我暂时的解决的方法是判断是ios还是安卓进行不同的渲染。 如果您知道其他不同的方法可以留言解惑下。