Search the Community
Showing results for tags 'кроссбраузерность'.
Found 10 results
-
Решил анимировать иконки, нашел пример в интернете, скопировал в Safari Версия 11.0.2 (13604.4.7.1.3), в мобильных Safari и Chrome все отображается отлично но почему-то иконки неправильно отображаются в Chrome Mac (Версия 63.0.3239.132 (Официальная сборка), (64 бит), Chrmoe Windows и Edge - на переднем плане анимированный градиент, а на заднем иконка пример кода пример того как должна выглядеть анимированная иконка во вложении Screen Capture 2018-01-10 06.49.14.mov
-
http://test1.chpmodul.com.ua/ столкнулся с такой проблемой: сначала сверстал сайт, все было нормально, а потом добавил в него медиа запросы @medai (max-width: 540px) и на интернет эксплорере верстка совсем сломалась. почему это случилось и как исправить?
-
всем привет. у меня появилась проблема того, что тень текста дико коверкается в сафари и в браузере телефона. неужели этого никак не избежать!? может, есть какие-нибудь решения, ведь наверно же с этим сталкивались многие другие? вот пример, здесь все минимизировано: скришот в разных браузерах: код: <!DOCTYPE html><html><head><meta charset="utf-8"> <title>font</title><style> body{background: #e5e08b;} p{ font-family: arial; color: #ffe; font-weight:bold; text-shadow: 0 0 .1ex #ba0, 0 0 .1ex #870, 0 0 .1ex #870, 0 .7ex .1ex #fff, 2ex 0 .5ex #ffd, -2ex 0 .5ex #ffd; }</style></head><body> <p>Lorem ipsum</p></body></html>вот даже ссылка, если кому интересно. Есть идеи, как правильно обращаться с этой тенью??? или хотя бы как исправить ситуацию в данном случае...
-
Собственно код .enter {background: url("../img/enter.png"); display: inline-block; width: 170px; height: 42px; position: relative;margin-left: 20px;cursor: pointer; font-family: Arial, sans-serif; font-size: 20px; font-stretch: condensed; font-style: italic; font-weight: bold; color: #7F5B2B; line-height: 42px; text-align: center; text-decoration: none; text-shadow: 1px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text;}.enter:hover {background-position: 0 -42px;}.enter:active {background-position: 0 -84px;}<button class="enter" onclick="submit();" type="submit">ВОЙТИ</button><a href="{registration-link}"><div class="enter">РЕГИСТРАЦИЯ</div></a>Проблема в браузерах или в моих кривых руках?
-
Шрифт 14pt в FF (других браузерах) и Safari - совсем не одно и тоже. В 2 блоках вылезают надписи. Разница разительна. Про сголаживание я вообще молчу. Как решить проблему без костылей?
-
Доброго времени суток. Задался проблемой соблюдения правил для верстки, не ломающейся при масштабировании в разных браузерах. Хотелось бы качестве результата темы получить что-то вроде набора правил, придерживаясь которых верстка не будет ломаться при масштабировании в последних версиях популярных браузеров. Интересно услышать мнение как экспертов, так и тех кто уже сталкивался с такой проблемой и выработал навык оформления стилей, не дающих ломаться верстке при масштабировании страницы.
-
На одном ресурсе уже поднимал такую тему, спрошу и у Вас. Хочу поговорить о достижении кроссбраузерности верстки. Все что я пока что верстал - исключительно для себя, т.е. для приобретения практических навыков - на хостинг ничего не заливал, проверял только в новых браузерах. И вот сейчас уже начинаю задаваться вопросом - как достигать профессиональной верстки, с соблюдением всех требований. Вот если говорить о кроссбраузерности, когда читал "Большую книгу CSS" Макфарланда и другие материалы, отмечал какие свойства не работают в определенных версиях IE, где обязательно указание префиксов поставщиков, в каких случаях нужно добавлять zoom: 1, что то в голове отложилось и я это старался исрользовать, но, ясное дело, что то и забылось. Так вот, хотелось бы понять, как работают профессиональные верстальщики. Понятное дело, что спецы с большим опытом знают все явные и неявные проблемы кроссбраузерности и сразу же пишут нужный код не прыгая между браузерами. А что в остальных случаях, неужели у верстальщика открыт с десяток разных браузеров и он по ходу написания кода проверяет результат во всех? Или сначала доводит до готовности верстку в своем "рабочем" браузере, а после этого начинает проверку в остальных? Или может быть все ограничивается проверкой в специальных сервисах, который проверяют твой код и указывают, в каких версиях браузеров могу быть проблемы. Знаю два таких сервиса - http://browserling.com/ и http://browsershots.org/ Правда в функционале их не разбирался. Расскажите, как Вы добиваетесь кроссбраузерности верстки? Всяческие материалы на тему сабжа приветствуются.
-
Доброго времени суток уважаемые форумчане. Реализовать text-shadow для статичного текста в ранних IE не проблема, благо есть фильтры, плагины jQuery и техника подложки. Столкнулся с проблемами добавления text-shadow тексту на кнопке и в поле ввода. 1. Кнопка Условия: кнопка с градиентом, тенью и текстом с тенью. Скриншот Попытки: a) Реализовать просто <a>: не универсально при желании использовать input[button], фильтры и плагин jqueryTextShadow создают тень для всего блока <a>, не только текста. б) Реализовать <а><span>text</span></a>: опять же не подходит для input[button] и span блокирует ховеры и клики по кнопке в IE (сделать его прозрачным - не будет текста, сделать z-index - 1 - не будет видно за заливкой). c) Реализовать <span class="button_green"><input type="button" class="action" /><span class="text">Перенесите меня обратно</span><span class="bg"></span></span> .action - прозрачная кнопка или ссылка на всю площадь контейнера с z-index: 10 .text - текст с тенью c z-index: 5 .bg - блока на всю площадь контейнера с заливкой и тенью z-index: 1 Расположение получилось как надо: кнопка с действием наверху, под ней текст с тенью, а под ним заливка. Но! Проблема в реализации ховеров, эктивов и фокусов. .button_green .action:hover + .text + .bg {} не работает нигде .button_green:hover .bg {} не работает в IE, так как .action закрывает собой родителя полностью Больше ломать голову сил нету. Давайте ломать вместе или может есть решение проще, а я упустил. 2. input[type=text], input[type=password] Условия: текст с тенью в IE. Скриншот Попытку реализации еще не сделал: создать поверх div с content editable и необходимым дизайном. по средствам JS синхронизовать изменение текста. Есть ли способ проще? И может быть вообще без JS? Заранее спасибо за ответы.
-
Всем привет, кого не видел. Сделал себе выпадающее меню на основе css по этому уроку. Но, естественно, на мобильных устройства не работает. Нашел урок с адаптивным меню и под мобильные устройства. Но переделывать всё меню лень, может кто подсказать, с чего начать, чтобы меню всплывало и на мобильных устройствах ?
-
Дело вот в чем, не раз замечаю что в хроме нужно ставить line-height больше чем в других браузерах. К примеру слева FF IE Opera справа Chrome Safari Как справиться с этим? Юзаю хак, но хотелось бы разобратся в причинах такого рендера. И найти более правильное решение. @media all and (-webkit-min-device-pixel-ratio:0) { button.button span span { line-height:29px; } } HTML <button class="button"> <span> <span> Join </span> </span> </button> Извиняюсь за большой CSS - верстаю под magento а там шаблоны не ахти. А менять каждый темплит времени нет. button.button { border:0; padding:0; margin:0; background:transparent; overflow:visible; cursor:pointer; vertical-align:middle; } a.button, button.button > span{ border:0; padding:0 9px; cursor:pointer; display:-moz-inline-stack; display:inline-block; text-decoration:none !important; position:relative; background: #44c8f5; background: -moz-linear-gradient(top, #44c8f5 0%, #1a95bf 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#44c8f5), color-stop(100%,#1a95bf)); background: -webkit-linear-gradient(top, #44c8f5 0%,#1a95bf 100%); background: -o-linear-gradient(top, #44c8f5 0%,#1a95bf 100%); background: -ms-linear-gradient(top, #44c8f5 0%,#1a95bf 100%); background: linear-gradient(to bottom, #44c8f5 0%,#1a95bf 100%); -webkit-border-radius:3px; -moz-border-radius:3px; -ms-border-radius:3px; -o-border-radius:3px; border-radius:3px; } a.button span, button.button span span { display:-moz-inline-block; display:inline-block; white-space:nowrap; text-transform:uppercase; font:13px/25px 'FranklinGothicURW-Dem', Arial, Helvetica, sans-serif; height:24px; color:#fff; }
