Ошибка переполнения в Firefox с CSS-фоном и закругленными границами - PullRequest
Новая
       15

Ошибка переполнения в Firefox с CSS-фоном и закругленными границами

0 голосов
/ 14 февраля 2012

Я пытаюсь создать кнопку с оранжевым фоном и закругленными границами, но проблема в переполнении фона.Я не вижу никаких проблем в Chrome.

Я использовал overflow: hidden, но без помощи.Есть идеи?

Вот код: 

display: inline-block;
padding: 8px 15px 6px;
background: -moz-linear-gradient(top, #f8cc55, #ba701d);
background: -webkit-linear-gradient(#f8cc55, #ba701d);
background: -o-linear-gradient(#f8cc55, #ba701d);
background: -ms-linear-gradient(#f8cc55, #ba701d);
background: linear-gradient(#f8cc55, #ba701d);
color: #1f2b20;
text-shadow: 0 1px 0 #e3bf8b;
font-size: 14px;
border-radius: 15px;
border: 3px solid #2e2e2e;
box-shadow: 0 1px 0 #fff inset;

Firefox overflow problem overflow

Chrome http://f.cl.ly/items/1c280g3r121Z2i3d0803/Screen%20Shot%202012-02-14%20at%2012.27.51%20AM.png

Ответы [ 2 ]

4 голосов
/ 14 февраля 2012

Что вы, вероятно, хотите использовать в Firefox : background-clip: 

background: -moz-linear-gradient(top, #f8cc55, #ba701d);
background: -webkit-linear-gradient(#f8cc55, #ba701d);
background: -o-linear-gradient(#f8cc55, #ba701d);
background: -ms-linear-gradient(#f8cc55, #ba701d);
background: linear-gradient(#f8cc55, #ba701d);
color: #1f2b20;
text-shadow: 0 1px 0 #e3bf8b;
font-size: 14px;
border-radius: 15px;
border: 3px solid #2e2e2e;
box-shadow: 0 1px 0 #fff inset;
background-clip: padding-box;

Вот пример . Помните, что свойство background будет сбрасывать значения для любого из не указанных под-свойств, поэтому ставьте background-clip last.

0 голосов
/ 14 февраля 2012

Если box-shadow не является обязательным, удалите его.Это решит проблему:)

...