Стиль бордюров CSS INSET или GROOVE сильно отличается от IE9 FF4, Safari5 или Chrome2. - PullRequest
Новая
       17

Стиль бордюров CSS INSET или GROOVE сильно отличается от IE9 FF4, Safari5 или Chrome2.

4 голосов
/ 28 марта 2011

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

при использовании 

{
    border: 5px groove #A00;
}

или 

{
    border: 5px inset #A00;
}

Внешний вид Firefox 3.6 / 4.0 - это то, что мне нужно, и то, что я считаю правильным рендерингом GROOVE или INSET.Все остальные выглядят совершенно по-другому.Близко к ТВЕРДОМУ или АУТСЕТУ.По-видимому, нет реального точного определения, что делает для разработчиков в браузерах удивительной стороной дать каждому свое толкование того, что делают стили INSET и GROOVE.

Есть ли способ, которым ямогут ли смешаться в настоящее время смешные различия с одним хорошо продуманным моим дизайном, который мог бы выглядеть одинаково в основных браузерах?

Я не боюсь использовать некоторые другие креативные CSS3 вещи, если я толькознать, что или как это может быть использовано тогда.Так что любые идеи приветствуются и код особенно.

Ответы [ 3 ]

6 голосов
/ 28 марта 2011

Из spec (выделение):

Цвет границ, нарисованных для значений 'groove', 'ridge', 'inset' и 'outset'зависит от цветовых свойств границы элемента, , но UA могут выбрать свой собственный алгоритм для вычисления фактических используемых цветов .Например, если у 'border-color' есть значение 'silver', тогда UA может использовать градиент цветов от белого до темно-серого для обозначения наклонной границы.

Поэтому не существует «правильного» способа окраски границ.Это зависит от поставщика браузера, как он хочет, чтобы его браузер затенял границы.

Итак, в ответ на это:

Есть ли способ, которым я мог бы получить в настоящее времясмешные различия, чтобы соответствовать одному хорошо продуманному моему дизайну, который мог бы выглядеть одинаково в основных браузерах?

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

3 голосов
/ 28 марта 2011

Firefox / Webkit / IE / Opera все выглядят в соответствии со мной с точки зрения шаблона, который они отображают, то есть более темный цвет снаружи границы слева и сверху и более светлый цвет снаружи границы -право и границы снизу.

Фактические цвета, кажется, отличаются для каждого браузера. Из вашего примера:

Opera
Темнее: # 7f0000; RGB (127,0,0)
Зажигалка: # c04141; RGB (192,65,65)

Firefox
Темнее: # 770000; RGB (119,0,0)
Зажигалка: # d47f7f; RGB (212.127.127)

Webkit
Темнее: # 560000; RGB (86,0,0)
Зажигалка: # aa0000; RGB (170,0,0) * * тысячу двадцать-одна

1024 * IE8 *
Темнее: # 2e0303; RGB (46,3,3)
Зажигалка: # b80d0c; RGB (184,13,12)

Цветовые соотношения ясны, и кажется, что логичным является Webkit - заданный цвет для более светлого и удвоение значения RGB для более темного.

Остальные совсем другие, но картина, по крайней мере, такая же.

1 голос
/ 07 февраля 2013

Я знаю, что вы уже приняли ответ, но рассмотрите возможность использования свойства "outline".

Уже обсуждалось здесь на SO

...