整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
什么發(fā)送響應(yīng)式，瀏覽器友好的電子郵件仍然這么麻煩？如果你對(duì)尋找合適的電子郵件模板而感到不滿意，并且一再反復(fù)編碼這些模板，并且嘗試在幾十種不同的設(shè)備上完全響應(yīng)，那么不妨嘗試一下以下幾種響應(yīng)式電子郵件模板。
1.Cerberus
這是一個(gè)免費(fèi)的模板，帶有簡(jiǎn)單的響應(yīng)模式，供你在編寫HTMl電子郵件時(shí)使用。響應(yīng)式電子郵件，并兼容所有瀏覽器和電子郵件客戶端，包括Outlook！
2.Foundation for Emails
Foundation for Emails可以創(chuàng)建普遍兼容的免費(fèi)的，響應(yīng)式電子郵件模板。不僅是響應(yīng)，而且模板也可以使用Sass快速編輯。
3.Antwort
Antivort網(wǎng)站的風(fēng)格十分簡(jiǎn)單，但提供的模板很不錯(cuò)。易于使用和自定義，也輕便，而且完全免費(fèi)。
4.Campaign Monitor
Campaign Monitor是一個(gè)電子郵件營(yíng)銷公司，與許多其他服務(wù)一起免費(fèi)提供，豐富多彩，創(chuàng)意和行業(yè)特定的電子郵件模板。
5.Basic Responsive Email Template
如果正在尋找時(shí)尚元素不是那么強(qiáng)烈的模板，Campaign Monito模板會(huì)比較適合。它是基本的，而且是通用的，可簡(jiǎn)單定制！
6.Responsive HTML Email Template
在iPhone和平板電腦之前，響應(yīng)式設(shè)計(jì)甚至不需要時(shí)，人們習(xí)慣使用表格來設(shè)計(jì)和構(gòu)建幾乎所有的東西，從大網(wǎng)頁(yè)到小電子郵件。由于表格已經(jīng)不再是常態(tài)。但是，如果對(duì)于老式學(xué)?；蚱珎鹘y(tǒng)的行業(yè)，根據(jù)自身的需要，還會(huì)使用表格，則該模板是一個(gè)很好的選擇。
7.Future-Proof Email Template
此電子郵件模板都是響應(yīng)式的，它可以在超級(jí)舊的瀏覽器和電子郵件客戶端版本上運(yùn)行。只使用最基本的簡(jiǎn)單代碼來實(shí)現(xiàn)樣式。
8.MJML
MJML是一個(gè)免費(fèi)的響應(yīng)式電子郵件框架，重量輕，易于使用。它包含使代碼易于編輯和調(diào)整的組件，并且只需要幾秒鐘即可向你的電子郵件模板添加新的內(nèi)容。
何解決瀏覽器兼容性問題？ 是否可以通過調(diào)整css解決瀏覽器兼容性問題？
讓我們來看看。 用這四個(gè)解決方案解決CSS瀏覽器的兼容性問題吧。
對(duì)我們來說，網(wǎng)絡(luò)前端既是高薪專家，同時(shí)也是艱苦職業(yè)。 不僅是因?yàn)榧夹g(shù)的更新?lián)Q代快，更因?yàn)閼?yīng)該學(xué)習(xí)的知識(shí)比什么都多。 要解決所有的瀏覽器兼容性問題并不是一件容易的事，尤其是在瀏覽器普及到互聯(lián)網(wǎng)的情況下。
解決CSS瀏覽器兼容性問題的四種解決方案
為什么會(huì)有瀏覽器兼容性問題？
不是因?yàn)闉g覽器制造商太多！
Chrome，F(xiàn)rirefox，Safari，Edge，IE6，IE7，IE8，IE9.360安全瀏覽器，qq瀏覽器，世界之窗，TT，Sogou，opera，maxthon
重要的是，即使是不同制造商、甚至同一制造商的不同版本，對(duì)同一段的CSS的分析效果也不一致。 這樣會(huì)導(dǎo)致頁(yè)面顯示效果不一致，還會(huì)產(chǎn)生兼容性問題。
多么希望Chrome能統(tǒng)一江湖啊~
解決CSS瀏覽器兼容性問題的四種解決方案
按瀏覽器列出的當(dāng)前市場(chǎng)占有率
瀏覽器這么多，我們都不是兼容的。 對(duì)于用戶數(shù)一般的產(chǎn)品，只要做好主流瀏覽器的匹配就可以了。
百度流量研究院提供的2018年8月至2019年2月的數(shù)據(jù)顯示，Chrome占46.28%，IE類仍然占很大比重，反正任重道遠(yuǎn)啊~
解決CSS瀏覽器兼容性問題的四種解決方案
CSS瀏覽器兼容性問題的解決方案和解決方案
今天，我不想關(guān)注太多細(xì)節(jié)的問題。 例如，該css樣式需要兼容性，但希望研究較大的解決方案。 主要包括四個(gè)方面：瀏覽器css風(fēng)格初始化、瀏覽器私有屬性、CSS hack語法和自動(dòng)化插件。
1 .初始化瀏覽器CSS樣式
因?yàn)槊總€(gè)瀏覽器的css缺省樣式都不一樣，所以最簡(jiǎn)單有效的方法是對(duì)其進(jìn)行初始化。 我相信很多朋友都寫過這樣的代碼，在所有的css開始之前，將marin和padding設(shè)置為0以避免不同的瀏覽器顯示效果不同。
*{
邊距： 0；
padding: 0；
}
關(guān)于瀏覽器CSS樣式的初始化，如果沒有豐富的經(jīng)驗(yàn)，可能不知道該初始化什么。 在此，建議使用Normalize.css。 github star的數(shù)量接近3.4萬，從中選擇了幾種樣式設(shè)定進(jìn)行展示。 如下所示
html {
行高： 1.15；/* correctthelineheightinallbrowsers * /
- web kit-text-size-adjust :100；/* preventadjustmentsoffontsizeafterorientationchangesinios.* /
}
body {
邊距： 0；
}
a {
背景顏色：傳輸；/* removethegraybackgroundonactivelinksinie 10.* /
}
img {
border-style: none；/* removetheborderonimagesinsidelinksinie 10.* /
}
我相信初始化CSS樣式可以解決許多常見的兼容性問題，接下來我們來看看瀏覽器的專用屬性。
2 .瀏覽器的專用屬性
我們?cè)诔Ｒ姷腃SS屬性前添加-webkit-、-moz--ms--等前綴。 這些是瀏覽器的專用屬性。
為什么會(huì)出現(xiàn)私人屬性呢？ 這是因?yàn)橹贫薍TML和CSS標(biāo)準(zhǔn)的組織W3C動(dòng)作緩慢。
通常，一個(gè)W3C組織的成員會(huì)提出一些新的屬性，如圓角border-radius，大家都認(rèn)為很好，但W3C必須制定標(biāo)準(zhǔn)，進(jìn)行復(fù)雜的流程、審核等。 瀏覽器制造商的營(yíng)銷很花時(shí)間，如果一個(gè)屬性足夠成熟，就會(huì)給瀏覽器增加支持。
但是，通過添加專用前綴(如-webkit-border-radius )來預(yù)支持新屬性，以避免在以后W3C發(fā)布標(biāo)準(zhǔn)時(shí)發(fā)生更改。 日后W3C會(huì)公布標(biāo)準(zhǔn)，建立border-radius的標(biāo)準(zhǔn)格式，然后讓新版本的瀏覽器支援border-radius格式。 一般前綴如下
-moz表示firefox瀏覽器的專用屬性
-ms表示IE瀏覽器的專用屬性
-webkit表示chrome，safari的私有屬性
-o表示opera的私有屬性
注意私有屬性的順序，在標(biāo)準(zhǔn)表示法的最后，將互換表示法放在前面
- WebKit-transform : rotate (-3d eg )； /*是Chrome/Safari*/
-moz-transform3360rotate(-3DEG )； /*是Firefox*/
-ms-transform3360rotate(-3DEG )； /*是IE*/
-o-transform3360rotate(-3DEG )； /*是Opera*/
transform:rotate(-3deg )；
為每個(gè)CSS屬性編寫這樣的兼容性代碼，無疑是對(duì)生命最大的浪費(fèi)。 稍后我將介紹如何在自動(dòng)化插件中處理它。
3. CSS hack
您可能需要為不同的瀏覽器或不同的版本編寫特定的CSS樣式。 為這種不同的瀏覽器/不同的版本編寫相應(yīng)的CSS代碼的過程稱為CSS hack！
CSS hack的寫法大致分為條件hack、屬性電平hack和選擇器電平hack三種。
條件hack
條件hack主要對(duì)IE瀏覽器進(jìn)行特殊設(shè)置
語法：
取得價(jià)格
keywords
if后面的條件有六個(gè)選擇：“否”、“大于”、“大于或等于”、“小于或等于”、“小于或等于”和“非指定版本”
否：指定是IE還是IE的版本。 關(guān)鍵字：空
大于-選擇大于指定版本的IE版本。 關(guān)鍵詞： gt(greaterthan ) ) ) ) ) ) ) )。
大于或等于：選擇大于或等于指定版本的IE版本。 關(guān)鍵字： GTE(greaterthanorequal ) )。
小于：選擇小于指定版本的IE版本。 關(guān)鍵字： lt(lessthan ) )。
小于或等于：選擇小于或等于指定版本的IE版本。 關(guān)鍵字： LTE(lessthanorequal ) )
非指定版本：選擇除指定版本外的所有IE版本。 關(guān)鍵字：
version
IE瀏覽器版本，如6、7、8
IE10及以上版本已將條件注釋特性移除，使用時(shí)需注意。
§ 舉例
<!--[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]-->
屬性級(jí)hack
屬性hack就是在CSS樣式屬性名前加上一些只有特定瀏覽器才能識(shí)別的hack前綴。
§ 語法：
selector{<hack>?property:value<hack>?;}
§ 取值：
：選擇IE6及以下。連接線（中劃線）（-）亦可使用，為了避免與某些帶中劃線的屬性混淆，所以使用下劃線（）更為合適。
：選擇IE7及以下。諸如：（+）與（#）之類的均可使用，不過業(yè)界對(duì)（）的認(rèn)知度更高
9：選擇IE6+
：選擇IE8+和Opera15以下的瀏覽器
§ 舉例
如在不同的IE瀏覽器中設(shè)置不同的顏色，注意順序：低版本的兼容性寫法放到最后
.test {
color: #0909; /* For IE8+ */
*color: #f00; /* For IE7 and earlier */
_color: #ff0; /* For IE6 and earlier */
}
選擇符級(jí)hack
選擇符級(jí)hack是針對(duì)一些頁(yè)面表現(xiàn)不一致或者需要特殊對(duì)待的瀏覽器，在CSS選擇器前加上一些只有某些特定瀏覽器才能識(shí)別的前綴進(jìn)行hack。
§ 語法：
<hack> selector{ sRules }
§ 取值：
§ 常見的選擇符級(jí)hack有
*html *前綴只對(duì)IE6生效
*+html *+前綴只對(duì)IE7生效
@media screen{...}只對(duì)IE6/7生效
@media >@media \0screen {body { background: red; }}只對(duì)IE8有效
@media >@media \0screen\,screen\9{body { background: blue; }}只對(duì)IE6/7/8有效
@media screen>@media screen\0 {body { background: green; }} 只對(duì)IE8/9/10有效< {body { background: green; }} 只對(duì)IE8/9/10有效
@media screen and (min-width:0>@media screen and (min-width:0\0) {body { background: gray; }} 只對(duì)IE9/10有效<) {body { background: gray; }} 只對(duì)IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對(duì)IE10有效
§ 舉例：
* html .test { color: #090; } /* For IE6 and earlier */
* + html .test { color: #ff0; } /* For IE7 */
看到這里，我不得不為前端人員自豪，這也太難了吧~~
不過花大力氣解決這些兼容性問題， 并不能給我們技術(shù)上帶來什么大的提升，無非是給各個(gè)瀏覽器廠商填坑罷了，隨著時(shí)間的流逝，這些技術(shù)的價(jià)值也會(huì)越來越小，怎么花最小的力氣解決css兼容性問題，讓我們把更多的時(shí)間留給美好的生活，才是關(guān)鍵，好在有一些自動(dòng)化插件可以幫我們從繁重的兼容性處理中解脫處理。
4. 自動(dòng)化插件
Autoprefixer是一款自動(dòng)管理瀏覽器前綴的插件，它可以解析CSS文件并且添加瀏覽器前綴到CSS內(nèi)容里，使用Can I Use（caniuse網(wǎng)站）的數(shù)據(jù)來決定哪些前綴是需要的。
把Autoprefixer添加到資源構(gòu)建工具（例如Grunt）后，可以完全忘記有關(guān)CSS前綴的東西，只需按照最新的W3C規(guī)范來正常書寫CSS即可。如果項(xiàng)目需要支持舊版瀏覽器，可修改browsers參數(shù)設(shè)置 。
//我們編寫的代碼
div {
transform: rotate(30deg);
}
// 自動(dòng)補(bǔ)全的代碼，具體補(bǔ)全哪些由要兼容的瀏覽器版本決定，可以自行設(shè)置
div {
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
目前webpack、gulp、grunt都有相應(yīng)的插件，如果還沒有使用，那就趕緊應(yīng)用到我們的項(xiàng)目中吧，別再讓CSS兼容性浪費(fèi)你的時(shí)間！
常見的瀏覽器兼容性問題與解決方案——CSS篇
1、不同的瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同
問題癥狀：隨便寫幾個(gè)標(biāo)簽，不加樣式控制的情況下，各自的margin和padding差異較大。
碰到頻率：100%
解決方案：初始化CSS的默認(rèn)樣式，*{margin:0;padding:0}。也可以使用其他網(wǎng)站的初始化代碼。
備注：這個(gè)是最常見的也是最容易解決的一個(gè)瀏覽器兼容性問題。
2、塊屬性標(biāo)簽float后，又有橫行的margin情況下，在IE6顯示margin比設(shè)置的大
問題癥狀：常見的是IE6中后面的一塊被頂?shù)较乱恍小?/span>
碰到頻率：90%
解決方案：在float的標(biāo)簽樣式控制中加入display:inline；將其轉(zhuǎn)化為行內(nèi)屬性。
3、設(shè)置較小高度標(biāo)簽，在IE6、IE7和遨游瀏覽器中高度超出自己設(shè)置的高度
問題癥狀：IE6、IE7和遨游瀏覽器里這個(gè)標(biāo)簽的高度不受控制，超出自己設(shè)置的高度。
碰到頻率：60%
解決方案：給超出高度的標(biāo)簽設(shè)置overflow：hidden；或者設(shè)置行高line-height小于你設(shè)置的高度。
4、行內(nèi)屬性標(biāo)簽，設(shè)置display：block后采用float布局，又有橫行的margin的情況，IE6間距bug
問題癥狀：IE6里的間距比超過設(shè)置的間距。
碰到頻率：20%
解決方案：在display：block；后面加入display：inline；display：table；
5、圖片默認(rèn)有間距
問題癥狀：幾個(gè)img標(biāo)簽放在一起的時(shí)候，有些瀏覽器會(huì)有默認(rèn)的間距，加了margin：0；和padding：0也不起作用。
碰到頻率：20%
解決方案：使用float屬性為img布局。
6、標(biāo)簽最低高度設(shè)置min-height不兼容
問題癥狀：因?yàn)閙in-height本身就是一個(gè)不兼容的CSS屬性，所以設(shè)置min-height時(shí)不能很好的被各個(gè)瀏覽器兼容。
碰到頻率：20%
解決方案：如果我們需要設(shè)置一個(gè)標(biāo)簽的最小高度是200px，需要進(jìn)行的設(shè)置為：{min-height:200px;height:auto !importtant;height:200px;overflow:visible;}
當(dāng)今多樣化的瀏覽器環(huán)境中，網(wǎng)頁(yè)在不同瀏覽器中都能正常顯示和運(yùn)行是前端開發(fā)者的一大挑戰(zhàn)。瀏覽器兼容性問題不僅影響用戶體驗(yàn)，還可能導(dǎo)致功能無法正常使用。下面為大家分享幾種有效解決瀏覽器兼容問題的方法。
確保代碼符合最新的HTML和CSS標(biāo)準(zhǔn)是解決兼容性問題的基礎(chǔ)。使用W3C驗(yàn)證工具檢查和修復(fù)代碼中的錯(cuò)誤，可以減少因不標(biāo)準(zhǔn)的代碼導(dǎo)致的兼容性問題。
不同瀏覽器對(duì)默認(rèn)樣式的處理存在差異，使用CSS重置（Reset CSS）或歸一化（Normalize.css）可以消除這些差異，提供一致的起點(diǎn)。Normalize.css相較于Reset CSS，更加溫和地處理默認(rèn)樣式，推薦使用。
使用現(xiàn)代JavaScript庫(kù)和框架如jQuery、React、Vue等，可以簡(jiǎn)化跨瀏覽器的DOM操作和事件處理。這些庫(kù)和框架通常已經(jīng)解決了大部分兼容性問題。
某些CSS3特性在不同瀏覽器中的支持情況不同，需要添加瀏覽器前綴。使用Autoprefixer等工具可以自動(dòng)為CSS代碼添加必要的前綴，確保在各個(gè)瀏覽器中的兼容性。
使用媒體查詢和響應(yīng)式設(shè)計(jì)技術(shù)，確保網(wǎng)頁(yè)在不同設(shè)備和瀏覽器窗口大小下都能正常顯示。Bootstrap、Foundation等前端框架提供了豐富的響應(yīng)式設(shè)計(jì)組件，幫助快速實(shí)現(xiàn)兼容性。
針對(duì)IE瀏覽器的特定版本，可以使用條件注釋來加載特定的CSS或JavaScript代碼，修復(fù)在這些瀏覽器中的兼容性問題。雖然這種方法現(xiàn)在較少使用，但在處理老舊版本的IE時(shí)仍然有效。
Polyfill和Shim是用于在較舊的瀏覽器中實(shí)現(xiàn)現(xiàn)代API和功能的代碼片段。Modernizr可以檢測(cè)瀏覽器對(duì)HTML5和CSS3特性的支持情況，并根據(jù)檢測(cè)結(jié)果加載相應(yīng)的Polyfill。
利用瀏覽器自帶的開發(fā)者工具（如Chrome DevTools、Firefox Developer Tools等），可以快速調(diào)試和修復(fù)兼容性問題。這些工具提供了豐富的調(diào)試功能，包括元素檢查、網(wǎng)絡(luò)請(qǐng)求分析、JavaScript調(diào)試等。
解決瀏覽器兼容問題需要綜合運(yùn)用多種方法，使用這些工具和技術(shù)，可以有效提升網(wǎng)頁(yè)在不同瀏覽器中的兼容性。711Proxy提供純凈住宅代理，支持多種業(yè)務(wù)需求。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
