WDC20之后，相信很多朋友都已经尝鲜了新的iOS 14。现已八月份，iOS 14也来到了第四个测试版（不推荐更新，软件兼容性极差），正式版预计要十月中旬才能推出。

Apple在iOS的每个新版本中几乎都对所有的内置应用程序进行了改进，iOS 14也不例外。对于Safari，Apple添加了一些很有用的新功能，例如内置翻译、画中画和隐私报告，该报告提供了Safari阻止的所有跟踪器的摘要。

速度和性能改进

据苹果称，iOS 14中的Safari具有“快速的JavaScript引擎”，使Safari的速度比Android上的Chrome快2倍。

内置翻译

?iOS 14?中的Safari具有内置的翻译功能，可用于将网站翻译为英语，西班牙语，中文，法语，德语，俄语或巴西葡萄牙语。这个更新对于经常逛外文网页，但英语又不太好的人，真的是大爱了。

其实Chrome早就支持了网页翻译，翻译效果也很准确。配合扩展，Chrome也一直是我主流在用的浏览器。但是Chrome，不使用一些小技巧，对于大多数用户来说总还是不那么顺手。

对于苹果生态来说，Safari是一款很好用的浏览器。这次iOS 14中Safari内置翻译的加入，会将我工作的浏览器使用频率向Safari转移。使用Safari网页翻译很简单，只需要在受支持语言的网页，点击菜单栏中的“ AA”图标，然后点按“翻译”选项，网页将自动翻译为手机设置的语言。

当然，你也可以在?iPhone?的“设置”应用程序中添加其他想要翻译的语言。不仅iOS，iPad OS和Mac OS也支持哦。

画中画

这次关于Safari的更新，另一个我最喜欢的就是画中画功能了。在?iPhone?上的Safari中，如果您正在观看视频，现在就可以点击“画中画”按钮以窗口模式观看它，以便在播放视频的时侯可以继续浏览另一个网站或在?iPhone?上进行其他操作。

同样，画中画功能在苹果生态中也是全系统支持哦。

完！

何解决浏览器兼容性问题？ 是否可以通过调整css解决浏览器兼容性问题？

让我们来看看。 用这四个解决方案解决CSS浏览器的兼容性问题吧。

对我们来说，网络前端既是高薪专家，同时也是艰苦职业。 不仅是因为技术的更新换代快，更因为应该学习的知识比什么都多。 要解决所有的浏览器兼容性问题并不是一件容易的事，尤其是在浏览器普及到互联网的情况下。

解决CSS浏览器兼容性问题的四种解决方案

为什么会有浏览器兼容性问题？

不是因为浏览器制造商太多！

Chrome，Frirefox，Safari，Edge，IE6，IE7，IE8，IE9.360安全浏览器，qq浏览器，世界之窗，TT，Sogou，opera，maxthon

重要的是，即使是不同制造商、甚至同一制造商的不同版本，对同一段的CSS的分析效果也不一致。 这样会导致页面显示效果不一致，还会产生兼容性问题。

多么希望Chrome能统一江湖啊~

解决CSS浏览器兼容性问题的四种解决方案

按浏览器列出的当前市场占有率

浏览器这么多，我们都不是兼容的。 对于用户数一般的产品，只要做好主流浏览器的匹配就可以了。

百度流量研究院提供的2018年8月至2019年2月的数据显示，Chrome占46.28%，IE类仍然占很大比重，反正任重道远啊~

解决CSS浏览器兼容性问题的四种解决方案

CSS浏览器兼容性问题的解决方案和解决方案

今天，我不想关注太多细节的问题。 例如，该css样式需要兼容性，但希望研究较大的解决方案。 主要包括四个方面：浏览器css风格初始化、浏览器私有属性、CSS hack语法和自动化插件。

1 .初始化浏览器CSS样式

因为每个浏览器的css缺省样式都不一样，所以最简单有效的方法是对其进行初始化。 我相信很多朋友都写过这样的代码，在所有的css开始之前，将marin和padding设置为0以避免不同的浏览器显示效果不同。

*{

边距： 0；

padding: 0；

}

关于浏览器CSS样式的初始化，如果没有丰富的经验，可能不知道该初始化什么。 在此，建议使用Normalize.css。 github star的数量接近3.4万，从中选择了几种样式设定进行展示。 如下所示

