关于sifari兼容性的一个问题

Posted 2020-08-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于sifari兼容性的一个问题相关的知识，希望对你有一定的参考价值。

输入框一个很基础的控件结果出现了兼容性问题在chrome ie android上页面正常结果在Safari和ios系统里面输入框无法输入，

点击后边框有高亮效果但是无法输入文本，问题代码如下：

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style type="text/css">
	*{
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}

	</style>
	</head>
	<body>
	<input type="text" placeholder="账号">
	</body>
	</html>

查询资料：

大部分情况下，使用这个属性的目的是为了界面的美化，
因为手机端很容易因为用户长按屏幕出现文本选择框，
很丑，影响用户体验，所以在没有复制黏贴这种需求的
页面里，一般会使用这个属性禁止用户选择。

解决方法有三种：

1.注释掉-webkit-user-select: none;这行代码

2.通过JS实现界面的美化

3.重新声明：

input {
	-webkit-user-select: auto !important;
	}

以上是关于关于sifari兼容性的一个问题的主要内容，如果未能解决你的问题，请参考以下文章