Почему этот градиент не охватывает весь элемент?

У меня есть следующие CSS:Почему этот градиент не охватывает весь элемент?

<a class="button"> 
    <span>Y</span> 
</a> 

    .button { 
     -moz-border-bottom-colors: none; 
     -moz-border-left-colors: none; 
     -moz-border-right-colors: none; 
     -moz-border-top-colors: none; 
    background-color: #206CAF; 
    background: -moz-linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%) repeat scroll 0 0 #206CAF; 
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0.1)),color-stop(100%,rgba(0,0,0,0.1))); 
background: -webkit-linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%) repeat scroll 0 0 #206CAF; 
background: -o-linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%); 
background: -ms-linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%); 
background: linear-gradient(top,rgba(255,255,255,0.1) 0,rgba(0,0,0,0.1) 100%); 
    border-color: -moz-use-text-color -moz-use-text-color rgba(0, 0, 0, 0.2); 
    border-image: none; 
    border-radius: 2px 2px 2px 2px; 
    border-style: none none solid; 
    border-width: 0 0 1px; 
    box-shadow: 0 1px 1px rgba(50, 50, 50, 0.15); 
    color: #FFFFFF; 
    cursor: pointer; 
    display: inline-block; 
    font-size: 12px; 
    font-weight: 600; 
    line-height: 12px; 
    outline: 0 none; 
    padding: 5px 10px; 
    text-align: center; 
    text-decoration: none; 
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1); 
}

Когда на хроме и сафари (Mac и Windows) и IE 9 (окна), вся коробка не покрываются градиентом и есть некоторое белое пространство дно. Что-то не так в моем коде или что это должно выглядеть?

См скрипку здесь: http://jsfiddle.net/VmTks/

источник

2013-06-07 starbucks

Расхождение между IE/Chrome/Safari и Firefox вызывается этим правилом:

border-color: -moz-use-text-color -moz-use-text-color rgba(0, 0, 0, 0.2);

Вы должны удалить -moz префиксами свойства и поведение быть последовательным в разных браузерах. Chrome, Safari (и я предполагаю, что IE) неудивительно, что это правило неверно. Вы можете увидеть это в инструментах разработчика Chrome с помощью свойства border-color, имеющего прорыв.

http://jsfiddle.net/VmTks/4/

источник

2013-06-07 22:51:21 Adrift

Ahh .... следовательно, моя граница не удалена. Как вы обнаружили, что Chrome объявляет его недействительным. – Leeish

Chrome dev. инструменты - вы увидите перечеркнуть свойство 'border-color' – Adrift

Я вижу. Я думал, что это только вычеркнутые декларации, которые были заменены, а не те, которые игнорировались. Приятно знать. Поэтому он установил границу не, но по какой-то причине использовал префикс поставщика. – Leeish

Я добавил border-bottom: none и установил ее для меня. Когда я удалил вашу декларацию цвета, я увидел, что она удалила белый бар, поэтому я решил, что это связано с текстом. Я точно не знаю, почему, но я просто перепутал с разными, пока я не был удален. Сначала я подумал, что это было подчеркнуто, но я увидел, что это уже было.

источник

2013-06-07 22:52:16 Leeish

Я просто увеличил изображение, и вы действительно были правы! +1 – lifetimes

Вы хотите сказать: -moz-border-bottom-colors: none; – starbucks

Я не знаю, почему вы так заявляете. если вы не хотите, чтобы границы не делали: 'border: none;'. Почему префикс '-moz-'? И divs не имеют границы по умолчанию, поэтому зачем вообще объявлять. Вы можете объявить радиус границы без цвета, изображения, стиля или ширины. – Leeish

Я считаю, что эта линия

background: linear-gradient(top,

должен быть

background: linear-gradient(to bottom,

, но я не 100% уверен - извинения, если нет!

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

источник

2013-06-07 23:00:20

Почему этот градиент не охватывает весь элемент?

ответ

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