2013-06-19 3 views
2

Если бы я должен был прочитать название этого вопроса, не увидев его раньше, мой первый ответ будет: «Не используйте!», Что имеет смысл, однако, это не особенность. пытаюсь обнаружить, но вместо этого как Firefox отображает цвета.Есть ли способ «хорошей практики» обнаружения Firefox?

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

Я прочитал о возможных причинах, почему (то есть что-то о цветовых профилей, которые я только сейчас исследующих тему) и «о: конфигурации» файл здесь:

http://support.mozilla.org/en-US/questions/774152

http://jorgebernal.info/2008/03/08/whats-wrong-with-colors-in-firefox/

http://www.maketecheasier.com/28-coolest-firefox-aboutconfig-tricks/2008/08/21

Зная, почему это хорошо, но Ther e, похоже, ничего не говорит о том, как это должно обрабатываться веб-дизайнером (также возможно, что я путаю проблему здесь, потому что они, похоже, много говорят о изображениях, а цветопередача я проблема есть нет изображение, но только простое шестнадцатеричное значение цветового кода).

Вот несколько скриншотов, показывающих разницу между правильно отображаемыми цветами (показаны первыми) и тем, как Firefox отображает цвета (показано второй). Обратите внимание на цвета между каждого изображения «кнопки» (на самом деле это просто «выпадающее окно» для мусора). Также обратите внимание, что немного цвета, который показывает между изображениями являются не сами изображения, только стандартные CSS визуализации шестнадцатеричные цвета:

IE 10: enter image description here

Firefox 21,0: enter image description here

Я в порядке с любым решением, которое может заставить Firefox отображать цвета так же, как IE и Chrome (протестирован как на 32-битных, так и на 64-битных, и все еще только Firefox делает это s [на обоих]), но я знаю, что не буду изменять файл «about: config» для всего мира, поэтому, если бы я мог просто надежно обнаружить Firefox, возможно, я мог бы просто настроить его цвета на более темный оттенок. К сожалению, я (возможно, очень разумно) никогда не использовал обнаружение браузера, поскольку я знаю, насколько он неустойчив и ненадежен.

Есть ли надежный (не говоря уже о будущем) способ обнаружения Firefox для веб-дизайнера? Я просто использую JavaScript/jQuery для сценариев на стороне клиента.

-------------------- UPDATE ---------------------

Хорошо, вот CSS, который отображает границы. Кнопки red-is имеют два класса: DDL и visType, а серые кнопки - классы DDL и groupType.

.DDL.visType 
{ 
    background-color: #bb9191; 
    border-right: 2px inset #ba8c8c; 
    color: #1a5c17; 
} 

.DDL.groupType 
{ 
    background-color: #e7e7e7; 
    border-right: 2px inset #989898; 
    color: #0b3773; 
} 

Итак, вы можете видеть, что в этом CSS ничего нет, насколько это касается FireFox. Фактически, глядя на истинный цвет, который отображается в инструментах разработчика Firebug и Chrome, говорит, что фактическая цветопередача одинакова для правых границ красных кнопок (в rgb она переводится на 186, 140, 140).

+0

Обычно вы не должны использовать JavaScript для специальных задач css/design. – andlrc

+0

Я не уверен, что вы подразумеваете под конкретными задачами css/design? Я использую jQuery '.css()' все время для динамического изменения цветов, если это необходимо. – VoidKing

+0

Вы также можете сделать это наоборот: выбросьте изображения и используйте 'linear-gradient' вместо фона в качестве кнопок для ваших кнопок. –

ответ

1

Для этого сценария проблема, по-видимому, заключалась в том, что по-разному Firefox отображает стиль границы «вставки». Почему у меня было это как вставка, чтобы начать с того, что это размытие. Я, вероятно, испытывал различные взгляды на такой тонкой (2px;) границе (различия, которые едва ли, если вообще, заметны, учитывая очень узкую ширину).

После того, как я изменил этот стиль solid;, цветовые различия были гораздо менее резким:

Chrome 27.0.1453.110 м:

enter image description here

Firefox 21,0:

enter image description here

Тот же самый код CSS показан выше, с новыми изменениями (только изменился оба вхождениями из inset в solid):

.DDL.visType 
{ 
    background-color: #bb9191; 
    border-right: 2px solid #ba8c8c; 
    color: #1a5c17; 
} 

.DDL.groupType 
{ 
    background-color: #e7e7e7; 
    border-right: 2px solid #989898; 
    color: #0b3773; 
} 

Простым решение для нескольких тупых проблем, которые никогда не должно иметь место в первой очереди, я полагаю, (зачем использовать inset для такой вещи?), но сузить его было довольно сложно.

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