CSS3 градиентные дисплеи с разной насыщенностью в разных браузерах. Как решить эту проблему? Не удалось найти ничего полезного. http://d.pr/i/chm1CSS3 градиент выглядит по-разному в браузерах
Вот код:
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);
}
Если они настаивают на том, что они выглядят одинаково, тогда вы правы. Но реальное решение не должно быть чрезмерно чувствительным к различиям браузера. Да, он должен убедиться, что он хорошо выглядит во всех браузерах, но если вы пытаетесь заставить его выглядеть на 100% одинаковым везде, вы просите о проблемах и блокируете себя от использования функций, которые не поддерживаются на все браузеры. Кроме того, имейте в виду, что браузеры действительно визуализируют изображения по-разному, поэтому даже это не может быть идеальным решением. – Spudley
Я признаю, что это не идеальное решение. Интересно, кто может дать идеальное решение. – user1441816