html {

行高： 1.15；/* correctthelineheightinallbrowsers * /

- web kit-text-size-adjust :100；/* preventadjustmentsoffontsizeafterorientationchangesinios.* /

}

body {

边距： 0；

}

a {

背景颜色：传输；/* removethegraybackgroundonactivelinksinie 10.* /

}

img {

border-style: none；/* removetheborderonimagesinsidelinksinie 10.* /

}

我相信初始化CSS样式可以解决许多常见的兼容性问题，接下来我们来看看浏览器的专用属性。

2 .浏览器的专用属性

我们在常见的CSS属性前添加-webkit-、-moz--ms--等前缀。 这些是浏览器的专用属性。

为什么会出现私人属性呢？ 这是因为制定了HTML和CSS标准的组织W3C动作缓慢。

通常，一个W3C组织的成员会提出一些新的属性，如圆角border-radius，大家都认为很好，但W3C必须制定标准，进行复杂的流程、审核等。 浏览器制造商的营销很花时间，如果一个属性足够成熟，就会给浏览器增加支持。

但是，通过添加专用前缀(如-webkit-border-radius )来预支持新属性，以避免在以后W3C发布标准时发生更改。 日后W3C会公布标准，建立border-radius的标准格式，然后让新版本的浏览器支援border-radius格式。 一般前缀如下

-moz表示firefox浏览器的专用属性

-ms表示IE浏览器的专用属性

-webkit表示chrome，safari的私有属性

-o表示opera的私有属性

注意私有属性的顺序，在标准表示法的最后，将互换表示法放在前面

- WebKit-transform : rotate (-3d eg )； /*是Chrome/Safari*/

-moz-transform3360rotate(-3DEG )； /*是Firefox*/

-ms-transform3360rotate(-3DEG )； /*是IE*/

-o-transform3360rotate(-3DEG )； /*是Opera*/

transform:rotate(-3deg )；

为每个CSS属性编写这样的兼容性代码，无疑是对生命最大的浪费。 稍后我将介绍如何在自动化插件中处理它。

3. CSS hack

您可能需要为不同的浏览器或不同的版本编写特定的CSS样式。 为这种不同的浏览器/不同的版本编写相应的CSS代码的过程称为CSS hack！

CSS hack的写法大致分为条件hack、属性电平hack和选择器电平hack三种。

条件hack

条件hack主要对IE浏览器进行特殊设置

语法：

取得价格

keywords

if后面的条件有六个选择：“否”、“大于”、“大于或等于”、“小于或等于”、“小于或等于”和“非指定版本”

否：指定是IE还是IE的版本。 关键字：空

大于-选择大于指定版本的IE版本。 关键词： gt(greaterthan ) ) ) ) ) ) ) )。

大于或等于：选择大于或等于指定版本的IE版本。 关键字： GTE(greaterthanorequal ) )。

小于：选择小于指定版本的IE版本。 关键字： lt(lessthan ) )。

小于或等于：选择小于或等于指定版本的IE版本。 关键字： LTE(lessthanorequal ) )

非指定版本：选择除指定版本外的所有IE版本。 关键字：

version

IE浏览器版本，如6、7、8

IE10及以上版本已将条件注释特性移除，使用时需注意。

§ 举例

<!--[if IE]>

<p>你在非IE中将看不到我的身影</p>

<![endif]-->

<!--[if IE]>

<style>

.test{color:red;}

</style>

<![endif]-->

<!--[if lt IE 9]>

<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

<![endif]-->

属性级hack

属性hack就是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀。

§ 语法：

selector{<hack>?property:value<hack>?;}

§ 取值：

：选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（）更为合适。

：选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（）的认知度更高

9：选择IE6+

：选择IE8+和Opera15以下的浏览器

§ 举例

如在不同的IE浏览器中设置不同的颜色，注意顺序：低版本的兼容性写法放到最后

.test {

color: #0909; /* For IE8+ */

*color: #f00; /* For IE7 and earlier */

_color: #ff0; /* For IE6 and earlier */

}

选择符级hack

选择符级hack是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

§ 语法：

<hack> selector{ sRules }

§ 取值：

§ 常见的选择符级hack有

*html *前缀只对IE6生效

*+html *+前缀只对IE7生效

@media screen{...}只对IE6/7生效

@media >@media \0screen {body { background: red; }}只对IE8有效

@media >@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效

@media screen>@media screen\0 {body { background: green; }} 只对IE8/9/10有效< {body { background: green; }} 只对IE8/9/10有效

