2012-06-07 4 views
2

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); 

} 

ответ

2

Проблема заключается в путь браузеров рендеринга различны. Использование образа - лучший способ сделать его похожим.

+1

Если они настаивают на том, что они выглядят одинаково, тогда вы правы. Но реальное решение не должно быть чрезмерно чувствительным к различиям браузера. Да, он должен убедиться, что он хорошо выглядит во всех браузерах, но если вы пытаетесь заставить его выглядеть на 100% одинаковым везде, вы просите о проблемах и блокируете себя от использования функций, которые не поддерживаются на все браузеры. Кроме того, имейте в виду, что браузеры действительно визуализируют изображения по-разному, поэтому даже это не может быть идеальным решением. – Spudley

+0

Я признаю, что это не идеальное решение. Интересно, кто может дать идеальное решение. – user1441816

0

Достижение идентичного представления в браузерах - это огромная проблема времени. С точки зрения бизнеса, вы должны спросить себя, являются ли требования одинаковыми во всех браузерах или просто хорошо выглядеть во всех браузерах.

+0

Я согласен, что в моих работах мне нужно, чтобы проекты выглядели хорошо и правильно, но теперь я делаю одно небольшое исследование, и эта проблема неясна для меня, я хотел быть уверенным в своих выводах. –

Смежные вопросы