Question

我正在使用最新版本的Angular（第5版）和Bootstrap（4）进行项目。

经过几周的开发，一些功能开始在Safari上发出嘎嘎声。我甚至不确定IE中是否所有功能仍然按预期工作。

作为一名使用最新javascript和css框架的现代前端开发人员，显然不支持旧浏览器。

Bootstrap支持所有主流浏览器和平台的最新稳定版本。在Windows上，我们支持Internet Explorer 10-11 / Microsoft Edge。

我应该关心浏览器兼容性吗？

如果我必须关心，我该怎么做才能解决这些错误？

我正在寻找建议以做出更好的决定。

Answer 1

这实际上取决于您的受众/项目。你关心使用IE6 +的人吗？您是否关心您的网站不是100％相同，具体取决于平台？

在现场，人们通常会说您的网站在所有桌面浏览器中都是相同的，并且您应该首先开发移动设备。

但是，我真的很喜欢this talk about CSS Grid，Rand-Hendriksen说我们不应该关心网站是否不同。在谈到CSS Grid（CSS的现代布局系统）时，他说如果浏览器不支持它，他就会回退到移动布局。

您是否应该关注浏览器兼容性？是的，某种灭绝，但你不必滥用它。 React / Angular不会破坏兼容性，但你在其中编写的HTML / CSS / JS可以。

Answer 2

对于Internet Explorer，您可以使用多文件。只需转到src文件夹中的polyfills.ts。

$conexao = new mysqli($servername, $username, $password, $dbname);
$login = isset($_POST['Login']) ? $_POST['Login'] : '';
$senha = isset($_POST['Senha']) ? $_POST['Senha'] : '';

$sql_auth = "SELECT Login, Senha FROM usuarios where Login = '$login' AND Senha = '$senha'";
$decrypt_senha_DB = password_verify($senha, $sql_auth);
$resultado_auth = $conexao -> query($decrypt_senha_DB);

if ($resultado_auth -> num_rows === 0) {
echo '<script type = "text/javascript" > alert("Incorrect user and/or password!") </script>';
exit();
}

else {
header('location: https://www.google.com.br/');
}

对于CSS差异我使用scss重新编写，为所有浏览器添加了可比的样式。

Answer 3

是的，你这样做。甚至现代浏览器之间也存在细微差别见Different behavior of flexbox with (overflow-y) scroll on Safari, Firefox and Edge VS Chrome

但这很容易。使用像Sass这样的CSS编译器几乎可以处理浏览器之间的所有可能的不一致。

Answer 4

浏览器兼容性完全取决于您正在开发的内容。重要的是要考虑你的用户是谁。 Internet Explorer 11通常是最早支持的最佳Microsoft浏览器。

就Safari中的问题而言，如果您澄清具体问题以便解决问题，可能会有所帮助。

如果IE6 +真的是一个问题，Polyfills也是一个很好的解决方案。请看Udi的anwser。

在使用现代JS和CSS框架时，如何处理浏览器兼容性？

4 个答案: