前端工作中遇到的问题总结

Posted 2020-11-23 lanlanjser

1.button里面,用letter-spacing调整中文字间距

问题描述:设置之后现代浏览器无法使文字水平居中,会偏右,
原因:最后一个字后面也有间距存在
解决方式:用空格解决;或者用paddding-left:2px解决

2.兼容ie6,7,8背景透明内容不透明解决方法:

rgba(a,b,c,0.8);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=80)";//有时有问题

3.行间距设置
用line-height :number/%;

4.文字阴影css3
text-shadow:h-shadow v-shadow blur color; 详见梦想天空http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-text-shadow.html

5.input框阴影css3
box-shadow: h-shadow v-shadow blur spread color inset;详见w3plus

6.ie8下margin-top失效

- 当该div上面的div是绝对定位或者浮动时,ie8下,设置该div的margin-top无效,
解决方法:单独为ie8设置hack,float;或者如果上div是绝对定位的话,可以将其移到该div的下方.
- 还有父元素未设置border,子元素 设置margin-top无效
解决方法:为父元素设置overflow:hidden;为父元素设置border透明;改margin-top为padding-top

7.不用js实现placeholder的类似功能
<input type="text" value="请输入您的姓名" onfocus="javascript:if(this.value=‘请输入您的姓名‘){this.value=‘‘;}" onblur="javascript:if(!this.value){this.value=‘请输入您的姓名‘;}" class="name" NO="0"/>

8.文字竖排(类蒙古文)
暂用li浮动,width为字体大小解决
ie有writing-model:tb-rl属性,可以实现,其他浏览器暂未有

9.输入框input输入文字竖排显示

- ie浏览器的writing-model属性支持input框竖排效果的实现,其他浏览器暂未查到;
- <textarea cols="1" rows="10" ></textarea>可以实现,限定列和行,但是会出现滚动条.
要设置textarea文本域的滚动条是否开启，使用style.overflow-x属性来控制。如：如果要隐藏该文本域的横向滚动条，在style属性中增加overflow-x属性控制，如下：
<textarea id=txtComments style="overflow-x:hidden"></textarea>
相应的，若要隐藏纵向滚动条：
<textarea id=txtComments style="overflow-y:hidden"></textarea>
如果使用代码控制的话，可能需要如下代码实现：
document.all("txtComments").style.overflowX="hidden";
overflow-x,overflow-y的可取值为：visible(默认取值),hidden,auto,scroll。

10.特殊字体
字体打包技术,后台处理

11.option设置背景颜色
在option标签里加入style="";(css里设置没有效果)

12.手机号码正则(较新)
/(^(w)+(.w+)*@(w)+((.w+)+)$)|(^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$)/

13.手机字体大小设置

html里面设置fontsize 1rem=12px 
不同分辨率对应不同的大小
一般320对应12px,375对应14,414对应16px,在手机16px偏大
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

14.input的button按钮的文字不居中
padding,line-height解决

15.ie中父元素float:left;子元素float:right;父元素未设置宽高,float:left就会失效
解决:父元素设置宽度

16.冒泡,点击菜单显示,点击其他地方隐藏(事件流)

//点击#a元素,菜单显示,然后在body上点击一次任何元素,隐藏菜单
$("#a").on("click", function(e){
$("#menu").show();
$(document).one("click", function(){
$("#menu").hide();
});
e.stopPropagation();//(阻止捕获)
});
//点击菜单本身,阻止捕获
$("#menu").on("click", function(e){
e.stopPropagation();
});

17.jquery 获取下拉列表的值
获取select选中的option的值:$("#select").find("option:selected").val();
详见博客http://blog.csdn.net/cui_angel/article/details/8000432

18.超级简单的横向手风琴代码jquery

链式操作的体现
$(".num").click(function(){
$(this).css({"background-color":"#c20000"}).find("h1").css("color","#fff");
$(this).parent().siblings().find(".num").css({"background-color":"#e5e5e5"}).find("h1").css("color","#8a8a8a");
$(this).parent().siblings().find("div:last").css({width:0});
$(this).next().animate({width:"315px"},500);
});