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 這個網頁翻譯功能確實非常強大，一鍵就可以幫你將網頁中的文本和網頁圖片中的文字全部翻譯出來，給你一個完整的網頁翻譯體驗，小伙伴們趕快試試吧。