CSS3漸變在瀏覽器中看起來不同

CSS3漸變顯示在不同瀏覽器中具有不同的飽和度。如何解決這個問題？找不到有用的東西。 http://d.pr/i/chm1 CSS3漸變在瀏覽器中看起來不同

下面的代碼：

HTML

<div class="button-body"> 
    <a href="/" class="text">Купить</a>  
</div>

CSS

.text{ 
font-family: Calibri; 
font-size: 20px; 
text-decoration: none; 
font-weight: bold; 
color: #913944; 

margin-top: 7px; 
margin-left: 70px; 
float: left; 
text-align: center; 

text-shadow: rgba(255,255,255,0.6) 0px 1px 0.5px; 

border-radius: 8px; 
} 

.button-body{ 
height:40px; 
width:200px; 
display:inline-block; 

background: -moz-linear-gradient(top, #ff4d55, #cc1d31); 
background: -webkit-gradient(linear, left top, left bottom, 
       color-stop(0%,#ff4d55), color-stop(100%,#cc1d31)); 
background: -o-linear-gradient(top, #ff4d55, #cc1d31); 

border-radius: 10px; 
border: 2px solid #993f49; 

box-shadow: inset 0 1px 1px rgba(255,255,255,1); 

}

來源

2012-06-07 Katherine Mokhova

的問題是瀏覽器的渲染方式是不同的。使用圖像是使其相似的最佳方式。

來源

2012-06-08 02:38:16 user1441816

如果他們堅持看起來相同，那麼你是對的。但真正的解決方案不是對瀏覽器差異過度敏感。是的，它需要確保它在所有瀏覽器中看起來都不錯，但是如果您試圖使它在任何地方看起來都是100％，那麼您就會遇到麻煩，並且無法使用不受支持的功能所有瀏覽器。另外，請記住，瀏覽器確實會以不同方式渲染圖像，所以即使這可能不是一個完美的解決方案。 – Spudley

我承認這不是一個完美的解決方案。我不知道誰能提供完美的解決方案。 – user1441816

在不同的瀏覽器中實現相同的呈現有時是一個巨大的挑戰。從業務角度來看，您應該問自己，要求是否所有瀏覽器中的元素看起來都是相同的，或者在所有瀏覽器中只需看起來不錯。

來源

2012-06-08 14:15:21

我同意，在我的作品中，我需要的設計只是看起來不錯而且正確，但現在我做了一個小小的研究，這個問題對我來說還不清楚，希望在我的結論中確定。 –

CSS3漸變在瀏覽器中看起來不同

回答

相關問題