未出現在電子郵件中的CSS屬性

在我的spree商店中，我準備郵件發送訂單確認電子郵件，但CSS屬性：justify-content未出現在呈現的電子郵件中。未出現在電子郵件中的CSS屬性

以下是我的HTML：

<div class="banner"> 
    <img class="height-50perc banner-content" src="https://myUrl" /> 
    <span class="banner-content">Order confirmed</span> 
    </div>

我的CSS：

.banner { 
    display: flex; 
    height: 80px; 
    background: linear-gradient(90deg, #2e3092 , #0c5fdc); 
    justify-content: space-between; 
} 

.banner-content { 
    margin-top: auto; 
    margin-bottom: auto; 
    margin-left: 10px; 
    margin-right: 10px; 
    color: white; 
    font-size: 20px; 
}

但在渲染電子郵件，我看不到屬性：justify-content。當我檢查相應的元素：它是這樣的：

<div class="m_2586726072602943149banner" style="background:linear-gradient(90deg,#2e3092,#0c5fdc);display:flex;height:80px"> 
    .... 
</div>

公告有這div沒有justify-content。我正在Mac瀏覽Chrome和Firefox瀏覽器。

我也試圖改變CSS來：

.banner { 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    height: 80px; 
    background: linear-gradient(90deg, #2e3092 , #0c5fdc); 
    justify-content: space-between; 
    -webkit-justify-content: space-between; 
}

但這也沒有幫助。

來源

2017-02-22 Saurabh

如果你正在附加任何css文件，那麼它將無法正常工作。嘗試添加內聯屬性。 – Aslam

@hunzaboy嘗試了兩種方式，實際上瘋狂照顧CSS文件，這就是爲什麼其他屬性即將到來，但也嘗試將其作爲內聯以及。沒有工作。 – Saurabh

可能的重複：[** flex-box屬性在gmail電子郵件中刪除**]（http://stackoverflow.com/q/39376710/3597276） –

似乎支持Flex的仍然不是適當的在這個link

解釋現在，這裏是在不支持Flexbox的的提醒服務：

雅虎

的Gmail

Outlook.com

Gmail和Outlook.com還會過濾與Flexbox相關的所有屬性，但屬性display:flex除外。

這可能是爲什麼我甚至無法在呈現的電子郵件中看到justify-content的原因。

來源

2017-02-22 11:00:30 Saurabh

未出現在電子郵件中的CSS屬性

回答

相關問題