zoukankan      html  css  js  c++  java
  • 前端遇到的细节问题

    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-overflowellipsis;

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

    10、在使用UL和LI显示文字的时候,由于IE浏览器对LI的文字长度没有默认强制令起一行。导致如果文字超出UL设定的宽度再先有的位置上折行,造成显示问题。

    解决方法:

    ul li{
    white-space:nowrap;
    }

    11、去掉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样式中,这样所有弹出窗口(包括模态窗口),所有页面都不会出现横向滚动条。

    12、内容部分有限制宽度的,最好在全局样式表中添加一句(比如内容宽度为1000px):

    body{min-1000px;}

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

    13、文本输入框若只设置line-height,则在IE中显示高度不对,还需要设置height

    14、下拉菜单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 */
    }

    15、JS中用 window.onload = Watch(); 在IE7和IE8中报错“尚未实现”,改为 window.onload = new function(){Watch();} 即可。

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

    17、自适应网页设计中各种布局方式的浏览器支持程度:

    Bootstrap 3.3.5     IE8以上

    Bootstrap 4.0.0     IE9以上

    Flex布局                IE10以上

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

    18、用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);
        });
    }

    19、左右箭头可换字体来实现较好效果 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"){
                //鼠标移开时
            }
        });
    });

     21、disabled效果

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

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

    22、手机浏览器wap网页点击链接触发颜色区块的问题解决办法:

    html{
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
  • 相关阅读:
    hadoop再次集群搭建(3)-如何选择相应的hadoop版本
    48. Rotate Image
    352. Data Stream as Disjoint Interval
    163. Missing Ranges
    228. Summary Ranges
    147. Insertion Sort List
    324. Wiggle Sort II
    215. Kth Largest Element in an Array
    快速排序
    280. Wiggle Sort
  • 原文地址:https://www.cnblogs.com/sakura-panda/p/3425803.html
Copyright © 2011-2022 走看看