前端遇到的細節問題

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);
}