前端常见问题及解决方案

Posted 2020-09-07 fate、hu

 

• -webkit-tap-highlight-color

      当用户点击ios的Safari浏览器中的链接或javascript的可点击的元素时，覆盖显示的高亮颜色。该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。

• -webkit-appearance   

-webkit-appearance:none;去除系统默认appearance的样式,常用于IOS下移除原生样式

• 解决Chrome在应用transition时页面闪动的问题？

-webkit-transform-style:preserve-3d;或-webkit-backface-visibility:hidden;

• 文本溢出边界不换行强制在一行内显示 

#test{width:150px;white-space:nowrap;}  
/*相反文本溢出边界省略号*/

#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

• 清除图片下方出现几像素的空白间隙？

方法1：img{display:block;}
方法2：img{vertical-align:top;}

• 让未知尺寸的图片在已知宽高的容器内水平垂直居中？

#test{display:table-cell;*display:block;*position:relative;width:200px;height:200px;text-align:center;vertical-align:middle;}
#test p{*position:absolute;*top:50%;*left:50%;margin:0;}
#test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}　

• 如何容器透明，内容不透明？ 　　

.outer{width:200px;height:200px;background:rgba(0,0,0,.2);background:#000\9;filter:alpha(opacity=20)\9;}
.outer .inner{position:relative\9;}

<div class="outer">
   <div class="inner">我是不透明的内容</div>
</div>

• -webkit-touch-callout

　　-webkit-touch-callout：none ;当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。