@media screen and (min-width:0>@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效<) {body { background: gray; }} 只对IE9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

§ 举例：

* html .test { color: #090; } /* For IE6 and earlier */

* + html .test { color: #ff0; } /* For IE7 */

看到这里，我不得不为前端人员自豪，这也太难了吧~~

不过花大力气解决这些兼容性问题， 并不能给我们技术上带来什么大的提升，无非是给各个浏览器厂商填坑罢了，随着时间的流逝，这些技术的价值也会越来越小，怎么花最小的力气解决css兼容性问题，让我们把更多的时间留给美好的生活，才是关键，好在有一些自动化插件可以帮我们从繁重的兼容性处理中解脱处理。

4. 自动化插件

Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。

把Autoprefixer添加到资源构建工具（例如Grunt）后，可以完全忘记有关CSS前缀的东西，只需按照最新的W3C规范来正常书写CSS即可。如果项目需要支持旧版浏览器，可修改browsers参数设置 。

//我们编写的代码

div {

transform: rotate(30deg);

}

// 自动补全的代码，具体补全哪些由要兼容的浏览器版本决定，可以自行设置

div {

-ms-transform: rotate(30deg);

-webkit-transform: rotate(30deg);

-o-transform: rotate(30deg);

-moz-transform: rotate(30deg);

transform: rotate(30deg);

}

目前webpack、gulp、grunt都有相应的插件，如果还没有使用，那就赶紧应用到我们的项目中吧，别再让CSS兼容性浪费你的时间！

常见的浏览器兼容性问题与解决方案——CSS篇

1、不同的浏览器的标签默认的外补丁和内补丁不同

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin和padding差异较大。

碰到频率：100%

解决方案：初始化CSS的默认样式，*{margin:0;padding:0}。也可以使用其他网站的初始化代码。

备注：这个是最常见的也是最容易解决的一个浏览器兼容性问题。

2、块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

问题症状：常见的是IE6中后面的一块被顶到下一行。

碰到频率：90%

解决方案：在float的标签样式控制中加入display:inline；将其转化为行内属性。

3、设置较小高度标签，在IE6、IE7和遨游浏览器中高度超出自己设置的高度

问题症状：IE6、IE7和遨游浏览器里这个标签的高度不受控制，超出自己设置的高度。

碰到频率：60%

解决方案：给超出高度的标签设置overflow：hidden；或者设置行高line-height小于你设置的高度。

4、行内属性标签，设置display：block后采用float布局，又有横行的margin的情况，IE6间距bug

问题症状：IE6里的间距比超过设置的间距。

碰到频率：20%

解决方案：在display：block；后面加入display：inline；display：table；

5、图片默认有间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了margin：0；和padding：0也不起作用。

碰到频率：20%

解决方案：使用float属性为img布局。

6、标签最低高度设置min-height不兼容

问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容。

碰到频率：20%

解决方案：如果我们需要设置一个标签的最小高度是200px，需要进行的设置为：{min-height:200px;height:auto !importtant;height:200px;overflow:visible;}

头条创作挑战赛#

相信之前使用过 iPhone 手机内置 Safari 浏览器的小伙伴都知道，Safari 能翻译网页中的文本，但网页图片中的文字是不能一并翻译出来的，这多少有点遗憾，因为很多时候网页图片中的文字对于理解整个网页的内容也很重要。不过如果现在你的 iPhone 系统升级到 iOS 16，那么借助 iOS 16 的实况文本功能，你可以实现一键将网页中的文本和网页图片中的文字都一并翻译出来了，非常强大好用，效果惊艳。

以下演示如何操作：

1、使用 Safari 打开一个英文网页（网页需要完整载入），轻点 Safari 地址栏的网址（iOS 16 里的 Safari 地址栏默认在屏幕底部，这里我设置为顶部显示）。

2、轻点 Safari 地址栏右边的“大小”。

3、在弹出窗口中轻点“翻译为简体中文”。

4、1-2秒钟内就可以看到英文网页已经被完整翻译成中文，不论是网页中的文本还是图片中的文字，甚至插在网页中的英文广告也被翻译成中文了！图片中文字的翻译结果会以重叠的方式呈现在图片中原有的文字之上。

Safari 这个网页翻译功能确实非常强大，一键就可以帮你将网页中的文本和网页图片中的文字全部翻译出来，给你一个完整的网页翻译体验，小伙伴们赶快试试吧。