前端遇到的细节问题

1.谷歌浏览器支持的字体最小为12px

2.li中图片间隙3px的解决方法：

   方法一：img{vertical-align:top;}

   方法二：img{display:block;}

   方法二：设置容器font-size:0

3.使用锚点时，若是在IE中失效，在<a name="maodian"></a>的先后加文字或空格（&nbsp;）便可。

4.小icon使用display:inline-block时，再使用margin-top会影响高度，在icon的样式中加入position:absolute便可。

5.z-index无论用时加入position:relative

   二者之间的影响可参考：http://www.neoease.com/tutorials/z-index/

6.写悬浮时若是是相对于屏幕，用fixed、left/right、top/bottom，若是是相对于内容，用fixed、left:50%、margin-left

7.输入框得到焦点时取消默认文字，失去焦点时若是文本框中有文字则不变，若没有文字则显示默认文字：

<input type="text" class="text" value="默认文字" onFocus="if (value =='默认文字'){value =''}" onBlur="if (value ==''){value='默认文字}">
<textarea class="textarea" onfocus="if(value=='默认文字'){value=''}" onblur="if(value==''){value='默认文字'}">默认文字</textarea>

8.禁止复制，当网页加载的时候就执行，右键菜单也会被屏蔽，同时不能用鼠标点选文字

<script> document.body.onselectstart=document.body.oncontextmenu=function(){return false;};</script>

 9.标题列表时有宽度限制用

white-space: nowrap;text-overflow: ellipsis;

超出设置宽度会自动添加省略号，防止用截取字符串函数不适用于中文的状况。

十、在使用UL和LI显示文字的时候，因为IE浏览器对LI的文字长度没有默认强制令起一行。致使若是文字超出UL设定的宽度再先有的位置上折行，形成显示问题。

解决方法：

ul li{
white-space:nowrap;
}

十一、去掉IE横向滚动条在之前的HTML标准下，要隐藏横向滚动条， 只须要在CSS里加上

Body{overflow-x:hidden;}

可是在如今的标准 下"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"下面，上面的代码不产生任何效 果，由于如今不是以Body做为容器，而是html标签，因此加入：

HTML{overflow-x:hidden;}

可是这样作了之后，在IE7下，鼠标滚轮上下滚动不起做用了，IE6下倒是正常的。多加上一行代码就解决问题了

HTML{ overflow-x:hidden;overflow-y:auto;}

这段能够放入一个全局的css样式中，这样全部弹出窗口(包括模态窗口)，全部页面都不会出现横向滚动条。

十二、内容部分有限制宽度的，最好在全局样式表中添加一句(好比内容宽度为1000px)：

body{min-width:1000px;}

这一句话能够解决手机访问页面显示不全，浏览器缩小(向下还原)后背景颜色显示不正常的问题。

1三、文本输入框若只设置line-height，则在IE中显示高度不对，还须要设置height

1四、下拉菜单select默认自带属性box-sizing:border-box，即宽高包括边框和内边距。

若须要下拉菜单和输入框样式保持一致，能够增长如下代码，使select的box-sizing改为其余标签的默认值。

select{
    box-sizing:content-box;
    -moz-box-sizing:content-box; /* Firefox */
    -webkit-box-sizing:content-box; /* Safari */
}

1五、JS中用 window.onload = Watch(); 在IE7和IE8中报错“还没有实现”，改成 window.onload = new function(){Watch();} 便可。

1六、iframe若是是弹窗，背景图片是半透明的，在IE6/7/8中实现半透明效果，须要增长 <iframe allowTransparency="true" /> 这个属性，若是为了追求更好的保障的话，就要加上 iframe{background: transparent;} 。JS中可使用 iframe.setAttribute("allowTransparency","true"); 或者 iframe.allowTransparency = "true";

1七、自适应网页设计中各类布局方式的浏览器支持程度：

Bootstrap 3.3.5     IE8以上

Bootstrap 4.0.0     IE9以上

Flex布局                IE10以上

rem[相对长度单位]  IE9以上

1八、用JS生成iframe的时候须要将此iframe获取焦点，不然IE中，移除此iframe后，再添加iframe的时候，input没有光标

/*
    新增弹窗
    参数说明：
    src为弹窗的文件名
    id为弹窗iframe设置的ID
    type为是否隐藏父窗口的滚动条，0表示不隐藏，1表示隐藏
 */
function popupOpen(src,id,type){
    if(type){
        document.body.style.overflow = "hidden";
    }
    var iframe = document.createElement('iframe');
    iframe.src = src + ".html";
    iframe.className = "iframe_popup";
    iframe.frameBorder = "0";
    iframe.id = id;
    iframe.allowTransparency = "true";
    iframe.width="100%";
    iframe.height="100%";
    document.body.appendChild(iframe);
    iframe.focus();
    
    $("#"+id).load(function(){
        var mainheight = $("#"+id).contents().height();
        var bHeight = document.body.scrollHeight;
        var height = Math.max(mainheight, bHeight);
        $("#"+id).height(height);
    });
}

1九、左右箭头可换字体来实现较好效果 font-family: SimSun;

20、JS动态加载的HTML若须要执行事件，则用live，如：

$("div").live("click",function(){
    alert("click");    
});
$(function(){
    $("body").append("<div></div>");
});

 因为jquery中的live()方法在jquery1.9及以上的版本中已被废弃了，当加载新版本的jquery文件时，可使用on，如：

$(function(){
    $("body").append("<div></div>");
    $("div").on("mouseover mouseout",function(event){
        if(event.type == "mouseover"){
            //鼠标移入时
        }else if(event.type == "mouseout"){
            //鼠标移开时
        }
    });
});

 2一、disabled效果

.disabled{
    filter: Alpha(Opacity=30);
    opacity: .3;
    cursor: default !important;
    pointer-events: none;
}

 pointer-events: none;这个只支持IE11+，PC端慎用

2二、手机浏览器wap网页点击连接触发颜色区块的问题解决办法：

html{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}