前端遇到的细节问题 |
您所在的位置:网站首页 › 浏览器字体最小12px › 前端遇到的细节问题 |
1.谷歌浏览器支持的字体最小为12px 2.li中图片间隙3px的解决方法: 方法一:img{vertical-align:top;} 方法二:img{display:block;} 方法二:设置容器font-size:0 3.使用锚点时,如果在IE中失效,在的前后加文字或空格( )即可。 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.禁止复制,当网页加载的时候就执行,右键菜单也会被屏蔽,同时不能用鼠标点选文字 9.标题列表时有宽度限制用 white-space: nowrap;text-overflow: ellipsis; 超出设置宽度会自动添加省略号,防止用截取字符串函数不适用于中文的情况。 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-width: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{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(""); });由于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); }
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |