Граница CSS3 и с граничным радиусом

У меня возникла проблема с граничным и пограничным радиусом.Граница CSS3 и с граничным радиусом

В Chrome и Firefox Chrome выглядит так, что он очень радует, но firefox не то же самое, что и IE, я также добавил свой CSS ниже. Это <a> тег

любая помощь будет оценена.

enter image description here

#dot{ 
    width: 20px; 
    height: 20px; 
    background: #e10000; 
    color: #FFF; 
    line-height: 20px; 
    text-align: center; 
    -ms-border-radius: 4px; 
    -o-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    margin-top: -5px; 
    position: absolute; 
    left: 40px; 
    top: 12px; 
    border: 1px solid #EAEAEA; 
    text-indent: initial; 
    opacity: 1; 
    visibility: visible; 
    font-size: 1.1em; 
    -webkit-transform: scale(1); 
    -ms-transform: scale(1); 
    -o-transform: scale(1); 
    -moz-transform: scale(1); 
    transform: scale(1); 
}

источник

2013-12-17 Bruce

Добро пожаловать в кроссбраузерной ад. вы являетесь свидетелем отсутствия согласия по возникающим стандартам. – hammus

Пробовал использовать 'box-shadow: 0 0 0 1px #EAEAEA;' также с 'inset', но тот же sh * t. –

Возможно, вам не кажется, что реализация Firefox прекрасна, но я думаю, вы можете предположить, что она догонит будущую версию. На самом деле это не так уж плохо. Как насчет того, чтобы оставить его на данный момент и ожидать, что он будет выглядеть лучше в будущем? – DOK

Все замечания более или менее правильно. В этом случае единственным способом добиться точно сходства между браузерами является изображение. Недавно я сидел на панельной сессии W3C в HTML5 dev conf в SF, CA, и этот точный стандарт (радиус границы) использовался в качестве примера невероятной сложности стандартизации даже простой функции, такой как радиус границы. (Прочитайте спецификацию для удара здесь: http://www.w3.org/TR/css3-background/#the-border-radius). По сути, Roko верен, хром реализует эту функцию с помощью сглаживания, т. Е./Ff нет, по крайней мере, с версией/настройками u.

Хорошая новость заключается в том, что для пользователя, у которого есть эти версии/настройки, это то, как пограничные радиусы «просто смотрят» на них, поэтому ваши не будут обидно отличаться от их глаз.

Я бы оставил его и не беспокоился об этом.

источник

2013-12-17 03:35:47 stolli

Спасибо Stolli оставит его как есть. – Bruce

фиктивная граница

sample

обертка тег с и использование разницы ширины и высоты вместо границы

#dot_wrapper 
, #dot_inner 
{ 
    color: #FFF; 
    line-height: 20px; 
    text-align: center; 
    -ms-border-radius: 4px; 
    -o-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    position: absolute; 
/* 
    border: 1px solid #EAEAEA; 
*/ 
    text-indent: initial; 
    opacity: 1; 
    visibility: visible; 
    font-size: 1.1em; 
    -webkit-transform: scale(1); 
    -ms-transform: scale(1); 
    -o-transform: scale(1); 
    -moz-transform: scale(1); 
    transform: scale(1); 
} 

#dot_wrapper 
{ 
    background: #EAEAEA; 
    width: 22px; 
    height: 22px; 
    left: 40px; 
    top: 50px; 
} 

#dot_inner 
{ 
    background: #e10000; 
    width: 20px; 
    height: 20px; 
    left: 1px; 
    top: 1px; 
}

источник

2013-12-17 12:25:39

Спасибо, что это работает, но я думаю, что я просто уйду с этой 1px сплошной границы, а не с помощью обертки, и надеюсь, что браузер скоро поднимется. – Bruce

Граница CSS3 и с граничным радиусом

ответ

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