在做项目时，会遇到一些小问题，现在趁空余时间把这些零散的问题给罗列一下，虽然都是找度娘看各位大神的解答，但是还是想都整理出来，一来给自己加个印象二来以便以后的运用。
1、
问题描述：IOS下，移动端的web页面中input获取焦点弹出系统虚拟键盘时，input框被虚拟键盘挡住了。
解决办法：
(1)
$(‘input‘).on(‘click‘, function () {
var target = this;
// 使用定时器是为了让输入框上滑时更加自然
setTimeout(function () {
target.scrollIntoView(true);
},100);
});
(2)
$("input").on("focus", function() {
// 使用定时器是为了让输入框上滑时更加自然
var interval = setInterval(function() {
document.body.scrollTop = document.body.scrollHeight;
clearInterval(interval);
}, 200);
});
2、
问题描述：让块元素的文本多行显示，显示不完的省略号代替。
解决办法：
div{
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}
3、
问题描述：如何限制textarea仅允许纵向改变大小。
解决办法：
texterea{
resize:vertical; // both横向和纵向都可调整；vertical仅允许纵向的调整；horizontal仅允许横向的调整；none不可调整大小
}
4、
问题描述：在使用textarea的时候,默认前面的文字是在最下面的，需要将文字放在左上角。
解决办法：
textarea{
vertical-align:top;
}
5、
问题描述：如何去掉在谷歌浏览器下video标签出现的下载按钮。
解决办法：
video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-enclosure {
overflow:hidden;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px);
}
6、
问题描述：float元素浮动后，高度不一致的li导致错位。
解决办法：给换行的第一个li添加clear:left样式
li:nth-of-type(odd){
clear:left
}
这里需啰嗦一句，那个odd不行的话，我就用的even，到底是因为什么我暂时也还不清楚，如果有人知道可以讲一哈噢。
7、
问题描述：点击某按钮后，让其事件消失即禁用。
解决办法：pointer-events的作用就是让元素实体虚化，可以实现时间的完全禁用
a{
pointer-events:none;
}
8、
问题描述：当页面很长，遮罩层不能完全覆盖页面。
解决办法：用fixed,不用absolute
div{
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
width:100%:
height:100%;
background:rgba(0,0,0,.5);
z-index:9999;
}
9、
问题描述：如何让select文字居中。
解决办法：
select {
text-align: center;
text-align-last: center;
}
10、
问题描述：如何修改placeholder默认的样式。
解决办法：
input::-webkit-input-placeholder { /* WebKit browsers*/
color:#999;font-size:14px;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18*/
color:#999;font-size:14px;
}
input::-moz-placeholder { /* Mozilla Firefox 19+*/
color:#999;font-size:14px;
}
input:-ms-input-placeholder { /* Internet Explorer 10+*/
color:#999;font-size:14px;
}
11、
问题描述：在所有元素没有超过width:100%的情况下，移动端出现横向滚动条。
解决办法：出现这种情况看一下是否该页面的内容过多，内容过多导致导致页面出现纵向滚动条，占用了页面的宽度
:root {
overflow-y: auto;
overflow-x: hidden;
}
12、
问题描述：根元素设置了line-height，对其内部元素产生影响，例如根元素的字体大小为100px,里面的块元素设置了高度为50px，那么块元素的高度为50px，里边的内联元素依旧是100px，会撑破块元素。
解决办法：（1）内联元素转化为块元素，不会继承根元素的内容；（2）内联元素改变行高
13、
问题描述：解决长串英文字母自动换行。
解决办法：
div{
word-wrap:break-word;
word-break:break-all;
}
14、
问题描述：select默认选中项颜色为灰色，选择后变为黑色。
解决办法：
<script>
$(function () {
var unSelected = "#999";
var selected = "#333";
$("select").css("color", unSelected);
$("option").css("color", selected);
$("select").change(function () {
var selItem = $(this).val();
if (selItem == $(this).find(‘option:first‘).val()) {
$(this).css("color", unSelected);
} else {
$(this).css("color", selected);
}
});
})
</script>
15、
问题描述：解决移动端图片模糊的问题。
解决办法：图片不要用1:1比例的图，用2X的图，这样看起来就很清晰了
16、
问题描述：实现一个文字搜索的功能，要求输入时，键盘回车按钮提示显示为“搜索”。
解决办法：input type = ‘search‘实现搜索框，参考链接 https://segmentfault.com/a/1190000007765742
17、
问题描述：使用html2canvas在前端生成图片。
解决办法：
参考链接
https://segmentfault.com/a/1190000011478657?utm_source=tag-newest
https://www.jianshu.com/p/22bd5b98e38a
需引入html2canvas.js和canvas2image.js；
// 将html绘制成图片
function convert2canvas() {
var shareContent = $(‘#oCanvas‘)[0];//需要截图的包裹的（原生的）DOM 对象
var width = shareContent.offsetWidth; //获取dom 宽度
var height = shareContent.offsetHeight; //获取dom 高度
var canvas = document.createElement("canvas"); //创建一个canvas节点
var scale = 2; //定义任意放大倍数 支持小数
canvas.width = width * scale; //定义canvas 宽度 * 缩放
canvas.height = height * scale; //定义canvas高度 *缩放
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
var opts = {
allowTaint: false,
tainttest:true, //检测每张图片都已经加载完成
scale: scale, // 添加的scale 参数
canvas: canvas, //自定义 canvas
logging: true, //日志开关，便于查看html2canvas的内部执行流程
width: width, //dom 原始宽度
height: height,
useCORS: true, // 【重要】开启跨域配置
};
html2canvas(shareContent, opts).then(function (canvas) {
var context = canvas.getContext(‘2d‘);
// 【重要】关闭抗锯齿
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
// 【重要】默认转化的格式为png,也可设置为其他格式
var img = Canvas2Image.convertToImage(canvas, canvas.width, canvas.height);
console.log(img);
$("#oCanvas").append(img);
$(img).attr({
‘class‘:‘canvas-img‘,
"crossorigin":"anonymous"
});
$(img).css({
"position":"absolute",
"left":"0",
"top":"0",
"width":canvas.width / 2 + "px",
"height":canvas.height / 2 + "px",
"z-index":"10000"
})
});
}
18、
问题描述：动画暂停和运行。
解决办法：animation-play-state属性，paused暂停；running运行
原文地址：https://www.cnblogs.com/congke/p/10120629.html